We also made this HTML5 drawing application :)
This jQuery plugin puts simple version of Knight's Tour board game into jQuery selector element that you want.
The goal of game is to fill a chess board with knight moves (to move a knight to every single square on board), with restriction that each square can be played only once. If there is no square to move, the game is over.
Knight's Tour is an ancient chess problem, and it's algorhytms are also a basis of chess software developement, from it's beginning.
You use it normally:
$(selector).jKnight( { options } );
Selector should be block element like <div>. It is best if it's width and height are set in your CSS, and if they are divisible by number of rows / columns that you want on your board.
size is witdh (and height) of every square in pixels.
numRows and numCols determine number of rows / columns on board. I didn't limit them in any way, so you can set them to any integer you want, or even add a script to let user decide about it. But consider that at some board sizes are in fact impossible to solve Knight's Tour. By default it is like on standard chess board, 8 x 8
offset is a margin between squares, in pixels. By default it is 0. You should give it some value in case you set CSS for all squares to be the same colour (not chequered).
fitSquares. If set to true (which is default because I suppose that most people will want that), it will adjust squares size so that they fit selector element's width (considering offset too). In other words, this option will by default override previously set size option. So, if you don't want squares to fit element's width, set size to desired value, and set fitSquares to false. Also, watch if element's size is divisible by squares' size, otherwise you may get unnecessary margins.
fitContainer. If set to true, it will draw squares according to size and fitSquares settings, and then it will set original element's width and height to strip margins. This one is false by default.
speed is speed of knight's animation, in miliseconds. If you don't want him animated, set it to 0.
knightImage is path to image for your knight. If you want to use Unicode text symbol for chess knight instead (it is ♘ for white knight and ♞ for black one), then you can easily replace it inside plugin's source code, but depending on font, you will probably need to fine-tune position in CSS.
failMessage is message to display when game is lost (no available moves). To include "Play again" link, put your text into an HTML element with class "playagain". winMessage is message to display when game is won (all squares visited by horse). To include "Play again" link, put your text into an HTML element with class "playagain".Here is source code. I didn't minify it, it is small anyway. You can minify it if you want, and you can tweek it the way you want. I tried to make code as self-explanatory as possible. Here is CSS. Link it or paste it to your CSS and modify it as you want.
Include it usual way, and call it from document ready, or from any other event you like. For example :
<script type="text/javascript" src="jplums.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("field1").jKnight();
});
</script>