Chess Game UI Using JQuery, UniCodes & Pure CSS3(No Image used)

Published on March 24, 2013

Hi guys, Welcome back. Chess game one of the ancient game. Chess was invented in India around the 6th century. Had enough history lecture. Now, today we will see how to create simple chess game User Interface using Pure CSS3. In my last post, we used very fewer uni-codes. But today we will try to use most of the uni-codes to create this. We will use uni-code for representing king, queen, bishop,rook and pawn. See the demo below.

Demo download

How to use Uni-codes in HTML

First of all, let’s see how to use uni-codes in HTML. Simple just find the which code represents with simple just add &#symbolic code; in your HTML. Refer //unicode-table.com/en/ for complete Unicode table.

HTML code for Chess board

<section class="contant">
  <div id="chess">
  </div>
</section>

CSS

.contant{
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-o-perspective: 1200px;
-ms-perspective: 1200px;
perspective: 1200px;
}
#chess{
width: 656px;
-webkit-transform: rotateX(55deg) translateZ(0px);
-moz-transform: rotateX(55deg) translateZ(0px);
-o-transform: rotateX(55deg) translateZ(0px);
-ms-transform: rotateX(55deg) translateZ(0px);
transform: rotateX(55deg) translateZ(0px);
}
#chess .box{
width: 80px;
height: 80px;
float: left;
border: 1px solid #ccc;
line-height: 80px;
font-size: 80px;
text-align: center;
background: #fff;
}
#chess .box.alt{
background: #ccc;
}

Jquery Code

var piece = [
    ["&#9814;", "&#9816;", "&#9815;", "&#9813;", "&#9812;", "&#9815;", "&#9816;", "&#9814;"],
    ["&#9817;", "&#9817;", "&#9817;", "&#9817;", "&#9817;", "&#9817;", "&#9817;", "&#9817;"],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["&#9823;", "&#9823;", "&#9823;", "&#9823;", "&#9823;", "&#9823;", "&#9823;", "&#9823;"],
    ["&#9820;", "&#9822;", "&#9821;", "&#9819;", "&#9818;", "&#9821;", "&#9822;", "&#9820;"]
];

$(function() {
    var htm = '';
    for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
            if ((i + j) % 2 === 0)
                htm += '<div class="box">' + piece[i][j] + '</div>';
            else
                htm += '<div class="box alt">' + piece[i][j] + '</div>';
        }
    }
    $('#chess').append(htm);
});

Fall back

Thought using uni-codes is very convient we have a little fallback. That is different browsers rander uni-codes in different ways. see below snap shots Firefox,IE,Chrome respectively.

####Firefox

####IE

###Chrome