HTML5, more chess

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&gt; <script… Read More HTML5, more chess

Javascript Canvas, empty chess board

Short example of how to draw a empty chess grid using canvas and javascript. Javascript Code, save as chessboard.js: var chess={ ctx: null, width: 402, height: 402, white: “#fff”, lightGrey: “#000000”, black: “#000000”, squareWidth: 0, squareHeight: 0, graphDiv: “chessCanvas”, initValues: function(){ this.squareWidth = (this.width-2) / 8; this.squareHeight = (this.height-2) / 8; }, resetBackground: function(){ this.ctx.canvas.width… Read More Javascript Canvas, empty chess board