How To Code The Snake Game In Javascript
Web Dev Simplified
Views: 296892
Like: 7729
🚨 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
01.03.2023
Woah! I has watched a video on the same topic a few weeks back but failed. Your way made me clearly understand all the steps you did, especially the module method you used made it far easier to understand. Thank you, Kyle.
Why not use Math.ceil instead of Math.floor() + 1 ?
Why on getRandomFoodPosition if I do while(newFoodPosition === null ..) I get an error, while (newFoodPosition == null) it's fine?
your voice sounds just like daliy does of intenet
Hi Kyle. My snake and food don’t show up in the browser, I don’t understand what’s wrong. I checked, everything is correct in Html file(((
thanks! i used to code to make my first javascript game!
Hello, I stopped following the vid after making it move and tried to finish it alone and I did. But somewhat different. Couldn't we just update snake's length by simply typing 'snake_body.length +1"? I mean It worked pretty damn well if u ask me.
18:26
I'm new to JS and I have a question
If we are recursively calling the main function in the first line itself how is the code below it is being executed. I'll be really grateful if anyone can answer.
18:21
Shifting the whole snake body was unnecessary tbh. Also what's causing the weird bug at 2:07
9:42 mine just says "index.html:1 Access to script at 'file:///C:/Users/[my_user]/snake/game.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https." what does this mean and how to fix it?
guys i honestly couldnt find a solid guide one projects like this utilizing classes, if there are any project exaples, could you link? what i pretty much wanted to do was to have a class for an apple with constructors and its functions, then class for the snake body block with similar structure and so on.
onagni sikay ishlamadi
ok i keep getting a black bacground
Thanks! but can you make a part 2 with AI? I've been wanting to try it.
"Exactly what we want." – Official Slogan of Web Dev Simplified
this guy is fucking genius
my brain hurts everytime i stop on his channel
i'm not stupid tho. (or am i ?)
I just want to take the time out and give you a sincere Thank You from the bottom of my heart, this is the first time i went to a youtubers GitHub, cloned the code, and did not have an errors or bugs, everytime i go to a youtubers github, the code doesnt render what they showed in the video at all this is also the first time where i felt obligated to use that tip thanks feature youtbe just added. Dude the code was flawlessly written thank you so much. L
wow excellent and fluent explaination without redundants , this is so impressive
All of these tutorials have the same problem, you take it slow and explain the HTML, but then when we get to the harder JS you just do everything so quickly, it is so hard to learn anything like that
27:38 – The piece of code is not working for me, unless I put before the switch: lastInputDirection = inputDirection;
At 41:08 why if(gameover){return alert(you loose) }will not run the remaining down partnof main function , gameover value is false for now.
I think using a setInterval would be easier than doing all that stuff in the main function
Hmmm fake tutorial one I added the render times in the JavaScript and put in in the website and inspected it it says "Access to the script and my files was blocked by CORS" that's what it's saying I guess ill maybe just learn python since people put out tutorials without giving answers to problems like this throughout the video Incase they happen
Great functionality thanks man 🤙
Hey Kyle I loved this video! But is there anyway I can add a scoreboard and Touchscreen for mobile on this?
slow down bloody hell
The snake and food aren't appearing, even with the html/css copied exactly from the github…
it didn't work.
Where do .snake and .food get from?
there is no div of snake and food in body..
🤣
Wonderful, thank you for the tutorial. newSubscriber ++
Idk why, but neither your nor Bro Code's code seems to be working for me. The snake and food aren't appearing whatsoever.
Sorry but I had to do this
@44:01
how do I open the game, when I open my index file it is all white?
how do i get to that app? idk what it even is
thanks bro that direction bug was the only problem i could not solve
Wow stay blessed
Hey Kyle!
I don't understand why we are checking if x and y aren't equal to 0, when we are trying to move the snake in reaction to the up, down, left, right arrow keys being pressed.
Can you please explain?
Thank you man, you explain things so thoroughly
its to fast for me , sorry
Hey , thanks in advance where did you get that very first currentTime , shoildnt throw an error of undefined
I cant able to refresh my page when restarting the game, window.location= '/' doesn't work ,goes to some directory(local).
Can anyone explain to me the function that checks when the snake hits itself?
Thank you so much!
Hi, Kyle! I have a question regarding the update function. You`re starting with 2 elements of the snake body, instead of 3. The 3rd element only appears after the snake moves. In my opinion, the snake`s head should be the last element in the array, not the first one. This is the reason why the function only shows 2 elements at the beginning, because the head overrides the other 2 elements in order to move to the right.
how do you make it run when live server option not aavailable
Brother, you deserve a medal for this video-tutorial. Everything was well explained, smooth, clear, and connected. Great job!
Something wrong happened to me at 18 min, I didnt get one blue static snake in the middle. I just got a snake that starts from left to right and adds a snake constantly till its on the right side… spent 30 min trying to find anything different in my code, but it looks the same as yours..