We all love to play Chess, the most fascinating game that absolutely needs good thinking powers. You know that, comparing a human to a computer logically and arithmetically, computer has the superior power. So, certainly if you play a chess game with computer as opponent, a 90% chance is for the computer to be the winner. But, it is not sure.

It was actually in C language by Oscar Toledo Gutiérrez, who created chess game program in less than 2 KB. Since, it’s C, compiling is necessary. But, who have time for that. Let’s make it in the web.

We only need jQuery and a plugin I created for making the game. You can see the plugin code here and the minified version here.

The first thing you need to do is make a HTML file and select the element where you want to add the game into :

<!DOCTYPE html>
<html>
 	<head>
		<script src="//lab.subinsb.com/projects/jquery/core/jquery-latest.js"></script>
		<script src="//lab.subinsb.com/projects/jquery/chess/jquery.chess.min.js"></script>
 	</head>
 	<body>
		<div id="content">
			<h2>jQuery Chess Game</h2>
			<div id="game"></div>
		</div>
		<!-- http://subinsb.com/jquery-chess-game -->
 	</body>
</html>

We are loading the latest jQuery version and the minified version of the plugin.

Now, we tell the plugin to make the game in the #game element :

$(document).ready(function(){
    $("#game").chess();
});

Insert the above code in a <script> tag or in a separate JS file and the game will be started on the element.

The Game

You will see the 8×8 blocks of the chess board with slightly brown and yellow colours. The moulds of the board is not images, but characters of UTF-8 format.

When each moulds of game are clicked and moved, JS processes if the move is valid and makes the move. The chess game code is created in JS by Andrés Moreno by porting from the C code by Óscar Toledo G.

My plugin makes the game board, places the moulds and handle events.

Hope you have enjoyed this. I’m planning to create a multiplayer AJAX version of this in the future. Stay tuned.