/* Begining of jQuery cookie part 1 */ /* End of jQuery cookie part 1 */

Srini's Blog

Sunday, November 09, 2008

8 Queens Puzzle

The 8 queens puzzle is the problem of putting eight chess queens on an 8×8 chessboard such that none of them is able to capture any other using the standard chess queen's moves. It was originally proposed in 1848 by the chess player Max Bezzel. The first solutions were provided by Franz Nauck in 1850.

This age old problem had captured my interest for quite some time now and I have done my own implementation of the 8 queen puzzle using jQuery, html, javascript and css.

The rules are:
* Eight queens are to be placed in the square. No more, no less.
* In a given ROW, there must be only one queen
* In a given COLUMN, there must be only one queen
* In a given DIAGONAL, there must be only one queen

The features I have implemented for this puzzle are:
* Select and deselect queens by clicking on a square
* Warns if you submit with less than 8 queens
* Warns if you try to choose more than 8 queens
* After submitting, if there are two clashing queens, highlights them in red
* After submitting, if there are no clashing queens, the queens are highlighted in green and the solution is displayed at the bottom

Hope you like it :)
If you have any suggestions please post them as comments and I'll try my best to implement it :)

Have fun!

Labels:

Tuesday, November 04, 2008

jQuery chess board

Inspired by the excellent jQuery table striping tutorial by Jack Born and the 8 queens puzzle, I have done a chess board with jQuery, html and css.
The basic logic was this:
Every ODD ROW will start with a white square followed by a black square, then a white square and so on.
Like so:
88

Likewise, each EVEN row will start with a black square and alternates with a white square.
Simply put,
ODD ROW + ODD ELEMENT = white
ODD ROW + EVEN ELEMENT = black
EVEN ROW + ODD ELEMENT = white
EVEN ROW + EVEN ELEMENT = black

All this, achieved with a little CSS

.white {
background-color: #FFCE9E;
width: 60px;
height: 60px;
}
.black {
background-color: #D18B47;
width: 60px;
height: 60px;
}


and FOUR LINES of jQuery!

$("#board tr:odd td:odd").addClass("white");
$("#board tr:odd td:even").addClass("black");
$("#board tr:even td:odd").addClass("white");
$("#board tr:even td:even").addClass("black");



Here it is -- my own jQuery chess board:)
abcdefgh
88
77
66
55
44
33
22
11
abcdefgh

Labels: , , , , , , , , , , , , ,