you forgot to make sure that the food does not collide with the snake body on creation
If you press down and left very quickly (perhaps other combinations are also possible) the game is over.
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.
This is a great tutorial. If you are interested in this topic, we have two great premium HTML5 game dev courses:
Looks pretty nice but it won’t work, what should i be doing wrong?
so good,programmer of ideas so clearly！
Great Example ! Thx dude
html5coder, you have to left-click inside the game box to play, just like with Flash.
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…
keep it up. very helpful.:)
Nice game, but jQuery is useless !
Just add this line of code to the HTML file:
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.
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”);
There is no need for jquery here really…
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.
Really nice tutorial!
What I did to get it to work was just include a line that says
I don’t know why the original version here works.