Coding Snake in JavaScript Complete Tutorial Every Step Explained with HTML5 Canvas

In this tutorial we will be creating the game snake using JavaScript and HTM5 Canvas. We will explore the game loop, collision detection, taking keyboard input and adding sound. If you enjoy this tutorial please subscribe like and share!

If you haven’t played snake let me give you the breakdown of this version of snake. You the player move around a line aka the snake as you eat various items your snake body gets longer. The objective is to keep eating the red dot and avoid hitting your own snake body or the edges of the screen if you do it’s game over. It’s your basic last as long as you can game and get the highest score using your quick reflexes.

Through this tutorial you will learn about adding audio. Every time our snake eats the apple he makes a gulp sound!

We will learn about collision detection by detecting when the snake eats an apple, hits the edge of the screen or collides with another part of its body.

We will take keyboard input to decide the direction our snake moves in.

Lastly we will add text to the canvas by implementing a game over screen and displaying a score that increments as you eat apples

Snake GitHub source code

Playable version of snake from tutorial (use arrow keys to move)

Alternate version of snake from GitGub user jeremystone4321 (use WASD keys to move)

[CodingWithAdam]

Enjoying this tutorial! Subscribe for even more game tutorials!

[markweed]

I speak Spanish and I was looking for things to do on the school page and I must say that this is one of the best tutorials I have seen. I hope you continue with your tutorials and good luck my friend.

[nv]

Best simplified Js snake tutorial on YT. You explained why and how everything works. Keep making more Js tutorials bud!!

[dumbee.]

Great tutorial! Fun way to learn javascript and game development. For fun I added red "YOU DIED" text and played the death sound from Dark Souls. Keep up the good tutorials!

[RenardBergson]

I'm brazilian and my english isn't so good, but I could understand almost everything you said and your tutorial was the best that I've ever seen. I'm learning to program using JavaScript and your video was very helpful. I've just subscribed in your channel. Thank you so much and God Bless You!

[usrdnl]

Thank you so much! Also for explaining everything in detail :)
I added a button under the h1 in the HTML to refresh the page, so it acts as a restart button:
<button .

[Tczewianka]

LOVED IT!!! Really good tutorial! I am a beginner and despite that everything was understandable and I was able to create my first game. I've learned a lot thank you for your work and keep going <3

[beckbrook]

Followed step by step the tutorial to learn more about Javascript syntax and thanks a lot for this, there's no heavy course background music, just simple explanations, clear informations so we can concentrate fully. Keep going like this it's perfect !

[MinhVu-vqdp]

1. Very calm voice.
2. Step by step...easy to follow.
Great teacher...!

[casbah]

Thank you very much it's rare that I comment in a tutorial session but that was a master piece

[jonasoliveirapereira]

That tutorial was very good. It was the first time that I fully understood everything from the very beginnig. I'm trying to make a bit of changes here and there, but often I find myself not know a lot of things haha. Gotta keep studying. Thanks.

[bibiwo]

Thank you so much, your explanations are extremely clear and even understandable for a total beginner :)

[deaduser]

This is a great tutorial! You explained everything very well and didn't rush anything making it very easy for me to learn! Thanks very much!

[nihadyaqublu]

You are an amazing mentor! Thank you for this great detailed thorough explanation!

[luizfarias]

Finally a tutorial with a good naming variables! 😁

[ouvie]

broo tysm!! this was magical, you're so underrated!
new sub :D

[kkphoenix]

I am gonna make two texts, one in English and one in Portuguese to prove myself like a Brazilian if you don't believe in that.

Eu sou um desenvolvedor do Brasil, na realidade um iniciante na programação e eu vim aqui dizer que seus vídeos são incríveis
e eu gostei muito da forma que você coloca as telas e como consegue deixar as coisas muito mais simples de aprender, por favor, continue fazendo seus vídeos de jogos, eu sinto que você tem um futuro brilhante como youtuber se isso significar algo e eu estou crescendo na programação junto com os seus projetos.

Hi, I am a Brazilian developer, actually I am new on programation, I just have a year and I come here to tell you that our videos are amazing, and I really appreciate them, the way you set our windows and how you explain things, making them more easily to understand, please, continue doing this game developing videos, I fell like you have a brilliant future as a YouTuber if that means something to you hahahahhahhaha, I am growing with our videos and our projects

with a lot of love, Kauã Alves Santos from RJ Brazil.

[Misskieutra]

Thank you so much. It is such a great tutorial for a beginner like me. Really easy to understand and to follow. Keep it up, sir. I learnt a lot and I really appreciate it!

[maliksalah]

YO ADAM COME BACK!!! lol
youre such a good explainer, 20/10 teacher
THANK YOU

[aaravtomar]

thanks .. please make a tutorial on a shooter game in which the character can move with infinte enemies, , something like planet defender Thanks