Sunday, March 24, 2013

Hi guys, Welcome back. Chess game one of the ancient game. Chess was invented in India around 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 less uni-codes. But today we will try to use most of uni-codes to create this. We will use uni-code for representing king, queen, bishop,rook and pawn. See the demo below.

How to use Uni-codes in HTML


First of all lets 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 http://unicode-table.com/en/ for compleate uincode 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.
Chess Game UI Using  JQuery, UniCodes & Pure CSS3(No Image used)
Firefox

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

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

0 comments :

Post a Comment