How To Code The Snake Game In Javascript - playproduction.de

How To Code The Snake Game In Javascript

Web Dev Simplified
Views: 183348
Like: 5295
🚨 IMPORTANT:

Land A Job With Remote.work:

In this video I show you how to build the classic snake game using pure JavaScript. That means we will use no libraries or frameworks at all. We won’t even need to use canvas in this tutorial since CSS grid makes working with snake incredibly easy.

📚 Materials/References:

GitHub Code:

🧠 Concepts Covered:

– How to create a game loop
– How to position elements in a CSS grid
– Best practices for game development
– Best practices for breaking up large files

🌎 Find Me Here:

My Blog:
My Courses:
Patreon:
Twitter:
Discord:
GitHub:
CodePen:

#SnakeGame #WDS #JavaScript

381 Comments

  1. I am very confused at how this part of the code works can someone explain it to to me?
    He is checking if secondsSinceLastRender is less than 1 / MOVE_SPEED and if it is it's just returning from the function and the rest of the code doesn't execute. secondsSinceLatRender is around 0.006 when he logged it into the console and that is always less than 0.5 and the code will never execute.

  2. Why didn't you need to bundle your js modules? And why do other people bundle their modules? Could you please explain?

  3. when your code is exactly the same but it isnt working

  4. when i added the the key inputs i added a console log to check if it has working and the console log worked but the snake didn't move.

  5. When i tried to run the animation frame thing, I got an error in the console saying “Access to the script at (the game.js location) from origin ‘null’ has been blocked by CORS policy”

  6. im not being able to go to the right and left … i think that the buttons are alright bcs when i click left or right the snake stops. has something is bloking it

  7. hello,thank you for this tutorial, it's very helpfull.
    i have a question ,how can i do to put more foods on the game board and start eating one by one?

  8. what's mean ? { ignoreHead = false } = {}

  9. When I've tried this out, I keep getting 2 errors: 1- Uncaught TypeError: Cannot set property 'innerHTML' of null. 2-snakeElement also has a value of null. Any kind sages have advice for me?

  10. @27:55 – can't understand logic of preventing moving down if snake is already moving up?
    How cordinates work on screen?
    Is it correct?
    Bottom left corner – x:0 & y:last number (+number)

    Moving up = -1
    Moving down = +1
    Moving right = +1
    Moving left = -1

  11. if anyone is running into the CORS error.
    (In VS code) type: npm install –global http-server
    once it's installed, type: http-server
    then you can navigate to your specific page.

  12. I'm coding newbie and wanna learn javascript more so I came to this video.
    I couldn't figure out how changing the SNAKE_SPEED solely can change the render time (at around 15 min into this video) Hope sb can tell me why big thanks

  13. Thanks man for this. There are some questions in my mind–
    1. How to implement level system?
    2. How to add obstacles?
    3. How to add scores?
    4. How to add play game screen?

    Please add more features in your game. We will have clear understanding over this.

  14. this is awesome!!! we need a spanish version of this chanel

  15. How can I play it? If I want to open it I see only the Grey game board

  16. you are very easy to follow i had no trouble following but i did get some errors but fixed them good job 😊👍

  17. I really dont believe that every front web developer can build a project like this. How can u know what functions to use, without checking other people codes. Im learning js for 4 momths now and im still a beginner and not even close to build a game like this by my own. I understand the logics a bit after he explaims, but building something like this from 0…. And i tought doing leetcode easy questions is hard.

  18. why does my console didn't showed up some numbers plss helpp

  19. why we didn't use an event listener and write all our code inside it, instead of a game loop?
    what's the diff between them, pros & cons?

  20. Can anyone explain the for loop? why is there an i– ??

  21. Anyone know why my screen is 50/50 black and white but when I use a different editor it works perfectly?

  22. Awesome video! Great practice for people learning javascript but wanting to branch into things that aren't normally touched on in front end website type courses.

  23. i did the the same thing in the video but the snake isn't appearing

  24. Hi, I've just completed your tutorial and it works fine.
    Thank you very much for the time you take to explain each function in a very instructive way + you made it very easy to follow/enjoyable

  25. i tried your tutorial, then downloaded the code but it won't play it keeps telling me there is an issue with the CORS request, i'm kinda lost…

  26. Thank you, I am just learning and even though I was only able to copy the code it this was sooo helpful!

  27. This really helped me learn how to organize functions

  28. Fallen in love with you after seeing your approach and code 👏👏

  29. Would this be considered beginner-level JavaScript in the commercial programming arena?

    And by "this" I mean, being able to create a project like this from scratch and be this fluent in all of the functions?

    I'm hoping to transition into tech/coding as my full-time job over the next year or so and am just wondering what kind of a level I'd need to be at to be hire-able as a WebDev/JavaScript programmer.

  30. this dont work anymore can you please update it the video or atleast the github code would really appreciate it buddy

  31. At 43:12 – why did you set the parameter as "{ignoreHead = false} = {}" and not as "ignoreHead = false".

Leave a Reply

Your email address will not be published.