Beginner JavaScript Project - Snake Game Tutorial

[@howtobecomeadeveloper]

It's an honor to be shared on this channel, hope you have fun coding it! 🙏

[@zamsosam]

It was awesome bro

[@samimustafa7284]

Youu did it brotherrr❤️❤️ yesss big fannn of youuu

[@burjeduro]

Thanks for sharing the knowledge you're sharing with us 👍

[@howtobecomeadeveloper]

@@burjeduro My great pleasure!

[@Bobbizymusic]

Please what is the software you used for writing the code and how do I get it thanks

[@IBIS-3D]

things like this keep me fighting depression and getting up in the morning. I've been out of work for six months and the holiday season is a horrible time but these things keep me going. Thank you

[@Alexander_D_Shaffer]

May employment find you swiftly my friend.

[@juandager5220]

Keep fighting. Demand for tech jobs is always high. If you continue studying and making stuff, it's a matter of when... You'll get a tech job. We've all been there!

[@QuantumCanvas07]

Keep pushing the repos and we can do it dude. This is one of those only field where the dev community has always been supportive and helpful for newcomers. Keep building stuff!

[@NAkt-vz4hq]

Just completed it in about 4 hours. Works like a charm! Thank you for the consistent awesome uploads:)

[@DmitriyKochkarev]

Thanks for the great video! The only two things I think should be fixed in the game logic before starting playing with tweaks for it: 1. Reverse snake movement should be blocked. Now if snake length is 1 and you press arrow key opposite to the current movement direction the snake would go in that opposite direction and the snake is > 1 - it would reset the game which is obvious but would make players mad :) 2. Food generation should be adjusted so food would not generates inside the snake, for now it happens sometime. Probably would use the same logic as in the collision detection function. Thank you!

[@harshitpant07]

else { switch (e.key) { case 'ArrowUp': case 'W': case 'w': if (direction !== 'down') { direction = 'up'; } break; case 'ArrowDown': case 'S': case 's': if (direction !== 'up') { direction = 'down'; } break; case 'ArrowLeft': case 'A': case 'a': if (direction !== 'right') { direction = 'left'; } break; case 'ArrowRight': case 'D': case 'd': if (direction !== 'left') { direction = 'right'; } break; } } }

[@juandager5220]

@@harshitpant07 Did you push this on GitHub?

[@mohdusaid3956]

@@harshitpant07 In this case, it would not allow you to move in the other direction even if your snake is still just a head.

[@vladyslavmiliev5688]

@@mohdusaid3956 well, that's the point, as far as I'm aware, snakes can't make sharp 180-degree turns instantaneously IRL, they need to curve their bodies gradually

[@bitcoinbunker]

Absolutely love this, thanks for taking the time to create and share it.

[@camiloforero4996]

Thank you very much, I followed and completed the tuturual succesfully, now as extra features I have added a background music and sounds when you lose and when the snake eats food. Besides I used LocalStorage to save the highest score even if you reloaded. I also blocked the option to go to an opposite direction. so the snake won't die I'm so happy ! Next step is to add a new game element called trap and don't generate food inside the snake that's something that sometimes happens

[@reptilianis577]

One of the most valuable channels which I subscribe, thank you for your work ;)

[@robypsx]

Excelent tutorial, makes learning javascript a lil less tedious when you're building something you can play with

[@DhruvWarik-e8f]

Truely, a great video !!! God Bless You Man !!!🙌🙌 Never saw such an easy explanation to Snake Game !!!

[@MGTRN-tw5uq]

This was a lovely and fun lesson. Really well explained. Thank you

[@anurag_tarai]

His teaching style is awesome and simple. Love this project

[@tirtheshpawar4257]

Amazing Tutorial covering lots of different concepts!

[@rockNbrain]

Always fun to watch snake games coding ... tks a lot!

[@adityamishra247]

Now! this is call explanation , Great job well done ❤

[@justrandom072]

50:13 this is for my record where i left and to continue tomorrow (btw great work man thank you)

[@zhendrey6730]

Thank you very much, I really enjoyed creating the game with you! ❤

[@St.Stepasha]

26:51 It can be seen that the Logo has a lower margin that overlaps the text. 26:56 this has already been fixed. How? I can only remove this by zooming the browser to 80%, but this is not a solution. Upd: the z-index helped

[@HariniNeon]

Set top:65% in css #instruction-text

[@BrynnZeeGreat]

thanks for asking this question! i was confused too.

[@juandager5220]

Amazing content! It really helps understand how elements interact. Great introduction to JS before going to React.

[@egsablin]

Thnx for this video! +1 to my VSC skill and how professional coding looks like 😀

[@AbdussalamPopoola]

I know right! Enjoyed this one

[@JugglingJuggalos]

Thank you, I look forward to playing the finished game!

[@Dedsec-22]

Thank you so much! For your generosity and hospitality.

[@Khanasad_]

why hospitality bro ?

[@Dedsec-22]

this channel is like a virtual home encouraging IT enthusiast to come in and be fed skillfully. It's an undeserved honor that they make all these provisions accessible to people like us@@Khanasad_

[@vidhanshuborade5977]

Enjoyed creating it, Thank you!

[@gameon99999]

Well explained each and every line of JavaScript code. Thanks man 👍

[@fouadcotex]

great tuto, u can follow along from the begining to the end and erything is just ok.

[@bryansuarez2396]

One can also omit the div when creating ids (using #) and classes (using .) with the emmet abbreviations and shorten it to ".game-border-1" or "#game-border-1" for example and then press tab and that will automatically create a div with the class or id that you named.

[@brunomoura7719]

Nice one! ❤❤ Thanks for keep excellent material. 🙏🏻

[@casentbonavecmaman2078]

thank you so much for this great tutorial, i am following all the instructions but i don't get why my scoores are on the left instead of the top of the game board...

[@NicholasScarbrough-z4s]

I love the defer I always had to put my script at the end of my html

[@vivekkelodiya1]

I think there is a bug in the game, when it is going in the direction let's say right and if we press the ArrowLeft button it starts to go in the left (opposite of what it was going to) direction, and if it has a length of more than 2 blocks it eats itself as the head is at the same position as one of its lengths position.🙏🙏🙏🙏

[@atlantic_love]

That would not be a bug, but a game design error, and an error in your thinking of what 'snake' is about. No snake in real life would be able to eat its own head or neck. It would have to coil around to eat its own body. As far as the game goes, it needs to reflect that. Whatever direction you're going you shouldn't be allowed to go in the exact opposite direction. So instead of incrementing or decrementing the x,y coordinates I'd just keep them the same everytime the opposite direction arrow key is pressed. And I'd store the direction as a 'opposite direction' as a state so that anytime that key is pressed nothing is happening.

[@vivekkelodiya1]

@@atlantic_love abbey chal

[@atlantic_love]

@@vivekkelodiya1 What are you talking about?

[@likandokayombo]

Powerful content right there👏

[@gembojones8243]

I've followed up until 49:47 with no errors but when testing to view the snake and food in the browser, it's not working and I'm getting the following error: script.js:5 Uncaught ReferenceError: Cannot access 'generateFood' before initialization at script.js:5:12 any advice? Thanks.

[@beebo33]

Is your program defining const gridSize after defining food? Food is defined by the drawFood function, which uses setPosition which uses gridSize

[@gembojones8243]

@@beebo33 the difference I had was using arrow functions rather than regular functions. Changing them all to regular functions has fixed the issue although I'm not really sure why. It worked fine when I created the snake head

[@D3ll316]

Thanks for making this video.

[@leolowe22]

@howtobecomeadeveloper we could have chosen to only change the gridRow and gridColumn of the food and the snake when hiiting the food , but here in the video the board has been redraw again everytime. Thought on why the decision?

[@afaqahmad-ef4ky]

Quality content ❤

[@eliyastadsees]

beautiful

[@Ibrahim_webdeveloper]

Amazing 🤩 ❤❤

[@Bobbizymusic]

Please what is the software you used for writing the code and how do I get it thanks

[@glungusgongus]

Someone needs to answer what software is he using

[@digigoliath]

Watch the video?

[@martinhogan9745]

He is using VS Code. He mentions it once very quickly at the beginning of the video.

[@abulhasan923]

Please make a Bootcamp video for Google Cloud, I want to start GCP but I couldn't find any roadmap or resources on where to start.

[@Satoshi_Nakamoto_1]

What i give for his lectures❤❤❤

[@saurabhkunwar806]

i tried initializing the variable "let food = generateFood();" at the top, and my function definition is after this initialization, so it gives me the uncaught error "cannot access generateFood() before initialization. Note: Im using arrow function. But here in the video it didnt, can somebody explain?

[@hardi7539]

Fun project!

[@atlantic_love]

It's just never a good idea to reference components (ie, fonts) of a website via URl. If that source link ever breaks, your game is broken. Download what you need, put it all in the project folder.

[@CoolestPossibleName]

I haven't taken the course yet. I tried the game and I found a bug. if the length of the snake is less than 3 I can just go backwards by hitting the respective key. and if the snake's length is more than 3 the snake dies when doing the same

[@pavanMudavath822]

haa

[@harshitpant07]

else { switch (e.key) { case 'ArrowUp': case 'W': case 'w': if (direction !== 'down') { direction = 'up'; } break; case 'ArrowDown': case 'S': case 's': if (direction !== 'up') { direction = 'down'; } break; case 'ArrowLeft': case 'A': case 'a': if (direction !== 'right') { direction = 'left'; } break; case 'ArrowRight': case 'D': case 'd': if (direction !== 'left') { direction = 'right'; } break; } } }

[@CoolestPossibleName]

@@harshitpant07 that's neat

[@ambole]

Lee Makwiny - ujinga umekushinda

[@jafri3]

Can we please have a CompTIA security+ course. You guys amazing. I need help. Thaanks alot

[@JugglingJuggalos]

Not sure if it has been done, but A+ too if it hasn't been done yet.

[@xtremelinux]

KZbin needs to add a Heart icon. Which means you super ❤ a video.

[@Android-17]

Awesome 🔥

[@enriqueviveros72]

Good explanations

[@chaks2432]

I was literally starting to make a python Snake game last night at like 4am. How the hell do you guys always release tutorials on projects I'm working on or planning to do?

[@briabytes]

they're in the walls

[@IamSamirGabr]

i dont understand why we added the interval two times (in the gamestart function and in the if statement inside the move function) 😢

[@mohdusaid3956]

in the gameStart function it is initially added to start the game and in the move function after checking that the food is eaten we clear the previous interval to avoid possible bugs so we assign it again in the next line to start moving the snake again.

[@TheFranszo]

Sweet! Coild have use a class

[@StrangerDanger352]

Which extension is that show which code block we are in anyone??

[@atlantic_love]

???

[@StrangerDanger352]

@@atlantic_love the name of the extension that shows which code of block you are typing ?

[@atlantic_love]

@@StrangerDanger352 Is English not your first language? That or you're intentionally creating very loaded comments to try and solicit responses.

[@StrangerDanger352]

@@atlantic_love it's my 3rd language

[@Adnah6]

if you put an image link in the image src, it works, too

[@omarious]

Thank you!

[@Bumlife2Bomblife]

Where should a beginner start to learn about machine learning & python?

[@juandager5220]

Your question is too broad... What foundational knowledge do you have on software and/or engineering? How much time do you have? And why specifically ML/Python? You could start by learning basic JavaScript with freeCodeCamp, then algorithms and data structure, and then Python. You could also try a full stack tutorial that uses Python, like Flask or Django, then jump to ML. Again, depends on your foundation and current skills, and you mentioned "beginner." JS is easy for beginners, even easier than Python IMO, because you can start learning now on your browser's console without any pre setup. Either way, learning software is a long road that never ends, and you must walk with small steps every day. Start now. Go to bed a little bit smarter than the day before. Good luck!

[@Bumlife2Bomblife]

@@juandager5220 thank you big bro. I have no code experience but I have played with huggingface, vscode, colab. I like how machine learning can train without any human interaction. I think thats how it goes! Im also using freecodecamp. For now I will start out wit JS & move myself up

[@atlantic_love]

@@Bumlife2Bomblife LOL, trying to hop on the "AI" and "Machine Learning (ML)" bandwagon for richness. Work your way up.

[@triz9267]

Hey can you guys please make a course on robotics I think that would be really interesting and a lot of people would be invested on that topic.

[@gembojones8243]

do you know if theres a way to amend the code so it can be played on a mobile? still on the webpage that is (not an app). thanks for the great tutorial :)

[@atlantic_love]

Go somewhere else to learn mobile programming, lol.

[@thanhtinhtran843]

what font u use in this video ?? pls answer me plssssssssssssss

[@Ibrahim_webdeveloper]

Can I play this game on mobile phone 📱…?

[@blazer125]

My JS file won't run outside the body element. It works fine anywhere inside the body element. Any ideas on why that happens?

[@juandager5220]

Did you ask GPT? Or did you ask in another forum? Google a freeCodeCamp post titled "Read Search Ask"

[@atlantic_love]

@@juandager5220 Get lost with the "GPT" stuff. This isn't the place, and never will be.

[@juandager5220]

​@@atlantic_loveI am you and what I see is me...

[@atlantic_love]

@@juandager5220 Your spam isn't welcomed. You've already been reported once.

[@not_amanullah]

thanks ❤

[@mahendranath2504]

Thank you so much 🫡🙏👋✌️👌👍🫶🏻, liked 👍and subscribed your channel

[@hatredguy]

What's his youtube channel?

[@howtobecomeadeveloper]

It's me 🤓

[@rishiraj2548]

Thanks

[@soumadip_banerjee]

❤

[@AbdussalamPopoola]

Thank you

[@pratikkc7232]

can you plz make code for battle ships game on java where we can play with more than 2 friends

[@eliaswoldesenbet1915]

How game crater edutable or JavaScript game creator game credit game language game create

[@jonathanv.hoffmann3089]

🎉🎉🎉

[@issahakumohammed]

Great 😂

[@JhaBNP]

Fox can't Bark

[@neshadtasnim7013]

done in 2 hours :D

[@oyesaurabh]

i need that VS-Code theme

[@sonic8873]

it's github theme or ayu.

[@learnwithajit29]

It is available as "Dark High Contrast" as a preinstalled VS Code theme. No need to install any other theme.

[@Sfr339]

Just chill

[@miquan57312]

that good

[@Shriramkrishnhari]

👍

[@user-wc1sm8cj8s]

you should've used HTML canvas

[@atlantic_love]

I think that would have limited the look of the game.

[@dywa_varaprasad]

1st❤

[@mr.kachoo8784]

Thank you man , help a lot

[@illegalsmirf]

I hate JavaScript

[@atlantic_love]

The feeling's mutual.

[@funtushgaming2596]

Thanks