Home

Requirements

First step is to make sure all the required files are included on the page that will display the game:

1. jQuery: Version 1.7+ or 2.0+ is recommended (note: jQuery 2 isn't compatible with IE8 or older).
2. jSnake Plugin: The script for the jSnake - jQuery Plugin.
3. That's it!

Notes: Tested on IE9+, Chrome, Safari, Firefox and Chrome for Android.

Basic implementation

This plugin works as an extension of jQuery, so the implementation is a nice and easy task; also, any HTML element can be turned into a jSnake board... but I strongly recommend to use a

element (there is still a few bugs with the timers when loading multiple jSnakes, but I'm working on it).

The plugin also provides basic interaction, but we will check it out later on a future version of this guide.

Let's start creating a new jSnake board into a div element with a "GridContainer** id:

$("div#GridContainer").Snake();

And that's it! Pretty easy huh?

As you can notice, the above code doesn't have any parameters, but don't worry, the plugin will generate a jSnake board anyway using some default values:

• Board size: 20 x 20 cells (width x height).
• Auto Start : Start the game after loadin it.
• Starting Position: (2,3).
• Game Speed: 300 (Speed in miliseconds).
• No Score Board.
• No Enemy Snakes.
• No Display Score Board.
• No Walls.
• Points per Fruit: 10
• Points per beaten snake: 100
• Controls: "auto"

Following those default values, your div#GridContainer element will now display a 20x20 jSnake grid with a user driven snake (You need to click on the board to start controlling the snake).

You can use an object with a few parameters in order to customize your game:

$("div#GridContainer").Snake({
	grid: [20,20],    // Grid size
	start: true,      // Start after load
	snake: [2,3],     // Initial position
	speed: 300,       // Speed in miliseconds
	enemies: 0,       // Draw NPC enemy snakes
	killers: 0,       // Draw NPC enemy killer snakes
	score: false,     // Draw a score board
	walls: false,     // Has walls?
	fruitVal: 10,     // Points per eaten fruit
	snakeVal: 100,    // Points per beaten snake
	controls: "auto", // Display visual controls (true | false | "auto")
});

Now, at this point, there are a few notes to take in mind:

1. All values are optional.
2. Loading a jSnake two or more times on the same element will not cause a overwrite, the first grid will be updated with the new values instead.
3. The "grid" parameter accepts only an Array with 2 numbers, with values limited to: 5 <= num <= 150

Manipulation

As I already mentioned on the above notes, loading a jSnake more than once on the same element will be interpreted as an update.

Meaning... if you already have a jSnake instance on your div#GridContainer element, you can modify the behavior using the same function:

$("div#GridContainer").Snake({
	speed: 100
});

Then:

$("div#GridContainer").Snake({
	grid: [25,25],
	start:false
});

Then:

$("div#GridContainer").Snake({
	start: true
});

And so goes on, anytime you want to make an update.

But hey! There is no use in sending an object with just one parameter... so there is a bunch of shortcuts for common actions:

$("div#GridContainer").Snake("start");       // Starts animation
$("div#GridContainer").Snake("stop");        // Stops animation
$("div#GridContainer").Snake("toggle");      // Toggles animation
$("div#GridContainer").Snake("walls");       // Enables the walls on the board
$("div#GridContainer").Snake("noWalls");     // Disables the walls on the board
$("div#GridContainer").Snake("toggleWalls"); // Toggles the walls on the board
$("div#GridContainer").Snake("toggleScore"); // Toggles the Score Board
$("div#GridContainer").Snake("newEnemy");    // Adds a new Enemy Snake
$("div#GridContainer").Snake("newKiller");   // Adds a new Killer Snake
$("div#GridContainer").Snake("reset");       // Resets the game 
$("div#GridContainer").Snake(100);           // Or any Number, changes the speed in miliseconds
$("div#GridContainer").Snake([10,10])        // Or any Array, changes the grid size

Notes

The example contained on the repository is based on this implementation guide, you will find a code example of the most of the above mentioned features.

Please feel free to comment or suggest any improvement for the plugin.

Enjoy!