How To Code The Snake Game In Javascript
Vložit
- čas přidán 12. 09. 2024
- 🚨 IMPORTANT:
Land A Job With Remote.work: remote.work/?u...
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: github.com/Web...
🧠 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: blog.webdevsim...
My Courses: courses.webdev...
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#SnakeGame #WDS #JavaScript
This is exactly what I am expecting ~ a snake game with pure html, css, javascript instead of using canvas API. Kyle is trully a vanilla html, css, js master !!!
Hey Kyle, before I watch the video (and after I've liked it) I just wanna tell you HOW GRATEFUL I am to you for all your awesome videos. Your teaching pace suits my learning style to the T, you are concise yet amazingly clear and easy to follow, you do not waste time in useless banter but you are also not at all boring as your love for what you do shows, and you come across as a pleasant (looks wise too!), polite and genuinely nice guy. I started learning front end last month on a whim and was enjoying it a lot, but you have made this journey even better. In fact, I am so hooked to your videos, that while my friends watch Netflix, I learn and simultaneously entertain myself watching you, lol! Though I'm not in a position to buy any of your courses, I make sure to play through all the ads in your videos, hoping to express some of my gratitude that way. You are my favorite person on the net and I hope your channel grows infinitely. God bless you!
Thank you so much! You are far too kind to me. I am really glad you enjoy my teaching style.
Well said
I am deeply touched, your words make me cry ...
is this your school project?
This person hit the nail on the head so to speak. I've been really enjoying his videos and I'll probably be checking out his courses soon.
Hey Kyle! Nice video :)
I happened to develop snake myself a week ago and I think the movement of the snake is much easier when you:
- delete the last body part (except for when the snake ate some food)
- add a new body part in the direction your snake is heading to
This way you can simply ignore everything in between.
That is a really smart way to think about the problem!
yeah you are so right, this approach is what everybody use, get rid of tail, add new part in same direction, we don't need to consider body !!!
This is what I also did!
yes just keep track of the x,y of the head, then body.push(head), while(body.length>snake_length)body.shift()
as the old saying goes KISS - keep it simple stupid!
Even though I copied your code exactly, as a beginner, it's extremely satisfying getting this right. Thanks for being the teacher of my first coding project.
This is the channel where i always Learn with joy.
1:30 Wow....its really amazing
Thanks!
Welcome bro :)
I have been watching your videos since March 2020 & i think I gained some knowledge about html,css,js to come into the web development.
This two channels are just awesome
Keep growing keep teaching us
Thanks for all your suggestions that helps us alot.
Html,css - online tutorials
JS - web dev simplified
sure i agree
@Dev Ed ko kaise bhul sakte hai 🔥👍
in this video, i learned about how
- RequestAnimationFrame works
- js module(import and export)
thx kyle..
I love that every of his projects teach something new. This time I've learned:
RequestAnimationFrame
How grid can work in a video game
How to have a cleaner structure with export & import
Now go and learn OOP / Classes and make it a better structure. It's a great starting point for new developers.
JavaScript technically doesn't need semicolons , whole code has no semicolons
I do this too when I've been working with python then go back to JS
Another great video Kyle. I already did Snake with Canvas, but I learned so many new things in this tutorial. Like how to organize functions for each different part of the game in their own files.
Had been looking for a beginner friendly gaming tutorial. This is an excellent tutorial for getting started with game development. So much to learn, explained in extremely simple terms while polishing js skills.
Dude you’re like a mind reader or something thank you this is just what I needed
Glad I could help
I m totally enjoying your lessons . Thank you for this wonderful series of knowledge 😊
Excellent! clean code and a nice explanation. You are doing great work with your videos, thank you so much for that Kyle.
So good video, thanks for it! Just one thing for people 45:30 the current location make like this:
window.location = './'
Kyle doesn't have the dot before slash here.
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
was literally on the verge of giving up until i came across this video, agiain thank you
before I watch the video I want to tell you how much I appreciate what you do on CZcams .. really impressive
Hey Kyle, since your milliseconds of time between frames is so low, do you have a 144hz monitor?
I do have a 144hz monitor. I just got it a few weeks ago
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.
45:27 ...or just window.location.reload()
Thx
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.
I've seen all this implemented on a designated website, and the code can be accessed via the browser's developer tools. Too bad, youtube does not allow any specific mentions of other websites...
The author of this video may not want this information to be shared here either for obvious reasons.
@@oibender hey, how can I find that site? Can you ping the url in a private message?
Amazing!!!!!! Very helpful tutorial...you are such a hardworking guy. :)
wow excellent and fluent explaination without redundants , this is so impressive
Amazing! Pretty well explained, it has been really useful. This is why I love this channel, thanks for sharing.
21:15 in case if anyone’s confused, it should be “we’re shifting entire snake, except it’s tail up a position”. This creates 2 head coordinates at the beginning of the array, the original one and its clone that was moved up. We then modify the original head to be at a new position
I coded everything just like him, but when I run it, it shows a empty Grey screen... help?
@Jawad Khan I’ll do this again alone to see if my knowledge has improved lr not, and ill make sure to check out your comment if ive the same error! Appreciate it!!
Your voice has become so deep! I thought you said hello darkness my friend at first!😂
Brother, you deserve a medal for this video-tutorial. Everything was well explained, smooth, clear, and connected. Great job!
Hi...im from Argentina and I'm an amateur on this...really really is impressive how you teach to code. Really good, thanks for sharing your knowledge !!
You code so well. I'm so impressed.
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.
Here is a link to fix it: czcams.com/video/wD4mR7f2YIk/video.html
@@lucas_lb_cube nice addition! I fixed it via google, I'm sure this video will help someone!
I had to add " window.location = '/index.html' " for it to restart. Great tutorial!
a simpler version of that would be window.location.reload()
For me the script doesn't work as a module, since for some reason running it on localhost doesn't work for me
Hey man what an awesome video!
Thank you so mutch from Italy ;)
Thanks for this Kyle! You're videos are always top notch, keep it up :)
Thanks Kyle, your tutorials are really great. Appreciated man. Learned a lot today.
This is a great solid tutorial. I don't know if anyone already pointed it out, but when you touch the tip of the tail (last piece of the snake's body) you don't lose the game, it just goes through it. Or maybe I just messed up my code.
Fallen in love with you after seeing your approach and code 👏👏
Thank you kyle, love from India
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
Amazing video. This is first time I created a game and it was just so simple thanks to all of your explanations.I also like how to discuss each approach and fix issues on the go.I am definitely subscribing to you channel.Keep it up.
Kyle, I love how you say "whoops" all the time.. it's adorable.. if you could throw in a "whoopsie daisy" next time it would make my day (winky face emoji)... great video!
I prefer the term shucky darns.:P
@@WebDevSimplified haha.. love it!
hey Kyle, I know this is late and there's a small chance you'll see this but it didn't refresh the snake and food after we implemented the expanding part any reason you might know know of?
edit: nvm it did RIGHT after I commented...
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.
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”
you have to run it on a live server you cant just open the index.html file in your browser
@@Chris-bv2hz how can I run it on a live server?
@@ninos163 Download an extension called 'Go Live'. It let's you use a live server and go on local host. It's downloadable on VSCode. Not sure if it is available on other code editors.
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
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.
I have been a professional developer for 5 years and I find this hard. For example at work I never used game loop.
Software engineering is not about knowing the solution to all problems immediately by memorization, it’s the process of coming up with the solution by practical experience and theoretical understanding.
Even the best engineers on earth don’t have all the answers.
The best ones find the answer through perseverance.
Don’t compare yourself to highly experienced developers when you have 4 months of experience. You’re only down to a drop in the ocean, you have more than enough time to take it in.
@@syedhxssam mee too I was demotiavated then I saw this
same for me .
after a year . do u get job ?
@@syedhxssam learning to code is so extremely hard. Im still stuck on creating a rock paper scissors game for javascript and still get stuck all the time. Its been 4 months!!!!
kyle thank you for all the help you the best
you are very easy to follow i had no trouble following but i did get some errors but fixed them good job 😊👍
Nice! I've done few years ago rubik's cube with div elements for each piece faces and css transforms. It works well for desktop and mobile (with >=3 GB RAM) :)
Mind Blown. Thanks Kyle!
Nice, I love your videos! Subbed
thanku sooooooooooooooooo much!!!!😊😊😊😊😊👌👌👌👌👌
thanks bro that direction bug was the only problem i could not solve
Thank you, I am just learning and even though I was only able to copy the code it this was sooo helpful!
It may sound stupid but can anyone tell me why he is not using semicolon ; at the end of each line? 😕
I just don't like them and they aren't needed
@@WebDevSimplified ohh I totally forget that...its optional ...Thank you sir you are awesome🙏
you explain things so well thank you so much
You actually make web simplified for us. Add reply here. Great work Kyle.
Thumbs up from Pakistan.
1000 subs per day.....yo wooooo....🔥🔥
Awesome video. Snake Game in JavaScript without frameworks or libraries. Very useful!
Great tutorial mate!
this is awesome!!! we need a spanish version of this chanel
2:12 Why the snake's Tail is like that??
Major bug
your explanation is really awesome
We want more of them Kyle please fasst!
Great job keep the hard work
Solid video man! I Easy to follow though you skipped over a single part anyone should be able to figure out if they followed along
for me is the best channel for learn web development. Thanks
Awesome!!! I love your every video.
Thank you so much!
Great functionality thanks man 🤙
thank you brother for this great tutorial
14:30 - Uncaught SyntaxError: Cannot use import statement outside a module
I copied the exact same place, but it's saying something is wrong. Any ideas?
Great bro....great
I'm at 12:03 and I'm already feeling like..."why did I decide to do this?!" XD
The video was great! I liked it. Thanks so much.
Can someone tell me if the .snake and .food are supposed to load without the js part? They aren't apart of the div id like game-board and he didn't set position values to them, so I hope that explains why neither cube shows up when I run live server
its complicated but easy to do thanks kyle
Wow, this tutorial is awesome! Thank you so much
Wow! 😍😍 Thanks for the tutorial! 🙏🙏
Can't believe that I actually managed to create this!
Thats the video I have looked for hours
I really enjoy your videos and I do learn a lot with them, also the comments as we see can see you do attract intelligent and interesting people. For a long time I have been trying to create a SLOT MACHINE like the fruit machines in a casino and it is not working and I never found anything online that was made only with Vanilla JS. Do you think it would be possible to have something similar to that without the use of frameworks? If anyone have any good idea please do share with me.
Amazingly Amazing
"
''
Great work, as with all your presentations. Thank you very much.
Thank you so much for sharing your knowledge!
Awesome 👍 sir, I want more JavaScript games from you. Kindly make a full playlist of "Game Development with JavaScript".
I plan to make some more game tutorials in the future. Rock paper scissors is coming soon and I want to make tetris as well.
At 43:12 - why did you set the parameter as "{ignoreHead = false} = {}" and not as "ignoreHead = false".
Awesome tutorial! =)
This a very helpful video. Just a question:
Why weren’t classes used inside of files of snake and food? Why did we only use independent functions?
Thank you so much. And I am waiting for your course JavaScript intermediate to master and beyond.
I don't understand why you loop over all the body pieces to update them with the piece before instead of just doing a pop() to remove the tail & unshift() a new head ? Otherwise, always appreciate your videos even when i don't learn much on the subject in particular, i always end up learning something anyways.
you're doing an incredible job! thank you :)
a lot of thanks for the video
Amazing tutorial👍!!
Thank you so much!
It's wonderful !! Thanks so much!!!!!!
Amazing. I still fear from canvas but I can follow this tutorial without canvas. Thanks a lot
you're INCREDIBLE!
Hey Kyle, I have a question. If I take the projects that you made and made them myself and then uploaded them to my portfolio will it be a good thing to show off? Or should I build it myself? Also, what's the best method to get the most out of tutorials? Because I'm new to programming and don't just want to code along I want to think and build.
Thanks for your awesome content!
The best way to learn is to take what I build in this tutorial and expand on it or customize it to your needs. One way to do this would be to change it so that food spawns on a set timer instead of once picked up. That will require you to learn in depth what the code does to implement correctly.
@@WebDevSimplified Awesome thing indeed I wish I could talk to you to give me some advice because I've wasted a lot of time :( Can I DM you on Twitter?
Hey Kyle I'm a beginner and I've got a little doubt, why did you put the script source on the instead of the it would be the same just without the defer attribute????
Thank you I learned a lot from you
23:40
ffeeewwhhhhh!