JavaScript

var canvas, g;
var light,dark,white,black;
var size,r;
var current, choosing;
window.onload=game;

function game(){
light="#fff";
dark="#bbb";
white="#48b";
black="#600";
choosing=true;
current=24;
canvas=document.getElementById("board");
g=canvas.getContext("2d");
canvas.style.backgroundColor="#ddd";
canvas.addEventListener("click", move);
size=canvas.width/8;
r=size;
drawBoard();
createPieces();
drawPieces();
g.font="bold 16px arial";
g.fillStyle="#89a";
g.textAlign="start";
g.fillText("Click on any piece to move it.",40,520)
g.fillText("click where you want to move it to.", 40,540);
g.fillText("Use this space for removed pieces.", 40,560);
}

function drawBoard(){
var color;
for(var i=0;i<8;i++){
for(var j=0;j<8;j++){
if(i%2==j%2) color=light;
else color=dark;
g.fillStyle=color;
g.fillRect(i*size,j*size,size,size);
}
}
g.strokeStyle="#000";
g.lineWidth=2;
g.strokeRect(1,1,canvas.width-2,canvas.width-2);
g.strokeRect(1,1,canvas.width-2, canvas.height-2);
}

function drawPieces(){
var x,y,i=0;
for(y=0;y<3;y++){
for(x=1-y%2;x<8;x+=2){
piece[i].x=x*size+size/2;
piece[i].y=y*size+size/2;
piece[i].c=white;
piece[i].draw();
i++;
}
}
for(y=5;y<8;y++){
for(x=1-y%2;x<8;x+=2){
piece[i].x=x*size+size/2;
piece[i].y=y*size+size/2;
piece[i].c=black;
piece[i].draw();
i++;
}
}
}

function createPieces(){
piece = new Array();
for(var i=0;i<24;i++){
piece[i]={
x:0,
y:0,
r:size*3/10,
c:black,
h:"#fff",
draw:function(){
g.fillStyle=this.c;
g.beginPath();
g.arc(this.x, this.y, this.r, 0, 6.2832);
g.fill();
var grad=g.createRadialGradient(this.x, this.y, this.r/2, this.x, this.y, this.r);
grad.addColorStop(0, this.c);
grad.addColorStop(0.5, "#fff");
grad.addColorStop(1, this.c);
g.beginPath();
g.strokeStyle=grad;
g.lineWidth=this.r/3;
g.arc(this.x, this.y, this.r, 0, 6.2832);
g.stroke();
}
}
}
}

function move(event){
var x=event.pageX-canvas.offsetLeft;
var y=event.pageY-canvas.offsetTop;
if(choosing==true){
for(var i=0;i<24;i++){
var dx=piece[i].x-x;
var dy=piece[i].y-y;
sep=Math.sqrt(dx*dx+dy*dy);
if(sep<=piece[i].r) {choosing=false; current=i; } //found a piece
}
refresh();
}
else {
choosing=true;
piece[current].x=x;
piece[current].y=y;
refresh();
}
}

function refresh(){
g.clearRect(0,0,canvas.width,canvas.height);
drawBoard();
if(choosing==false){
for(var i=0;i<24;i++){
if(i!=current) piece[i].draw();
}
}
else {
for(var i=0;i<24;i++) piece[i].draw();
}
}