HTML5 game tutorial - Make a snake game using HTML5 canvas and Jquery

matt

you forgot to make sure that the food does not collide with the snake body on creation

anon

If you press down and left very quickly (perhaps other combinations are also possible) the game is over.

Phil

Wow, this reminds me so much of Pygame, the game framework for Python. Glad I found this to show me how similar (and easy) they are.

Daniel

Rockstar <3

Pablo

This is a great tutorial. If you are interested in this topic, we have two great premium HTML5 game dev courses:

http://www.udemy.com/create-a-html5-game-from-scratch
http://www.udemy.com/html5-game-development

html5coder

Looks pretty nice but it won’t work, what should i be doing wrong?

Liucw

so good,programmer of ideas so clearly！

SonicTheBlueBlur2

html5coder, you have to left-click inside the game box to play, just like with Flash.

SonicTheBlueBlur2

html5coder, you have to left-click inside the game box to play, just like with Flash.

Emilio Gu

Thanks! I don’t understand some parts but, I try to execute and it don’t work! I’ve created the snake.html and the snake.js (the snake.css seems not necesary now), I click in the html but it don’t work. I see there’s no link between snake.html and snake.js, I mean, the html did not include the js to work the game…

swarnika

very nice…….

Syed Hammad

great job.
keep it up. very helpful.:)

Etienne

Nice game, but jQuery is useless !

Carlos

Emilio Gu,

Just add this line of code to the HTML file:

Antoine Dahan

Hey Emilio Gu,

in your html file just put the line:

(assuming snake.js is the name of the js file. Also make sure they are in same directory.

Antoine Dahan

”
“

riz

brilliant tutorial. You can get rid of jquery dependency by doing this for key presses

document.onkeydown = function(evt)
{
if(evt.keyCode == 37 && d != “right”) d = “left”;
else if(evt.keyCode == 38 && d != “down”) d = “up”;
else if(evt.keyCode == 39 && d != “left”) d = “right”;
else if(evt.keyCode == 40 && d != “up”) d = “down”;
}

//and for dimensions
var w = canvas.getAttribute(“width”);
var h = canvas.getAttribute(“height”);

wazzup

There is no need for jquery here really…

annoyedude

The anti-jquery police people are annoying. Sure you don’t strictly *have* to use jquery for this, but it makes a few of the lines easier, a lot of professionals and non-professionals use it by default anyway, isn’t that difficult to add and it warned on the title. well it was his choice to do use that anyway. you can always look at non-jquery html5 game tutorials if that is your preference, but that doesn’t mean every tutorial has to be non-jquery! geez.