How To Code The Snake Game In Javascript
HTML-код
- Опубликовано: 1 июн 2020
- 🚨 IMPORTANT:
Land A Job With Remote.work: remote.work/?Web%2...
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/WebDevSimplified/J...
🧠 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.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#SnakeGame #WDS #JavaScript
![MAF Teeski - Whole Thing (feat. VonOff1700) [Official Music Video]](http://i.ytimg.com/vi/SHWEj-ndz6g/mqdefault.jpg)
![Finesse2Tymes - Pretty Ricky [Official Music Video]](http://i.ytimg.com/vi/xIoP_mhYRT0/mqdefault.jpg)
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.
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.
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.
This is the channel where i always Learn with joy.
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!
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.
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.
before I watch the video I want to tell you how much I appreciate what you do on RUclips .. really impressive
Dude you’re like a mind reader or something thank you this is just what I needed
Glad I could help
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.
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
Thanks Kyle, your tutorials are really great. Appreciated man. Learned a lot today.
Thanks for this Kyle! You're videos are always top notch, keep it up :)
You code so well. I'm so impressed.
wow excellent and fluent explaination without redundants , this is so impressive
in this video, i learned about how
- RequestAnimationFrame works
- js module(import and export)
thx kyle..
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.
Brother, you deserve a medal for this video-tutorial. Everything was well explained, smooth, clear, and connected. Great job!
Amazing!!!!!! Very helpful tutorial...you are such a hardworking guy. :)
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 🔥👍
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 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
Your voice has become so deep! I thought you said hello darkness my friend at first!😂
Thank you, I am just learning and even though I was only able to copy the code it this was sooo helpful!
Hey man what an awesome video!
Thank you so mutch from Italy ;)
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 !!
Wow, this tutorial is awesome! Thank you so much
you're doing an incredible job! thank you :)
The video was great! I liked it. Thanks so much.
Amazing! Pretty well explained, it has been really useful. This is why I love this channel, thanks for sharing.
Mind Blown. Thanks Kyle!
Wow! 😍😍 Thanks for the tutorial! 🙏🙏
Thank you so much for sharing your knowledge!
Thank you so much. And I am waiting for your course JavaScript intermediate to master and beyond.
Nice, I love your videos! Subbed
Absolutely wonderful, Thank you
Great work, as with all your presentations. Thank you very much.
Awesome video. Snake Game in JavaScript without frameworks or libraries. Very useful!
Great tutorial mate!
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
Fallen in love with you after seeing your approach and code 👏👏
you explain things so well thank you so much
Great functionality thanks man 🤙
thank you brother for this great tutorial
Amazing tutorial👍!!
kyle thank you for all the help you the best
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.
you're INCREDIBLE!
Amazing. I still fear from canvas but I can follow this tutorial without canvas. Thanks a lot
your explanation is really awesome
It's wonderful !! Thanks so much!!!!!!
for me is the best channel for learn web development. Thanks
We want more of them Kyle please fasst!
This is what I needed
Thank you so much!
Thats the video I have looked for hours
Great job keep the hard work
Thank you kyle, love from India
Awesome, I love this
good lesson! thanks a lot!
a lot of thanks for the video
Thank you great work :)
Thank you I learned a lot from you
Awesome tutorial! =)
Awesome!!! I love your every video.
Thank you so much!
Muchas muchas gracias!!! awesome video
thanks i have made my first game ever yay, your really awsome
its complicated but easy to do thanks kyle
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) :)
This was awesome
awesome keep the good work on
Great bro....great
this is awesome!!! we need a spanish version of this chanel
You're AWESOME!!!
You actually make web simplified for us. Add reply here. Great work Kyle.
Thumbs up from Pakistan.
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.
thanks! i used to code to make my first javascript game!
Can't believe that I actually managed to create this!
JUST At last!! Thx
grand merci, t'es super fort
thanku sooooooooooooooooo much!!!!😊😊😊😊😊👌👌👌👌👌
This is awesome
Amazingly Amazing
"
''
Wonderful, thank you for the tutorial. newSubscriber ++
I had to add " window.location = '/index.html' " for it to restart. Great tutorial!
a simpler version of that would be window.location.reload()
Thank you so much 💓
You're welcome
Wow rwally loved this one..please make more videos related to vanilla js...and a video about workflow of creating big website like E-commerce website.(using MERN stack)
It's just awesome.
Love you bro. Would you make any video about front end development
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!
thanks bro that direction bug was the only problem i could not solve
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: ruclips.net/video/wD4mR7f2YIk/видео.html
@@lucas_lb_cube nice addition! I fixed it via google, I'm sure this video will help someone!
nice video, tks u somuch
Super cool
Thank you very much. Can you share what camera, microphone you use ?
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.
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
Hello, Thank you for your videos i always love them, just one request please increase the size of the text. It's really difficult to see.