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

View code Play Walkthrough

Description

Learn to make a simple snake game using HTML5 canvas and Jquery.
Add New Comment

39 Comments

(close)
matt

matt

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

anon

anon

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

Phil

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

Daniel

Rockstar <3

html5coder

html5coder

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

Liucw

Liucw

so good,programmer of ideas so clearly´╝ü

SonicTheBlueBlur2

SonicTheBlueBlur2

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

SonicTheBlueBlur2

SonicTheBlueBlur2

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

Emilio Gu

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

swarnika

very nice…….

Etienne

Etienne

Nice game, but jQuery is useless !

Carlos

Carlos

Emilio Gu,

Just add this line of code to the HTML file:

Antoine Dahan

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

Antoine Dahan


riz

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

wazzup

There is no need for jquery here really…

annoyedude

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.

killhindoodooos

killhindoodooos

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.

Susannah

Susannah

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.

shrawan

shrawan

thanks ! good walk through !

daffes

daffes

Here’s a fix for:

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

http://pastebin.com/SGxB3H6c

It queues up the keystrokes and only changes the direction once the paint() function is called.

OJ

OJ

I don’t quite see why you need to play around with the tail variable in the snake moving part.

What would be the shortcoming of the following replacement?

if(nx == food.x && ny == food.y)
{
score++;
//Create new food
create_food();
}
else
{
snake_array.pop(); //pops out the last cell
}

var newhead = {x: nx, y: ny};
snake_array.unshift(newhead); //adds the new head as the first cell

This would seem much more easy to follow to me, but perhaps I’m missing something.

Shan

Shan

Nice tutorial!
Was very useful!
Can you suggest some other good html5 game tuts that you know?

Felix

Felix

Hi, excellent tutorial.
Any version for smartphone or tablets?
Thanks

Dominik

Dominik

Where is the definition of “game_loop”?
The game cannot work if game_loop doesnt work, yet its not defined anywhere…

Dominik

Dominik

I see now… nevermind

Prajjwal

Prajjwal

wow, dude you are a master of HTML you are a great person keep hardwork

Melek Jlassi

Melek Jlassi

please how i can do it im new in the css3 and html5 languages im new in all languages how i can do this i copy then all and put them in notepad and save them to .html or what ?

Jan

Jan

can someone explain all parts of code pls ?

Jan

Jan

no need, i understand now.

Mohamed Alaa

Mohamed Alaa

I’ve always been wondering about snake game’s logic and now you finally explained it to me, Thank you very much :)

boom beach diamonds hack

boom beach diamonds hack

Communication is often stunted, and scammers seem too populate the sites as much
as actual shoppers. For instance, your chat operators can trabsfer chats, handle multiple
chats simultaneously and even generate chat transcripts all from the comfort of their palm.
You can hire any dedicated programmer who can work dedicatedly and who is able to deliver
your appropriate work on time with the supreme expertise and highly advanced techniques and technologies such as Objective C, Cocoa,
Xcode, interface builder and many more.

thanh

thanh

simple but very great

Abdul

Abdul

Is there a way to make the game not start automatically, like to start the game the user has to click on the canvas, similarly when the game is over.

5x 10x 15x 20x

39 Comments

Description