digitarald - Web Craftsman Harald Kirschner - Internet Consultant & Contractor

Showcase “Blue Chess”

A proof-of-concept for a JavaScript chess game. No opponent, no full check-mate, nevertheless amusement.

The Action Happens Here

JavaScript & MooTools

var game;
 
window.addEvent('domready', function(){
 
	game = new Chess('chess');
 
});

XHTML Markup

<div id="chess"></div>
 
<fieldset>
	<legend id="chess-log-state"></legend>
	<input type="button" value="Undo" onclick="game.undo();" />
</fieldset>

CSS Stylesheet

#chess {
	background-color: #fff;
	border: 1px solid #eee;
	height: 500px;
	position: relative;
	width: 500px;
}
#chess .field-wrap {
	height: 400px;
	left: 50px;
	position: absolute;
	top: 50px;
	width: 400px;
}
#chess .field {
	background-image: url(images/w.gif);
	height: 50px;
	position: absolute;
	width: 50px;
}
#chess .field-black {
	background-image: url(images/b.gif);
}
#chess .field-white-hilighted {
	background-image: url(images/w1.gif);
}
#chess .field-black-hilighted {
	background-image: url(images/b1.gif);
}
#chess .shape {
	background: url(images/b-b.png) no-repeat center;
	height: 40px;
	margin: 5px;
	position: absolute;
	width: 40px;
}
#chess .shape.active {
	cursor: pointer;
	z-index: 2;
}
#chess .shape.dragging {
	cursor: move;
	z-index: 3;
}
#chess .shape-b {
	background-image: url(images/b-w.png);
}
#chess .shape-b-black {
	background-image: url(images/b-b.png);
}
#chess .shape-k {
	background-image: url(images/k-w.png);
}
#chess .shape-k-black {
	background-image: url(images/k-b.png);
}
#chess .shape-n {
	background-image: url(images/n-w.png);
}
#chess .shape-n-black {
	background-image: url(images/n-b.png);
}
#chess .shape-p {
	background-image: url(images/p-w.png);
}
#chess .shape-p-black {
	background-image: url(images/p-b.png);
}
#chess .shape-q {
	background-image: url(images/q-w.png);
}
#chess .shape-q-black {
	background-image: url(images/q-b.png);
}
#chess .shape-r {
	background-image: url(images/r-w.png);
}
#chess .shape-r-black {
	background-image: url(images/r-b.png);
}
#chess .guide {
	color: #aaa;
	font-weight: bold;
	padding: 1px 4px;
	position: absolute;
}
#chess .guide-n {
	bottom: 450px;
	padding-left: 19px;
	text-align: center;
}
#chess .guide-e {
	left: 450px;
	padding-top: 19px;
}
#chess .guide-s {
	padding-left: 19px;
	text-align: center;
	top: 450px;
}
#chess .guide-w {
	padding-top: 19px;
	right: 450px;
}
#chess-log {
	border: 1px solid #eee;
	font-size: 0.9em;
	height: 300px;
	list-style: none;
	width: 500px;
}
 
fieldset {
	border: none;
	padding: 1em;
}
legend {
	font-size: 1.1em;
	font-weight: bold;
	padding: .5em;
}

This example and the accompanying sources/assets are © 2008-2009 by Harald Kirschner and available under The MIT License. For debugging and profiling the scripts and their markup download Firefox and use addons like Firebug and Web Developer Toolbar.

5 Comments

Please use the support forums for discussing the project, asking questions or posting bug-fixes!