Beginner JavaScript Project – Snake Game Tutorial

In this beginners coding tutorial, you will learn to create a Retro Snake Game inspired by the iconic Nokia Snake game using vanilla HMTL, CSS and JavaScript! Using JS you will learn to draw the game board, create the snake and randomly generated food, make the snake move, increase the snake size when it eats, and increase its speed. you will also learn to keep the score, track collisions for the snake, and display your high score.

✏️ Course developed by @howtobecomeadeveloper

⭐️ Contents ⭐️
⌨️ (00:00) What we are building / Finished snake game
⌨️ (01:57) Setting up our HTML
⌨️ (10:25) Styling with CSS
⌨️ (27:05) Creating the snake game logic with JavaScript

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama

--

[howtobecomeadeveloper]

It's an honor to be shared on this channel, hope you have fun coding it! 🙏

[IBIS-D]

things like this keep me fighting depression and getting up in the morning. I've been out of work for six months and the holiday season is a horrible time but these things keep me going. Thank you

[NAkt-vzhq]

Just completed it in about 4 hours. Works like a charm! Thank you for the consistent awesome uploads:)

[DmitriyKochkarev]

Thanks for the great video!

The only two things I think should be fixed in the game logic before starting playing with tweaks for it:
1. Reverse snake movement should be blocked. Now if snake length is 1 and you press arrow key opposite to the current movement direction the snake would go in that opposite direction and the snake is > 1 - it would reset the game which is obvious but would make players mad :)
2. Food generation should be adjusted so food would not generates inside the snake, for now it happens sometime. Probably would use the same logic as in the collision detection function.

Thank you!

[bitcoinbunker]

Absolutely love this, thanks for taking the time to create and share it.

[juandager]

Amazing content! It really helps understand how elements interact. Great introduction to JS before going to React.

[reptilianis]

One of the most valuable channels which I subscribe, thank you for your work ;)

[DhruvWarik-ef]

Truely, a great video !!! God Bless You Man !!!🙌🙌 Never saw such an easy explanation to Snake Game !!!

[robypsx]

Excelent tutorial, makes learning javascript a lil less tedious when you're building something you can play with

[camiloforero]

Thank you very much, I followed and completed the tuturual succesfully, now as extra features I have added a background music and sounds when you lose and when the snake eats food. Besides I used LocalStorage to save the highest score even if you reloaded. I also blocked the option to go to an opposite direction. so the snake won't die I'm so happy ! Next step is to add a new game element called trap and don't generate food inside the snake that's something that sometimes happens

[rockNbrain]

Always fun to watch snake games coding ... tks a lot!

[tirtheshpawar]

Amazing Tutorial covering lots of different concepts!

[zhendrey]

Thank you very much, I really enjoyed creating the game with you! ❤

[adityamishra]

Now! this is call explanation, Great job well done ❤

[egsablin]

Thnx for this video! +1 to my VSC skill and how professional coding looks like 😀

[bryansuarez]

One can also omit the div when creating ids (using #) and classes (using .) with the emmet abbreviations and shorten it to ".game-border-1" or "#game-border-1" for example and then press tab and that will automatically create a div with the class or id that you named.

[Dedsec-]

Thank you so much! For your generosity and hospitality.

[JugglingJuggalos]

Thank you, I look forward to playing the finished game!

[MGTRN-twuq]

This was a lovely and fun lesson. Really well explained. Thank you

[anurag_tarai]

His teaching style is awesome and simple. Love this project