Beginner JavaScript Project – Snake Game Tutorial - playproduction.de

Beginner JavaScript Project – Snake Game Tutorial

freeCodeCamp.org
Views: 38618
Like: 1683
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

💻 Deployed Game:
💻 GitHub Repo / Source Code:

Snake AI-Generated Logo:
Google Fonts:
AI font generator / Lexica:

⭐️ 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

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

57 Comments

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

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

  3. YouTube needs to add a Heart icon. Which means you super ❤ a video.

  4. I've followed up until 49:47 with no errors but when testing to view the snake and food in the browser, it's not working and I'm getting the following error: script.js:5 Uncaught ReferenceError: Cannot access 'generateFood' before initialization at script.js:5:12 any advice? Thanks.

  5. do you know if theres a way to amend the code so it can be played on a mobile? still on the webpage that is (not an app). thanks for the great tutorial 🙂

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

  7. 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

  8. 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.

  9. Can I play this game on mobile phone 📱…?

  10. Thank you so much! For your generosity and hospitality.

  11. I was literally starting to make a python Snake game last night at like 4am. How the hell do you guys always release tutorials on projects I'm working on or planning to do?

  12. I haven't taken the course yet. I tried the game and I found a bug.

    if the length of the snake is less than 3 I can just go backwards by hitting the respective key. and if the snake's length is more than 3 the snake dies when doing the same

  13. 26:51 It can be seen that the Logo has a lower margin that overlaps the text.
    26:56 this has already been fixed. How?
    I can only remove this by zooming the browser to 80%, but this is not a solution.

    Upd: the z-index helped

  14. Can we please have a CompTIA security+ course. You guys amazing. I need help. Thaanks alot

  15. i dont understand why we added the interval two times (in the gamestart function and in the if statement inside the move function)
    😢

  16. Hey can you guys please make a course on robotics I think that would be really interesting and a lot of people would be invested on that topic.

  17. can you plz make code for battle ships game on java where we can play with more than 2 friends

  18. 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

  19. what font u use in this video ?? pls answer me plssssssssssssss

  20. I love the defer I always had to put my script at the end of my html

  21. My JS file won't run outside the body element. It works fine anywhere inside the body element. Any ideas on why that happens?

  22. Thank you so much 🫡🙏👋✌️👌👍🫶🏻, liked 👍and subscribed your channel

  23. 0:19: 🐍 Learn to code a retro snake game using HTML, CSS, and JavaScript with a focus on game logic and design.
    6:51: ⌨️ The video demonstrates creating div elements and applying classes and IDs using shorthand methods in HTML.
    14:05: 🎮 The video demonstrates how to create a game board using CSS grid.
    21:43: 💻 The video is about making stylistic choices for a website and targeting specific elements for design adjustments.
    29:17: 🎮 The video is about creating a snake game using JavaScript and HTML.
    36:31: ⌨️ The video explains how to create a snake game using HTML and JavaScript, including setting the position of the snake and creating a div with a class name.
    44:39: 🎮 The video is about creating a game and coding the functionality for generating food in the game.
    52:12: 🐍 The video explains how to code directional movement for a snake game.
    59:51: ⚙️ The video discusses the process of generating and resetting food placement in a game.
    1:07:31: ⌨️ The video demonstrates how to create a key press listener event in a game using JavaScript.
    1:15:05: ⏱️ The video demonstrates debugging and fixing issues with game speed in a programming project.
    1:23:34: 🐍 The video demonstrates how to check for collision and reset the game in a snake game using JavaScript.
    1:31:39: 🎮 The video explains how to set and display high scores in a game using JavaScript.
    Summarized by TammyAIvideo

  24. Where should a beginner start to learn about machine learning & python?

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

  26. Thank you man , help a lot <<< Q how can i make it work on phone too

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

  28. 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!

Leave a Reply

Your email address will not be published.