How To Code The Snake Game In Javascript

[@maskman4821]

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 !!!

[@nsharma4981]

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!

[@WebDevSimplified]

Thank you so much! You are far too kind to me. I am really glad you enjoy my teaching style.

[@techtipsuk]

Well said

[@maskman4821]

I am deeply touched, your words make me cry ...

[@Faxtixe]

is this your school project?

[@kyle6754]

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.

[@fionat.6411]

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.

[@WebDevSimplified]

That is a really smart way to think about the problem!

[@maskman4821]

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 !!!

[@whoman7930]

This is what I also did!

[@DannyHille]

yes just keep track of the x,y of the head, then body.push(head), while(body.length>snake_length)body.shift()

[@jaykay7932]

as the old saying goes KISS - keep it simple stupid!

[@mrahamed5985]

This is the channel where i always Learn with joy.

[@Al_Gonzo]

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

[@harag9]

Now go and learn OOP / Classes and make it a better structure. It's a great starting point for new developers.

[@tyrrelldavis9919]

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

[@OnlineTutorialsYT]

1:30 Wow....its really amazing

[@WebDevSimplified]

Thanks!

[@OnlineTutorialsYT]

Welcome bro :)

[@dnynu]

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

[@LabaranLabs]

sure i agree

[@dnynu]

@Dev Ed ko kaise bhul sakte hai 🔥👍

[@hasanal-haddad8016]

in this video, i learned about how - RequestAnimationFrame works - js module(import and export) thx kyle..

[@wealthyvisions2081]

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

[@wealthyvisions2081]

was literally on the verge of giving up until i came across this video, agiain thank you

[@madeyeatreides4055]

Dude you’re like a mind reader or something thank you this is just what I needed

[@WebDevSimplified]

Glad I could help

[@ankitsaiyan6151]

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.

[@oibender]

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...

[@oibender]

The author of this video may not want this information to be shared here either for obvious reasons.

[@GA-vb1yj]

@@oibender hey, how can I find that site? Can you ping the url in a private message?

[@sharmashivanand]

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.

[@kikevanegazz325]

Brother, you deserve a medal for this video-tutorial. Everything was well explained, smooth, clear, and connected. Great job!

[@goldfinch5522]

before I watch the video I want to tell you how much I appreciate what you do on KZbin .. really impressive

[@tj_yt_]

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

[@pedroalmeida8453]

I coded everything just like him, but when I run it, it shows a empty Grey screen... help?

[@pedroalmeida8453]

@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!!

[@Maxtasy888]

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.

[@medhashree2416]

I m totally enjoying your lessons . Thank you for this wonderful series of knowledge 😊

[@AgressivePigeon]

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.

[@bernardozelaya2685]

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 !!

[@VojtaHraje]

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.

[@clairecontemporary]

wow excellent and fluent explaination without redundants , this is so impressive

[@asimkoirala8074]

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.

[@VuongTran-pm4dg]

I had to add " window.location = '/index.html' " for it to restart. Great tutorial!

[@deadaccount6327]

a simpler version of that would be window.location.reload()

[@mbouweeric2512]

Excellent! clean code and a nice explanation. You are doing great work with your videos, thank you so much for that Kyle.

[@aqibsaeed3229]

You actually make web simplified for us. Add reply here. Great work Kyle. Thumbs up from Pakistan.

[@___Kevin]

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

[@rishabhjain9349]

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

[@yoanbello6891]

for me is the best channel for learn web development. Thanks

[@caseymccray3861]

You code so well. I'm so impressed.

[@jlambert12013]

"Exactly what we want." - Official Slogan of Web Dev Simplified

[@kevklash]

Amazing! Pretty well explained, it has been really useful. This is why I love this channel, thanks for sharing.

[@Victor_Marius]

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) :)

[@aidanbenbow6682]

Can't believe that I actually managed to create this!

[@shreymehrotra5408]

Amazing!!!!!! Very helpful tutorial...you are such a hardworking guy. :)

[@Aniket5224]

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.

[@colbyryan6884]

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.

[@superJerrySong]

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

[@DannyFJhonstonB]

Awesome video. Snake Game in JavaScript without frameworks or libraries. Very useful!

[@RameenFallschirmjager]

Your voice has become so deep! I thought you said hello darkness my friend at first!😂

[@devgarg7469]

Thank you kyle, love from India

[@shobhitpreetamsahoo4267]

Thanks Kyle, your tutorials are really great. Appreciated man. Learned a lot today.

[@avi12]

45:27 ...or just window.location.reload()

[@_.sunnyraj._]

Thx

[@silentscopez1364]

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

[@jospichal1872]

Hey man what an awesome video! Thank you so mutch from Italy ;)

[@asherintech]

Thanks for this Kyle! You're videos are always top notch, keep it up :)

[@MewVSMewtwo89]

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.

[@lucas_lb_cube]

Here is a link to fix it: kzbin.info/www/bejne/rXWXnoVtm5eMf80

[@MewVSMewtwo89]

@@lucas_lb_cube nice addition! I fixed it via google, I'm sure this video will help someone!

[@casenetso245]

its complicated but easy to do thanks kyle

[@nullitx2775]

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”

[@Chris-bv2hz]

you have to run it on a live server you cant just open the index.html file in your browser

[@ninos163]

@@Chris-bv2hz how can I run it on a live server?

[@tsimlaj]

@@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.

[@vijaykumarvijay7309]

your explanation is really awesome

[@reelstrendingsongs]

1000 subs per day.....yo wooooo....🔥🔥

[@whoman7930]

We want more of them Kyle please fasst!

[@patrickc.6183]

Hey Kyle, since your milliseconds of time between frames is so low, do you have a 144hz monitor?

[@WebDevSimplified]

I do have a 144hz monitor. I just got it a few weeks ago

[@enochlin2567]

Mind Blown. Thanks Kyle!

[@GiovanniCardamone]

better approch to move is pop the last element, calculate next position based on the head, and than push it

[@alissonarboleda9493]

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

[@quak9144]

thanks bro that direction bug was the only problem i could not solve

[@KratosVS]

kyle thank you for all the help you the best

[@swayamprajapat6154]

23:40 ffeeewwhhhhh!

[@GManTheMarioGuy]

thanks! i used to code to make my first javascript game!

[@omar-1-28]

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

[@frankfernandezavila]

Great tutorial mate!

[@zshyman]

If you get an error, even though you're doing exactly what he is, try serving the html on a local node.js live-server and make sure to turn the caching off.

[@esse_apfel6448]

Thats the video I have looked for hours

[@MaxProgramming]

Amazing. I still fear from canvas but I can follow this tutorial without canvas. Thanks a lot

[@anthonywoodworth3251]

Great functionality thanks man 🤙

[@meganallred1915]

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!

[@WebDevSimplified]

I prefer the term shucky darns.:P

[@meganallred1915]

@@WebDevSimplified haha.. love it!

[@shaggiel3099]

The thing is, I’ve been looking for this for a while, but everything I’ve found has always taken 3 hours to learn how to make the snake object, not including food. Thanks!

[@WebDevSimplified]

Glad I could help!

[@yadneshkhode3091]

Thank you so much. And I am waiting for your course JavaScript intermediate to master and beyond.

[@glitchti9948]

thanks i have made my first game ever yay, your really awsome

[@sureshthakur1305]

Awesome 👍 sir, I want more JavaScript games from you. Kindly make a full playlist of "Game Development with JavaScript".

[@WebDevSimplified]

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.

[@vikramjeetsingh1766]

thank you brother for this great tutorial

[@liampugh4705]

New to development so thank god for half speed playback :D

[@tristanlanner8086]

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.

[@hyprisking]

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...

[@ibeeliot]

at 9:34 when you invoke main for the first time with requestAnimationFrame(main), where is the currentTime dependency coming from on the main function when you have it as an argument...main(currentTime ) {...console.log(currentTime}

[@ThinkSoumya]

Amazingly Amazing " ''

[@mysiph]

you explain things so well thank you so much

[@connorbailey308]

if you drop the food at a position that is random, and the random position is generated by checking whether the position chosen at random is on the snake, then once the snake is very very large (taking up 95% of the board for example) that loop could potentially run a large number of times. Wouldnt it be more efficient to grab all the open positions and grab a random one from that selection? Or maybe at the start, when the snake is small (maybe < 50% of the board) you can randomly assign a position without checking the board first, then, once the snake is longer ( > 50% of the board) you read the board and select the random position from the available spots?

[@WebDevSimplified]

That would be more efficient for sure. I just didn't want to write all the code to so that and I knew that in 95% of cases this code would be fine since most people lose before the snake gets that big

[@connorbailey308]

@@WebDevSimplified That makes sense!

[@bedrockcoder5169]

Nice, I love your videos! Subbed

[@deepakarya5310]

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)

[@LabaranLabs]

Great job keep the hard work

[@pleasurface]

Wow, this tutorial is awesome! Thank you so much

[@prashoonbhattacharjee8211]

Amazing tutorial👍!!

[@priyankashahasane7758]

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.

[@mounir101]

The video was great! I liked it. Thanks so much.

[@luise6124]

Thank you so much for sharing your knowledge!

[@inderjitsaini9303]

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?

[@kengthe5949]

you're doing an incredible job! thank you :)

[@DiabloVal]

2:12 Why the snake's Tail is like that??

[@_.sunnyraj._]

Major bug

[@bitashahsavan7993]

That was so cool and take 5 hour for coding and understanding

[@deansprivatearchive]

If I'm not just plain annoying, actual Snake has an extra tick where the snake doesn't move if you're about to lose. How would we code THAT?

[@rajeshbudhathoki7888]

Wow! 😍😍 Thanks for the tutorial! 🙏🙏

[@trylle04]

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?

[@santoss2428]

Yes sir ,👍 my Young brother is awesome 😎

[@saar120]

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

[@sarifulislampatowari.2584]

Love you bro. Would you make any video about front end development

[@kochgamers]

you're INCREDIBLE!

[@nerdsportal7252]

amazing video. can you tell me what software you use to record your screen and webcam at the same time

[@milanradinovic6770]

Awesome!!! I love your every video.

[@WebDevSimplified]

Thank you so much!

[@Weibenfalk]

Awesome tutorial! =)

[@maximilianoamodei7827]

Great video! Two functionalities I could not understand: 1) how does the object functionality with the 3 dots work {...array[i] } ? Do you have any useful resource about it? 2) how does puting {ignorehead = false}={} work?, I cannot get in which situations is useful to use this, any examples?

[@soyaiburrahman3806]

me too