HTML5, more chess

chess2

Chess.html:


<!DOCTYPE html>
<html>
<head>
  <style>
  table {
    border: 5px solid #333;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    text-align: center;
  }

  tr:nth-child(odd) td:nth-child(even),
  tr:nth-child(even) td:nth-child(odd) {
     background: #ccc;
     background:-moz-linear-gradient(top, #ccc, #eee);
     background:-webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee));
     height: 40px;
     width: 40px;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="chess.js"></script>
</head>
<body>
  <header>Chess:</header>
  <div id="chess">Loading Board....
  </div>
</body>
</html>

The chess.js


var chess={
  clear: "&nbsp;",
  board: null,
  graphDiv: "chess",
  blackPieces: ["&# 9820;","&# 9822;","&# 9821;","&# 9819;","&# 9818;","&# 9821;",                "&# 9822;","&# 9820;"],
  whitePieces: ["&# 9814;","&# 9816;","&# 9815;","&# 9813;","&# 9812;","&# 9815;",                "&# 9816;","&# 9814;"],
  blackPond: "&# 9823;",
  whitePond: "&# 9817;",

  initBoard: function(){
    this.board ='<table id="grid" border"0" cellspacing="0" cellpadding="0">';
    for(var row=0;row<8;row++){
      this.board += "<tr>";
         for(var column=0;column<8;column++){
            this.board += "<td>" + this.clear + "</td>";
          }
        this.board += "</tr>";
       }
    this.board +="</table>";
  $("#chess").html(this.board);
},
renderRow: function(arr){
   var temp = "";
   if(arr instanceof Array){
      for(var i=0;i<arr.length;i++){
         temp += "<td>" + arr[i] + "</td>";
      }
      } else {
         for(var i=0;i<8;i++){
              temp += "<td>"+arr+"</td>";
         }
      }
      return temp;
},
initPieces: function(){
   $('#grid tr').eq(0).html(this.renderRow(this.whitePieces));
   $('#grid tr').eq(1).html(this.renderRow(this.whitePond));
   $('#grid tr').eq(6).html(this.renderRow(this.blackPond));
   $('#grid tr').eq(7).html(this.renderRow(this.blackPieces));
}

};
$(document).ready(function() {
   chess.initBoard();
   chess.initPieces();
});

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s