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: " ",
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();
});
