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！

Putu Yoga

Great Example ! Thx dude

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.

FedericoPonzi

Really nice tutorial!
Thanks,
Federico

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

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

thanks ! good walk through !

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.

salman

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

what is this and why we have to add it?if i skip it will it run?

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

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

Felix

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

Dominik

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

Dominik

I see now… nevermind

Prajjwal

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

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

can someone explain all parts of code pls ?

Jan

no need, i understand now.

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

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

simple but very great

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.

badlyneeded

how to put background picture and change the snake to image as well as the food to fruit?

a.h

Carlos, Antoine, what line should Emilio add?

I am having the same issue.

Also, to remove all JS dependencies, how can we replace these lines:

//first line
$(document).ready(function(){

//canvas
var canvas = $(“#canvas”)[0];

Jordan Lane

This is a fun little project!

I’ve created an object oriented version without the jQuery dependency and couple more features like food spawning collision and double movement blocking. Here it is for anyone interested: https://github.com/JJCLane/Snake

dustin

nice job

Robert

Very nice tutorial, keep it up!
Thank you. :)

supercell games boom beach android

Wichtig ist, das man alles in Ruhe durchliest, damit nichts schiefgeht.

Brian

This game is bad piggies

miha

Nice, congrats for simplicity.

Free pokemon games

Usually I do not learn article on blogs, however I wish to say that this write-up very forced me to
take a look at and do so! Your writing style has been surprised
me. Thank you, very great article.

http://Durl.me/Apyqeg

Good answer back in return of this matter with genuine arguments and telling everything on the topic
of that.

woodworking

CNC equipment aids in keeping overhead low while
profiding the most optimal environment for boosted productivity.
The size of the project in its raw stage is also something to
think about. To make it even easy to understand iit could include detailed
drawings to ggo with each stage showing the progress off youur project.
Skill level is also an important component in all types oof woodwork and home projects.

Homes

Dobra komunikacja z centrum miasta oraz dojazd do obwodnicy są jednym z głowach atutów tej okolicy.

Elouise

Dodge headligghts are available in verry reasonable rice on the stores.
This kit iis vwry useful ass it offers a wide range of clours
according to colour temperatures; you can pick the one that matches well with your car.

You shoujld be able too nail the first easily
(and almost automatically) as you round the corner.
A GPS unit can be a great idea for a teens vehicle.
Unless someone has plenty off ready cash, they are unlikely to be able to
regularly change their car, particularly if they like driving new
vehicles.

scarymazegames

Appreciating the time and energy you put into your blog and
in depth information you offer. It’s good to come across a blog
every once in a while that isn’t the same outdated rehashed material.
Fantastic read! I’ve saved your site and I’m adding your RSS feeds to my Google account.