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:
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
and FOUR LINES of jQuery!
Here it is -- my own jQuery chess board:)
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:
8 | 8 |
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:)
a | b | c | d | e | f | g | h | ||
8 | 8 | ||||||||
7 | 7 | ||||||||
6 | 6 | ||||||||
5 | 5 | ||||||||
4 | 4 | ||||||||
3 | 3 | ||||||||
2 | 2 | ||||||||
1 | 1 | ||||||||
a | b | c | d | e | f | g | h |
Labels: 8 queens, board, chess, css, design, game, inspiration, jack born, javascript, jquery, js, leisure, striping, table
1 Comments:
could be even simpler. Default class should be black or white then you can half code :)
nice post anyway! a little ajax chess head to head would be cool with jqueroid
By LukeB, at 6:51 AM
Post a Comment
<< Home