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
17.12.2021
The calculations are so confusing.
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.
Why didn't you need to bundle your js modules? And why do other people bundle their modules? Could you please explain?
when your code is exactly the same but it isnt working
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.
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”
I can't get the snake moving! T-T
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
haha funny dislikes
GridRowStart gred roustad get roasted
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?
what's mean ? { ignoreHead = false } = {}
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?
@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
Awesome.
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.
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
why set border size equals to 0.25 vmin? @6:52
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.
this is awesome!!! we need a spanish version of this chanel
12:15
Next video please.
How can I play it? If I want to open it I see only the Grey game board
you are very easy to follow i had no trouble following but i did get some errors but fixed them good job 😊👍
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.
Super cool
No score keeping?
$$$$$$$$$$$$$$$$
zur
$$$$$$$$$$$$$$$$
why does my console didn't showed up some numbers plss helpp
Cool
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?
JavaScript Game ⤵️
Can anyone explain the for loop? why is there an i– ??
Amazingly Amazing
"
''
Anyone know why my screen is 50/50 black and white but when I use a different editor it works perfectly?
Waiting on one of these done in React
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.
i did the the same thing in the video but the snake isn't appearing
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
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…
18:37 is where I left off
Thank you, I am just learning and even though I was only able to copy the code it this was sooo helpful!
My friend you suck as an instructor
This really helped me learn how to organize functions
Fallen in love with you after seeing your approach and code 👏👏
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.
this dont work anymore can you please update it the video or atleast the github code would really appreciate it buddy
grand merci, t'es super fort
23:40
ffeeewwhhhhh!
At 43:12 – why did you set the parameter as "{ignoreHead = false} = {}" and not as "ignoreHead = false".