Get updates about new walkthroughs, behind-the-scenes experiments, tips, tricks and more.
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.
Hmm is anyone else encountering problems with the images on this blog loading?
I’m trying to find out if its a problem on my end or if it’s the blog.
Any feedback would be greatly appreciated.
thanks ! good walk through !
Here’s a fix for:
“If you press down and left very quickly (perhaps other combinations are also possible) the game is over.”
It queues up the keystrokes and only changes the direction once the paint() function is called.
what is this and why we have to add it?if i skip it will it run?