Create HTML Chess Game With jQuery


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