Code Snake Game in Vanilla JavaScript (JS & HTML5 canvas)

In this tutorial you will create a snake game using plain vanilla JavaScript. I will only use Sublime text editor and my browser. We will code a fully functional snake game with controls using arrow keys, lose the game if you hit the walls or your own tail, and every time you collect fruit you add to your score.

Learn to code:
Keyboard Controls
Canvas Drawing
Scoring
Arrays
Loops


Hope you enjoy!

[luigi]

Worked perfectly! It was the first program that i wrote in java script and i really learned something here. The explications are clear, it allowed me to understand what i was writing. Really nice video!

[Falbi]

This is awesome. For real, I feel like I could finally learn something from a tutorial. Excellent job, thank you very much.

[beribloxxd]

Thanks a lot, crack, I don't know what I would have done without you!

[Boxcart]

When I type in "canvas" in my style.css tab it doesnt turn red like yours at 3:19 and I have no idea why :(

[dany]

Your video was unbelievably helpful, thank you

[orisoffer]

Thank you so much. Ive looked through so many tutorials and this one is the only one that seemed to work for me. As a begginer, I could understand the code and modify it for my needs. You've earned a new sub today.
I did have one small problem: Because the game interval is 100, a player can quickly go in two directions in one interval and lose the game like before the dir change. If i set the interval to be any lower the game is too difficult for my needs, any ideas on how to fix this? Again, thank you so much.

[gopikavenugopal]

Thank you so much! this was very much helpful and it is explained so nicely ! Good work!!

[fathimanisha]

Instead of drawing another box in the canvas, you can just change the canvas color to light green and add a 25 pixel border to it

[satyachandra]

I have a problem with game.js it is not opening and because of that the game is not coming how to solve it

[amartyachoudhary]

What if the food appears on the body of the snake?

[plloue]

How do you add chrome to snake game.html?

[amartyachoudhary]

Please provide the link to the code in the description box

[jonathancode]

7.40 or the vid does not work for me plz help

[snwyyy]

This video helped me learn a lot about javascript and please make more tutorials on javascript please because I really want to learn a lot of javascript.
I already use c# and if u can, can you please make a video for c#
Thank you in advance:)

[CPROfficialChannel]

The Script Is Wrong Because can't type this video

[Chubadachubby]

My snake keeps getting bigger even with the snake.pop