Great tutorial! Fun way to learn javascript and game development. For fun I added red "YOU DIED" text and played the death sound from Dark Souls. Keep up the good tutorials!
Thank you! I'm glad you enjoyed the tutorial. That's an awesome creative idea. Dark Souls is an amazing game, and you really do get familiar with the "YOU DIED" text and music, haha. Keep up the creative work!
I speak Spanish and I was looking for things to do on the school page and I must say that this is one of the best tutorials I have seen. I hope you continue with your tutorials and good luck my friend.
I'm brazilian and my english isn't so good, but I could understand almost everything you said and your tutorial was the best that I've ever seen. I'm learning to program using JavaScript and your video was very helpful. I've just subscribed in your channel. Thank you so much and God Bless You!
Followed step by step the tutorial to learn more about Javascript syntax and thanks a lot for this, there's no heavy course background music, just simple explanations, clear informations so we can concentrate fully. Keep going like this it's perfect !
Thank you so much! Also for explaining everything in detail :) I added a button under the h1 in the HTML to refresh the page, so it acts as a restart button: Restart .
That tutorial was very good. It was the first time that I fully understood everything from the very beginnig. I'm trying to make a bit of changes here and there, but often I find myself not know a lot of things haha. Gotta keep studying. Thanks.
That’s awesome Jonas! I’m really happy the tutorial was easy to follow. You got it practice is the key to becoming more confident with programming! Keep studying 😀
LOVED IT!!! Really good tutorial! I am a beginner and despite that everything was understandable and I was able to create my first game. I've learned a lot thank you for your work and keep going
I am gonna make two texts, one in English and one in Portuguese to prove myself like a Brazilian if you don't believe in that. Eu sou um desenvolvedor do Brasil, na realidade um iniciante na programação e eu vim aqui dizer que seus vídeos são incríveis e eu gostei muito da forma que você coloca as telas e como consegue deixar as coisas muito mais simples de aprender, por favor, continue fazendo seus vídeos de jogos, eu sinto que você tem um futuro brilhante como youtuber se isso significar algo kkkkkkkkkkkkkkk e eu estou crescendo na programação junto com os seus projetos. Hi, I am a Brazilian developer, actually I am new on programation, I just have a year and I come here to tell you that our videos are amazing, and I really appreciate them, the way you set our windows and how you explain things, making them more easily to understand, please, continue doing this game developing videos, I fell like you have a brilliant future as a RUclipsr if that means something to you hahahahhahhaha, I am growing with our videos and our projects with a lot of love, Kauã Alves Santos from RJ Brazil.
Thanks Kauã Alves Santos, I'm really happy to hear that you enjoy my videos :) I also really appreciate the feedback about my teaching style and will continue to use the same style in my next videos. I'm glad that these tutorials are helping you learn and grow as a developer. I also hope that my channel continues to grow with subscribers. Please share my channel and subscribe! Stay tuned for my next tutorial on Pac Man!
@@CodingWithAdam hahahahha thats really great, I am going to do it too, I was doing this snake game right now, I just change the css to be more comfortable to my friends play it, at list one time hahahahhaha, on github ^^
Thank you so much. It is such a great tutorial for a beginner like me. Really easy to understand and to follow. Keep it up, sir. I learnt a lot and I really appreciate it!
Thank you! You’re spot on that’s the trick to making a good tutorial. I really appreciate the feedback. It’s nice to know that this approach to teaching really helps beginners learn these fun exciting topics. Keep on learning 😁
Hi there Adam. First off I like your tutorials. I’m currently coding your snake game.. but with button controls for touch screen instead of using the keyCodes.. how do I prevent the snake from moving in the opposite direction when its already going in one direction ?
Thank you! I made a part 2 video that addressed a small bug that sometimes would cause the snake to go in the opposite direction causing a game over. That might help. That is awesome you are adapting it for touch controls! Keep up the great work! ruclips.net/video/eHJEwk_tJsQ/видео.htmlsi=uz3dfGrigK8yvlwI
Great video! Thank you for this tutorial, you explained well. Though the sound doesn't seem to work..and also, within isGameOver conditions, when checking right and down wall "collision", game over initiates when my snake has already breached through the wall, while other two conditions work just fine. I figured out it's got to do with tileCount and tileSize variables, I put different values so I have to play with that I guess, but do you have any suggestions?
I really enjoy your videos, and I hope that your channel continues to grow. I just subscribed, and it's amazing to see that we have a very similar passion for teaching others to code on RUclips.
Great video! I watched your follow up video as well! Can you make a restart button for this game and make a video explaining it? Oh i got one more question! Sometimes apples spawn under the snake. How can we prevent this?
good tuto, but I didn't understand the part from 26:30 to 31:50, I mean the part wherein you drew the snake tail, made the array and the class, for loop and stuff. Thus please, could you answer me by explaining this to me espiecially "snakeparts" thanks, I'll be beyond grateful
Great question. That is the most difficult part of the snake game. With every game loop we add a snake part. That snake part will be drawn where the head was on the next game loop. Since we always add a snake part with every game loop we need to shrink the array of snake parts if it’s more than the tail length. Therefore we remove the snake part that is the farthest away when the snake parts is more than the tail length. The first item in the list will be the furthest away that’s why we shift which means remove first item. I hope that helps. I would try watching that part again but don’t worry it is difficult and you will get it eventually :)
@@CodingWithAdam what you write helps me very a lot thanks you dude I understand little by little keep going thy videos as well as you are awesome, I'm beyond grateful to you
How did you learn to code ? And what did you start with im thinking of starting with HTML and I have been having trouble remembering everything the stuff I got done as of now is the basic parts of HTML like how to put words on it and title everything else I can’t quite .As of now I’m doing FCC to learn coding
Great question Ali. I learned to code from a combination of self study and going to school. Starting with HTML is a great starting place. After HTML I would learn JavaScript. FCC is a fantastic learning resource. The most important thing is to practice every day and you will get better and better. 😀
I would like to add levels to the game depending on score (rewrite canvas to make it bigger add some bricks that you can hit into) in order to do that where should I start? Should I create canvas dynamically in the Js in order to implement that?
My advice is to tackle one feature at a time. The canvas can be made made bigger using its width and height properties. For the bricks you can use the same collision detection logic we use for the Apple. Experiment and see what you can discover! 😀
Great video, i can't only figuring out how can i draw the snake part with the black border, in fact in my game the snake is completely green withouth border, thanks for the attention.
You’re welcome. Sounds like the size is incorrect. If you hard code the width and height to 18 you will see the border. Take a look at the link in the description and you will see how the tile size is calculated. Hope that helps!
thanks .. please make a tutorial on a shooter game in which the character can move with infinte enemies ,, something like planet defender ,,,,,, Thanks
@@CodingWithAdam thanks, oh i forgot to mention if it can Be javascript only? Your teaching is great and simple to understand, i am looking forward to your next videos with js!
@@roxannemarie7859 Thanks, I really appreciate the feedback. I'm glad you like my teaching style. For sure, pac man will be built with pure javascript! :)
@coding with adam Great video Adam please kindly give some hint on how to pause and start the game. I have tried all the logic in my head but all to no avail.
Great question, I have not tried this yet but if you create a variable called isPaused that’s a bool. Set it to true or false based on a key listener. Then use isPaused to wrap the call to changeSnakePosition in the drawGame loop. I’ll give a try as well and get back to you in the next couple of days.
Well explained but at 15:09, the snake piece isn't showing up on my screen. I copied it word to word yet it still doesn't work, do you know how to fix it?
There might be a typo. You can check the chrome developer console and see if there is an error. You can also compare against the complete solution here github.com/CodingWith-Adam/snake/blob/main/index.js Hope it helps.
Thanks Steve. In the head tag there is a style element that is used for css. The body reference that you see in there is to apply some styling to the body element.
@@CodingWithAdam My bad, I meant the snake body. How does the snake body appear where the head was. I'm trying to figure it out but you are so sweet for replying to me so fast I'm gonna subscribe! I would, either way, you are doing a great job, I find it strange that you don't have many more subscribers than that. You deserve it, keep up the good work!
Thanks for the subscribe Steve. That’s the most complex part of the code. If I recall correctly when you eat the Apple it adds the body part where the head is but does not draw it. Then on the next game loop it moves the head and adds the body part. That’s a simplification but I’ll take a look at the code later as it’s been a little while since I wrote it.
Nice tutorial. However, the part about drawing the snakeparts was kind of confusing so I don't think I understood quite well. Can you give more explanation please?
Great question. That is the most difficult part of the snake game. With every game loop we add a snake part. That snake part will be drawn where the head was on the next game loop. Since we always add a snake part with every game loop we need to shrink the array of snake parts if it’s more than the tail length. Therefore we remove the snake part that is the farthest away when the snake parts is more than the tail length. The first item in the list will be the furthest away that’s why we shift which means remove first item. I hope that helps. I would try watching that part again but don’t worry it is difficult and you will get it eventually :)
Please help , why does my second square does not appear. I do everything like you almost. The square appears only when I change position i the code between placeApple() and drawSnake(). But the collor is the same as the original square. Pleas help what is wrong, if you can :)
Hi Ace, my advice is to look at chrome developer tools and see if there is an error. If that does not work I suggest starting from the beginning. It’s sometimes easier to just restart the tutorial. Hope that helps
Sorry to hear that take a look at the code on GitHub. The link is in the description. It’s most likely a small typo your really close to having it work :)
Hi,i know this is a stupid question but when coding something how do i save it so that it goes to the document in google without opening the document again?i hope you understand
Sorry I have not done that before. It sounds like you are using google drive. If coding html and JavaScript I recommend using live server or vs code live server extension to automatically refresh the page when you save.
Thank you! For sure there are several ways to do it. You could hook up another key listener for the r key. When r is pressed reset all the variables. For example set the score to zero move the headx and heady to the middle of the screen, remove all the snake parts etc.
Thank you! Yes you can replace the block with an image using the drawImage method with the 2d context. If you check out one of my other game tutorials you can see how I do it or look up the drawImage method for canvas.
@@CodingWithAdam I tried to watch the other videos but I got lost. Is it possible if you can write me the code? And tell me where the code is placed? Thank you
hey adam! im doing my first game from your tutorial tryna learn something new but i ran into a problem i cannot find the fix for. so when we make the snake go for the first time it doesnt move, it just keeps adding new snake elements like its growing all the time. idk how 2 fix plz help :D
That's awesome TawiGames don't give up. My guess there is a typo. Here is a link to the full code compare it to what you have to see if there is an error. github.com/CodingWith-Adam/snake/blob/main/index.js
The if(headX == tileCount) and if(headY == tileCount) would make it say "GameOver" sometimes while playing, i used your suggestion of if(headX == canvas.width) and if(headY == canvas.height) and that fixed the issue!
Thank you for the question. You could change the last item by changing the ctx fill style in the drawsnake method in the for loop. You need to do a if statement to check that it is the last item and then change the fill style color.
Hi K3iso, at 18:40 the only direction we implement is the up arrow key. To debug put a console.log(yVelocity) in the drawGame function and see if it changes. If it does not change take a look at the keyboard event listener and add a console.log('key board press') to check it's being called when a key is pressed. If all those items are good check the ChangeSnakePosition() is called in the drawGame function. I hope these console logs can help you find the bug. It's probably a small typo. Let me know if you figure it out.
Ty very much for ur reply adam So I used all theses functions but it didnt work ... And then i finally found the problem I forgot an uppercase to keycode... I am a bit ashamed hahahahah
Thank you Maïmouna. Great question. One way to pause the game would be to stop the game loop. This could be achieved by getting the value from setTimeout and then calling clearTimeout(developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout). When you start the game again call drawGame. Another way would be to set a variable called isPaused. If Is paused is true don't move the snake. I hope these suggestions help.
Thanks. Great question you could create some HTML buttons and float them over the canvas. The click event would do similar things to the keyboard event keys.
Sorry Jimmy it’s not that easy to explain. You will have to do some research and I have not tried this yet and can’t provide any additional details at this time.
I have a problem with function clearScreen(){ ctx.fillStyle = 'black'; ctx.fillRect(0,0,canvas.width,canvas.height); } I get Uncaught RangeError: Maximum call stack size exceeded how can I fix?
Hi Paul, I defined the width and height in the index.html for this application. That’s interesting that it didn’t work for you. Check if there is a typo. github.com/CodingWith-Adam/snake/blob/main/index.html The best place to define it is the index.js so I’m glad that worked for you in that file.
hey I dought you see this but I'm having a similar problem to K3iso, I have used your debugging strategies but nothing is helping. I have no debugg errors but I can't see to move
Hi GGaming1344. First thing to check is that when you push the left arrow key the keyboard event is fired. Put a console.log(“key down”) in the keyDown function. When you press left do you see that text in the developer console?
@@CodingWithAdam Thanks for replying I didn't think it would happen :) so thanks, but back to this I cant even seem to run the timer sector let alone the console.log("key down") function
Your welcome, some times it’s best to start fresh and create a new project. You might have a typo. For example a method called doStuff() and DoStuff() would be 2 different methods. If you decide to continue with your same code I would suggest getting the game loop to work first. I can have a look at your code if you paste at this link as well codeshare.io/5Z3LAN
i can't do it for some reason, I followed the steps to make the snake bigger, but it won't get bigger and I don't know why, I event tried copying your text exactly and I tried it twice and it won't work what am I doing wrong.
Sorry to hear that. In the worst case I suggest starting over from scratch and continue to use the code linked in the description as a reference guide. Hoping that you get it working 🤞
I am aware that the snake has to take the apple but when I go against the apple, the apple and the snake disappear. how can I solve that? (By the way I looked back and everything is the same).
Sounds like the canvas might be null. Does the html have the correct ID for the canvas? Next I would check if there is a typo for document.getElementByID(‘game’)
@@CodingWithAdam no claims it all works great. no errors. runs fine on the site. im using vs code and firefox or google. everything else works i think. no black background and the snake extends out from the start. i took out all extra code and just tried to turn the canvas black and it didnt work. really weird i know
Great question, the title size is 20 but when we draw the snake parts or Apple at size 18 so that it leaves a nice gap between snake parts and other tiles. For an experiment try making the snake parts the same size as the tile 20 and there will be no gap between snake parts. I hope that helps :)
Hi Crabby Fish. here is a direct link that you can use to download the file. I'm on mac using chrome and all I did was press command + s. This might be ctrl key + s on windows. You can also get the file by downloading the git repo if you have used git before. raw.githubusercontent.com/CodingWith-Adam/snake/main/gulp.mp3
You can think of the screen as a grid of squares. There are 20 rows and each row is made up of 20 squares. i made one variable called tileCount to represent the height and width of the screen. Height is the number of rows and width is the number of columns. The tileSize is the size we draw in each grid or square on the screen. We use this for the snake body and apple on the screen.
Nevermind, I got it! Current issue is getting game over on the first 2 turns even after inputting the if statement for x and y, might need to get counts to solve that issue
bro it's great tutorial but my snake was not showing so heres a code: function drawSnake(){ ctx.fillStyle = 'green' ctx.fillRect(headX * tileCount, headY* tileCount, tileSize,tileSize) }
I really love this tutorial! Everything is super well explained, and its great for me as I am just now getting back into programming. I noticed that when the new apple gets drawn, it doesnt check if its position overlaps with any of the snake body parts, so it sometimes draws itself on top of the snake. I wrote some code to fix that, but it might not be the most efficient way to do it: I call this function right after a collision happens function generateApplePosition() { let goodPosition = true; let newAppleX = Math.floor(Math.random() * tileCount); let newAppleY = Math.floor(Math.random() * tileCount); for (let i = 0; i < snakeParts.length; i++) { let partX = snakeParts[i].x; let partY = snakeParts[i].y; if (newAppleX === partX && newAppleY === partY) { goodPosition = false; break; } else { goodPosition = true; } } if (goodPosition) { appleX = newAppleX; appleY = newAppleY; return; } else { generateApplePosition(); } }
Awesome Patrick! Not sure if you know it but the code you wrote is recursive meaning that it call's it self until it gets the result that it wants. I think this is a good approach. The great thing about programming is that there are many ways to write the same code! Great Work!
@@CodingWithAdam yeah I meant it to be recursive! I probably should write an end condition too. I'm not sure if just checking the snakeParts array until i find a valid spot is the best way to draw the apple. Maybe there is something better than just picking random numbers for the apple's position?
@@mrpandaaagaming I'll get back to you with a more detailed answer. You can remove the return at the of the method since it no value is returned and the method stops there. The loop could be written using one of the array functions. I would suggest the some method developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some When I have time I'll give a try and reply back here.
@@CodingWithAdam if you get a chance, could you show me how I could modify my function using the some() function? I was trying to tinker around with it but couldn't figure it out
You might have a typo. You could open developer tools and see if you see an error. Normally you press f12 on your keyboard and look at the console tab for errors. Here is a link to the completed code to compare. github.com/CodingWith-Adam/snake/blob/main/index.js You can also check if the keybard event is wried up or a variable has the wrong name. I hope that helps
Enjoying this tutorial! Subscribe for even more game tutorials!
yes, good job bro!
Thank you! You're welcome!
Dziękujemy.
Thank you for the Super Thanks. I really appreciate it and I'm happy that you enjoyed the snake tutorial!
Great tutorial! Fun way to learn javascript and game development. For fun I added red "YOU DIED" text and played the death sound from Dark Souls. Keep up the good tutorials!
Thank you! I'm glad you enjoyed the tutorial. That's an awesome creative idea. Dark Souls is an amazing game, and you really do get familiar with the "YOU DIED" text and music, haha. Keep up the creative work!
@@CodingWithAdam you’re welcome!
I speak Spanish and I was looking for things to do on the school page and I must say that this is one of the best tutorials I have seen. I hope you continue with your tutorials and good luck my friend.
Thank you Mark! I really appreciate that!
Best simplified Js snake tutorial on YT. You explained why and how everything works. Keep making more Js tutorials bud!!
Thanks Nikz, glad you liked the tutorial!
I'm brazilian and my english isn't so good, but I could understand almost everything you said and your tutorial was the best that I've ever seen. I'm learning to program using JavaScript and your video was very helpful. I've just subscribed in your channel. Thank you so much and God Bless You!
You’re welcome! I’m really happy to hear that you enjoyed the tutorial! Thank you for subscribing and keep on learning 😀
1. Very calm voice.
2. Step by step...easy to follow.
Great teacher...!
Thank you Minh! I really appreciate your comment :)
@@CodingWithAdam
Thank so much Adam....your Tutorial not only improve my knowledge,but improve my character...❤️❤️❤️❤️❤️
That’s wonderful to hear, glad I can help :)
Followed step by step the tutorial to learn more about Javascript syntax and thanks a lot for this, there's no heavy course background music, just simple explanations, clear informations so we can concentrate fully. Keep going like this it's perfect !
Thank you for the wonderful feedback. I’m really happy that you enjoyed the tutorial and it was easy to follow. Keep on learning!
Thank you so much! Also for explaining everything in detail :)
I added a button under the h1 in the HTML to refresh the page, so it acts as a restart button:
Restart .
You’re welcome Daniel. Awesome, I really like that idea for a refresh button :)
That tutorial was very good. It was the first time that I fully understood everything from the very beginnig. I'm trying to make a bit of changes here and there, but often I find myself not know a lot of things haha. Gotta keep studying. Thanks.
That’s awesome Jonas! I’m really happy the tutorial was easy to follow. You got it practice is the key to becoming more confident with programming! Keep studying 😀
Thank you very much it's rare that I comment in a tutorial session but that was a master piece
Thank you! You’re welcome! I’m really happy you enjoyed the tutorial
broo tysm!! this was magical, you're so underrated!
new sub :D
You’re welcome! I really appreciate the feedback. I’m glad you enjoyed the tutorial and thank you for the sub! 😀
@@CodingWithAdam of course! keep it up :)
LOVED IT!!! Really good tutorial! I am a beginner and despite that everything was understandable and I was able to create my first game. I've learned a lot thank you for your work and keep going
Thank you! I’m glad you enjoyed the tutorial. Congratulations on building your first game! 😀
I am gonna make two texts, one in English and one in Portuguese to prove myself like a Brazilian if you don't believe in that.
Eu sou um desenvolvedor do Brasil, na realidade um iniciante na programação e eu vim aqui dizer que seus vídeos são incríveis
e eu gostei muito da forma que você coloca as telas e como consegue deixar as coisas muito mais simples de aprender, por favor, continue fazendo seus vídeos de jogos, eu sinto que você tem um futuro brilhante como youtuber se isso significar algo kkkkkkkkkkkkkkk e eu estou crescendo na programação junto com os seus projetos.
Hi, I am a Brazilian developer, actually I am new on programation, I just have a year and I come here to tell you that our videos are amazing, and I really appreciate them, the way you set our windows and how you explain things, making them more easily to understand, please, continue doing this game developing videos, I fell like you have a brilliant future as a RUclipsr if that means something to you hahahahhahhaha, I am growing with our videos and our projects
with a lot of love, Kauã Alves Santos from RJ Brazil.
Thanks Kauã Alves Santos, I'm really happy to hear that you enjoy my videos :) I also really appreciate the feedback about my teaching style and will continue to use the same style in my next videos. I'm glad that these tutorials are helping you learn and grow as a developer. I also hope that my channel continues to grow with subscribers. Please share my channel and subscribe! Stay tuned for my next tutorial on Pac Man!
@@CodingWithAdam hahahahha thats really great, I am going to do it too, I was doing this snake game right now, I just change the css to be more comfortable to my friends play it, at list one time hahahahhaha, on github ^^
Thank you so much. It is such a great tutorial for a beginner like me. Really easy to understand and to follow. Keep it up, sir. I learnt a lot and I really appreciate it!
You’re welcome! Thank you for the feedback. I’m really glad you enjoyed the tutorial 😀
You are an amazing mentor! Thank you for this great detailed thorough explanation!
Thank you :) You’re welcome. I’m glad you enjoyed the tutorial!
😍😍😍🥰🥰😍🤩🤩🤩🤩🤩🤩🤩🤩thank you so much 😘💋
You’re welcome!! 😁
Love it Adam, This is Niju George
Thanks Niju, it was a fun tutorial to make.
Thankyou sirr for giving such a clean explaination. i would like to watch more of you tutorials
You’re welcome! I’m happy that you enjoyed the video! 😀
Cooool
Great Job, I really liked the game and the way you explain )))
Thanks alot for this useful project
Awesome, thank you Muhammadjon! I’m happy that you enjoyed the tutorial.
Finally a tutorial with a good naming variables! 😁
Thank you Luiz. I’m glad you enjoyed the tutorial :)
This is a great tutorial! You explained everything very well and didn't rush anything making it very easy for me to learn! Thanks very much!
That awesome to hear. You're welcome! I'm really glad you enjoyed the tutorial!
Thank you so much, your explanations are extremely clear and even understandable for a total beginner :)
You’re welcome Laura! I’m really happy the tutorial was easy to understand :)
Thanks brother nice video. I have took your code and modified it so that it could fit for any screen size and also subscribed 😉
Thank you Rishikesh, that’s really great glad you enjoyed the tutorial. I like that idea of making it work for any screen size!
Bro, I love you,. this tutorial is so very well put. thanks man.
You’re welcome! Glad you enjoyed it!
@@CodingWithAdam Best thing is that you really explain every move, thats what beginners actually need to learn. that is the 'secret and you know it.
Thank you! You’re spot on that’s the trick to making a good tutorial. I really appreciate the feedback. It’s nice to know that this approach to teaching really helps beginners learn these fun exciting topics. Keep on learning 😁
Hi there Adam. First off I like your tutorials. I’m currently coding your snake game.. but with button controls for touch screen instead of using the keyCodes.. how do I prevent the snake from moving in the opposite direction when its already going in one direction ?
Thank you! I made a part 2 video that addressed a small bug that sometimes would cause the snake to go in the opposite direction causing a game over. That might help.
That is awesome you are adapting it for touch controls! Keep up the great work!
ruclips.net/video/eHJEwk_tJsQ/видео.htmlsi=uz3dfGrigK8yvlwI
Great video! Thank you for this tutorial, you explained well. Though the sound doesn't seem to work..and also, within isGameOver conditions, when checking right and down wall "collision", game over initiates when my snake has already breached through the wall, while other two conditions work just fine. I figured out it's got to do with tileCount and tileSize variables, I put different values so I have to play with that I guess, but do you have any suggestions?
Thank you. You’re welcome! You’re on the right track, continue to play with the variables and adjust till you get it working!
Your a great teacher thanks this is very helpful
Thank you 😀 You’re welcome!
I really enjoy your videos, and I hope that your channel continues to grow. I just subscribed, and it's amazing to see that we have a very similar passion for teaching others to code on RUclips.
Thank you Jonathan. Glad to see you are making videos as well. Keep up the great work!
Great Tutorial!!!
YO ADAM COME BACK!!! lol
youre such a good explainer, 20/10 teacher
THANK YOU
Thanks for the encouraging words Malik! I’m working on my next video Pac-Man!
Nice tutorial Adam, I subscribed to your channel
Thanks Frank, it was fun to make. Thanks for the subscription as well!
thank you it was a great tutorial it helped me a lot to learn javascript
You’re welcome Ajit! I’m glad you liked the tutorial!
Beautiful tutorial, explained so well, subscribed
Thank you Boris! I’m really glad you enjoyed the tutorial!
Great video! I watched your follow up video as well! Can you make a restart button for this game and make a video explaining it? Oh i got one more question! Sometimes apples spawn under the snake. How can we prevent this?
Thank you! I will add that suggestion to my list. There is a really great comment here from Patrick and he has some code you can try.
I liked it a lot! it's so informative and enjoyable, thanks. :)
Yay! Happy you enjoyed the video :)
@@CodingWithAdam :)
Holy crap this was an amazing tutorial. Thank you so much.
You're Welcome! I'm glad that you enjoyed the Tutorial. Thank you for the subscribe!
Loved this tutorial! Thank you!
Thanks! Gretchen. Glad you enjoyed it!
I love your tutorials! Please make more
Thank you x w! I plan to make more :)
love, this game. Great tutorial.
Thanks Devs Like Us. It’s a classic.
great video, everything was very comprehensible
Thanks Leayy!
good tuto, but I didn't understand the part from 26:30 to 31:50, I mean the part wherein you drew the snake tail, made the array and the class, for loop and stuff.
Thus please, could you answer me by explaining this to me espiecially "snakeparts"
thanks, I'll be beyond grateful
Great question. That is the most difficult part of the snake game. With every game loop we add a snake part. That snake part will be drawn where the head was on the next game loop. Since we always add a snake part with every game loop we need to shrink the array of snake parts if it’s more than the tail length. Therefore we remove the snake part that is the farthest away when the snake parts is more than the tail length. The first item in the list will be the furthest away that’s why we shift which means remove first item. I hope that helps. I would try watching that part again but don’t worry it is difficult and you will get it eventually :)
@@CodingWithAdam what you write helps me very a lot thanks you dude I understand little by little keep going thy videos as well as you are awesome, I'm beyond grateful to you
@@Awerd64 Glad it helped! You're welcome!
thanks for helping me understand really great help !!!
You’re welcome!!! :)
How did you learn to code ? And what did you start with im thinking of starting with HTML and I have been having trouble remembering everything the stuff I got done as of now is the basic parts of HTML like how to put words on it and title everything else I can’t quite .As of now I’m doing FCC to learn coding
Great question Ali. I learned to code from a combination of self study and going to school. Starting with HTML is a great starting place. After HTML I would learn JavaScript. FCC is a fantastic learning resource. The most important thing is to practice every day and you will get better and better. 😀
thanks! helped me make another snake game
You’re welcome!
@@CodingWithAdam btw can you make a tutorial how to make multiplayer snake in javascript with html5 canvas?
I coded this game and it worked
That's really great!
thanks, am even gonna try out the next javascrpit turtorial
Thanks @@yaredermias1720 I look forward to hearing how it goes :)
I would like to add levels to the game depending on score (rewrite canvas to make it bigger add some bricks that you can hit into) in order to do that where should I start? Should I create canvas dynamically in the Js in order to implement that?
My advice is to tackle one feature at a time. The canvas can be made made bigger using its width and height properties. For the bricks you can use the same collision detection logic we use for the Apple. Experiment and see what you can discover! 😀
Great video, i can't only figuring out how can i draw the snake part with the black border, in fact in my game the snake is completely green withouth border, thanks for the attention.
You’re welcome. Sounds like the size is incorrect. If you hard code the width and height to 18 you will see the border. Take a look at the link in the description and you will see how the tile size is calculated. Hope that helps!
thanks .. please make a tutorial on a shooter game in which the character can move with infinte enemies ,, something like planet defender ,,,,,, Thanks
Thank you for the great suggestion Aarav!
@@CodingWithAdam please can you also make a tutorial on a platformer game with camera movement it would be very nice ,,,,,,, Subscribed
great tutorial, thanks a lot bro
You’re welcome! 😀
This is clearly explained, thanks! Would you please make a tutorial on pac man as well?
Thank Roxanne! I plan to make a pac man tutorial sometime in the near future.
@@CodingWithAdam thanks, oh i forgot to mention if it can Be javascript only? Your teaching is great and simple to understand, i am looking forward to your next videos with js!
@@roxannemarie7859 Thanks, I really appreciate the feedback. I'm glad you like my teaching style. For sure, pac man will be built with pure javascript! :)
Hey Adam, I’m having an issue where turning too quickly causes a Game Over, why is that? Loved the tutorial by the way.
Thanks for taking the tutorial Merkulees. Yes that is an issue. I’ll check and see if I have a solution for that!
@coding with adam
Great video Adam
please kindly give some hint on how to pause and start the game.
I have tried all the logic in my head but all to no avail.
Great question, I have not tried this yet but if you create a variable called isPaused that’s a bool. Set it to true or false based on a key listener. Then use isPaused to wrap the call to changeSnakePosition in the drawGame loop. I’ll give a try as well and get back to you in the next couple of days.
@@CodingWithAdam I have already tried it and it works. Thanks
That’s awesome! Glad you got it working!
Well explained but at 15:09, the snake piece isn't showing up on my screen. I copied it word to word yet it still doesn't work, do you know how to fix it?
There might be a typo. You can check the chrome developer console and see if there is an error. You can also compare against the complete solution here github.com/CodingWith-Adam/snake/blob/main/index.js
Hope it helps.
appreciate the tutorial
You’re welcome A J!
Great Video! The only thing I did not understand, is how the body goes to where the head WAS...
Thanks Steve. In the head tag there is a style element that is used for css. The body reference that you see in there is to apply some styling to the body element.
@@CodingWithAdam My bad, I meant the snake body. How does the snake body appear where the head was. I'm trying to figure it out but you are so sweet for replying to me so fast I'm gonna subscribe! I would, either way, you are doing a great job, I find it strange that you don't have many more subscribers than that. You deserve it, keep up the good work!
Thanks for the subscribe Steve. That’s the most complex part of the code. If I recall correctly when you eat the Apple it adds the body part where the head is but does not draw it. Then on the next game loop it moves the head and adds the body part. That’s a simplification but I’ll take a look at the code later as it’s been a little while since I wrote it.
I didn't get most of the Ideas
but I got end result 😅
Thanks bro❤️
You’re welcome!
is there a confusion at @17:41 y = -1 mean snake should go down???? any way amazing tutorial
Thanks Jakaria, that’s correct when you move up y position will decease. When you move down y will increase. Thanks for taking my tutorial!
Nice tutorial. However, the part about drawing the snakeparts was kind of confusing so I don't think I understood quite well. Can you give more explanation please?
Great question. That is the most difficult part of the snake game. With every game loop we add a snake part. That snake part will be drawn where the head was on the next game loop. Since we always add a snake part with every game loop we need to shrink the array of snake parts if it’s more than the tail length. Therefore we remove the snake part that is the farthest away when the snake parts is more than the tail length. The first item in the list will be the furthest away that’s why we shift which means remove first item. I hope that helps. I would try watching that part again but don’t worry it is difficult and you will get it eventually :)
Please help , why does my second square does not appear. I do everything like you almost. The square appears only when I change
position i the code between placeApple() and drawSnake(). But the collor is the same as the original square. Pleas help what is wrong, if you can :)
Hi Ace, my advice is to look at chrome developer tools and see if there is an error. If that does not work I suggest starting from the beginning. It’s sometimes easier to just restart the tutorial. Hope that helps
@@CodingWithAdam okey thank you 😊😊
43:28 it don't work on me it still show gameover when i move all that changes is i can move while gameover text is showing.
Sorry to hear that take a look at the code on GitHub. The link is in the description. It’s most likely a small typo your really close to having it work :)
Hi,i know this is a stupid question but when coding something how do i save it so that it goes to the document in google without opening the document again?i hope you understand
Sorry I have not done that before. It sounds like you are using google drive. If coding html and JavaScript I recommend using live server or vs code live server extension to automatically refresh the page when you save.
Great video man! Is there a way to reset the game after you lose without refreshing the window?
Thank you!
For sure there are several ways to do it. You could hook up another key listener for the r key. When r is pressed reset all the variables. For example set the score to zero move the headx and heady to the middle of the screen, remove all the snake parts etc.
Hi! Love your video and I am new to coding. I was wondering how I can take a picture (png) instead of an block that the snake is eating
Thank you! Yes you can replace the block with an image using the drawImage method with the 2d context. If you check out one of my other game tutorials you can see how I do it or look up the drawImage method for canvas.
@@CodingWithAdam i did not understand. Where could I put the code? In the style or JS
@@CodingWithAdam I tried to watch the other videos but I got lost. Is it possible if you can write me the code? And tell me where the code is placed? Thank you
hey adam! im doing my first game from your tutorial tryna learn something new but i ran into a problem i cannot find the fix for. so when we make the snake go for the first time it doesnt move, it just keeps adding new snake elements like its growing all the time. idk how 2 fix plz help :D
That's awesome TawiGames don't give up. My guess there is a typo. Here is a link to the full code compare it to what you have to see if there is an error. github.com/CodingWith-Adam/snake/blob/main/index.js
@@CodingWithAdam thank you, man real save :D
You’re welcome!
why we cant use if(headX == canvas.width) instead of if(headX == tileCount) in the isGameOver function
Great question. There are multiple ways to solve a problem. If that works then you discovered another way. Great Job!
The if(headX == tileCount) and if(headY == tileCount) would make it say "GameOver" sometimes while playing, i used your suggestion of if(headX == canvas.width) and if(headY == canvas.height) and that fixed the issue!
how do i change only the last one color? @Coding With Adam
Thank you for the question. You could change the last item by changing the ctx fill style in the drawsnake method in the for loop. You need to do a if statement to check that it is the last item and then change the fill style color.
Hi adam
I have a problem at 18:40
The snake dont move... And the code is exactly the same
An Idea ?
Hi K3iso, at 18:40 the only direction we implement is the up arrow key. To debug put a console.log(yVelocity) in the drawGame function and see if it changes. If it does not change take a look at the keyboard event listener and add a console.log('key board press') to check it's being called when a key is pressed. If all those items are good check the ChangeSnakePosition() is called in the drawGame function. I hope these console logs can help you find the bug. It's probably a small typo. Let me know if you figure it out.
Ty very much for ur reply adam
So I used all theses functions but it didnt work ... And then i finally found the problem
I forgot an uppercase to keycode...
I am a bit ashamed hahahahah
That’s awesome! No need to be ashamed it’s all part of the process of being a software developer. I’m happy you found the issue :)
Console.log(yvelocity) in the drawgame function its change.but still it does not move... Any ieda to fix it...😌
Hi i really love your video !! But i would like to know how to add a pause
Thank you Maïmouna. Great question. One way to pause the game would be to stop the game loop. This could be achieved by getting the value from setTimeout and then calling clearTimeout(developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout). When you start the game again call drawGame. Another way would be to set a variable called isPaused. If Is paused is true don't move the snake. I hope these suggestions help.
Hey, I have a question.
How can I do a reset button?
Here is a easy to add a reset button. Add a html button that reloads the page. Refresh Page
This is iyke. This is a great tutorial. But how can I make this snake game work on mobile phone using buttons
Thanks. Great question you could create some HTML buttons and float them over the canvas. The click event would do similar things to the keyboard event keys.
@@CodingWithAdam what function should i add in javascript onclick method?
Sorry Jimmy it’s not that easy to explain. You will have to do some research and I have not tried this yet and can’t provide any additional details at this time.
I might do it in a future video :)
I have a problem with function clearScreen(){
ctx.fillStyle = 'black';
ctx.fillRect(0,0,canvas.width,canvas.height);
} I get Uncaught RangeError: Maximum call stack size exceeded how can I fix?
I would suggest starting from the beginning there might be a typo. You can also look at the complete solution linked in the description.
@@CodingWithAdam I fixed it thanks and great tutorial!
That’s awesome! You’re welcome.
I’m really happy that you figured it out! Great work!
How are you grabbing the canvas.width and height, because my chrome browser won't. I have to define the width/height in index.js
Hi Paul, I defined the width and height in the index.html for this application. That’s interesting that it didn’t work for you. Check if there is a typo. github.com/CodingWith-Adam/snake/blob/main/index.html The best place to define it is the index.js so I’m glad that worked for you in that file.
@@CodingWithAdam Thanks Adam, yes it was a typo. By the way very nice tutorial.
Thanks. That’s awesome glad you figured it out!
hey I dought you see this but I'm having a similar problem to K3iso, I have used your debugging strategies but nothing is helping. I have no debugg errors but I can't see to move
Hi GGaming1344. First thing to check is that when you push the left arrow key the keyboard event is fired. Put a console.log(“key down”) in the keyDown function. When you press left do you see that text in the developer console?
@@CodingWithAdam Thanks for replying I didn't think it would happen :) so thanks, but back to this I cant even seem to run the timer sector let alone the console.log("key down") function
Your welcome, some times it’s best to start fresh and create a new project. You might have a typo. For example a method called doStuff() and DoStuff() would be 2 different methods. If you decide to continue with your same code I would suggest getting the game loop to work first. I can have a look at your code if you paste at this link as well codeshare.io/5Z3LAN
i can't do it for some reason, I followed the steps to make the snake bigger, but it won't get bigger and I don't know why, I event tried copying your text exactly and I tried it twice and it won't work what am I doing wrong.
Sorry to hear that. In the worst case I suggest starting over from scratch and continue to use the code linked in the description as a reference guide. Hoping that you get it working 🤞
Plz make a multi-player game in html js css and node
Thanks for the suggestion Ishubro’s!
@@CodingWithAdam ❤
I am aware that the snake has to take the apple but when I go against the apple, the apple and the snake disappear. how can I solve that? (By the way I looked back and everything is the same).
Sound like a error is happening. I would take a look at the chrome developer console to see there is an error message.
@@CodingWithAdam thanks
i keep getting :
Uncaught TypeError: Cannot read properties of null (reading 'getContext')
can anyone help?
Sounds like the canvas might be null. Does the html have the correct ID for the canvas? Next I would check if there is a typo for document.getElementByID(‘game’)
@@CodingWithAdam oh yea it was a typo the d of ID wasnt caps, i didnt know it had to be that way , thanks alot
You’re welcome! No problem it happens to everyone. I’m happy that you found it! 😁
clear screen portion of the code wont work for me. i get no back ground colour and the snake just extends
Is there an error in the developer console?
@@CodingWithAdam no claims it all works great. no errors. runs fine on the site. im using vs code and firefox or google. everything else works i think. no black background and the snake extends out from the start. i took out all extra code and just tried to turn the canvas black and it didnt work. really weird i know
Okay but how can I make the snake loop
you know, when the snake hits the wall, instead of a game over, it just comes from the other side
Thanks for the suggestion perhaps I’ll do a follow up video or a new full video with that feature
24:45 Appel Collision
so why the tileSize is 18 but isn't 20?
Great question, the title size is 20 but when we draw the snake parts or Apple at size 18 so that it leaves a nice gap between snake parts and other tiles. For an experiment try making the snake parts the same size as the tile 20 and there will be no gap between snake parts. I hope that helps :)
How can we add a Google Font to the Game Over! text?
This answer on stackoverflow might help stackoverflow.com/questions/40199805/unable-to-use-a-google-font-on-canvas
@@CodingWithAdam thank you so much!!!
You’re welcome!
hi, can u leave a download link to the gulp sound plz?
Hi Crabby Fish. here is a direct link that you can use to download the file. I'm on mac using chrome and all I did was press command + s. This might be ctrl key + s on windows. You can also get the file by downloading the git repo if you have used git before.
raw.githubusercontent.com/CodingWith-Adam/snake/main/gulp.mp3
Thanks i have a question here you declare two variable such as "litocunt and tilesize" for it they are can give me more inf
You can think of the screen as a grid of squares. There are 20 rows and each row is made up of 20 squares. i made one variable called tileCount to represent the height and width of the screen. Height is the number of rows and width is the number of columns. The tileSize is the size we draw in each grid or square on the screen. We use this for the snake body and apple on the screen.
Obrigada
Your Welcome!
How do you add a sound file?
It is explained in the video. Get the sound file from the GitHub repository.
how do you make the playable link thats in your discription?
It’s a GitHub page. Look up GitHub pages for more info. Thanks for the suggestion I’ll consider it for a future video.
@@CodingWithAdam thanks
why tailLength++ doesn't work ?
Checkout the code on GitHub in the description. The issue normally is a typo.
Uncaught SyntaxError: Unexpected token '
There should be a line number in the chrome developer console that might tell you where the error is. A syntax error means there is a typo somewhere.
♥
Why this code is not working for me 😞.
Sorry to hear that. Check out the complete code linked in the description if you are stuck.
Still kinda confused on how you stored the tails' positions...
Nevermind, I got it! Current issue is getting game over on the first 2 turns even after inputting the if statement for x and y, might need to get counts to solve that issue
No problem it’s the most complex part of this version of snake. Sorry to hear about that issue you can compare to the code linked in the description.
I am getting a error :( good tutorial though.
Sorry to hear that. Checkout the link in the description for the code solution there might be a typo.
tanks
You’re welcome!
love the video but please use += for the sake of everyone's sanity
Thanks! Glad you enjoyed the tutorial!
bro it's great tutorial but my snake was not showing so heres a code: function drawSnake(){
ctx.fillStyle = 'green'
ctx.fillRect(headX * tileCount, headY* tileCount, tileSize,tileSize)
}
I would check the chrome developer console for an error.
@@CodingWithAdam sorry i was not looking for syntax error but thank you for tutorial
You’re welcome
I really love this tutorial! Everything is super well explained, and its great for me as I am just now getting back into programming. I noticed that when the new apple gets drawn, it doesnt check if its position overlaps with any of the snake body parts, so it sometimes draws itself on top of the snake. I wrote some code to fix that, but it might not be the most efficient way to do it:
I call this function right after a collision happens
function generateApplePosition() {
let goodPosition = true;
let newAppleX = Math.floor(Math.random() * tileCount);
let newAppleY = Math.floor(Math.random() * tileCount);
for (let i = 0; i < snakeParts.length; i++) {
let partX = snakeParts[i].x;
let partY = snakeParts[i].y;
if (newAppleX === partX && newAppleY === partY) {
goodPosition = false;
break;
} else {
goodPosition = true;
}
}
if (goodPosition) {
appleX = newAppleX;
appleY = newAppleY;
return;
} else {
generateApplePosition();
}
}
Awesome Patrick! Not sure if you know it but the code you wrote is recursive meaning that it call's it self until it gets the result that it wants. I think this is a good approach. The great thing about programming is that there are many ways to write the same code! Great Work!
@@CodingWithAdam yeah I meant it to be recursive! I probably should write an end condition too. I'm not sure if just checking the snakeParts array until i find a valid spot is the best way to draw the apple. Maybe there is something better than just picking random numbers for the apple's position?
@@mrpandaaagaming I'll get back to you with a more detailed answer. You can remove the return at the of the method since it no value is returned and the method stops there. The loop could be written using one of the array functions. I would suggest the some method developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
When I have time I'll give a try and reply back here.
@@CodingWithAdam oh that's really smart! I'll try and take a look at that. Thanks!!
@@CodingWithAdam if you get a chance, could you show me how I could modify my function using the some() function? I was trying to tinker around with it but couldn't figure it out
programme name ?
I’m not sure of the question. I’m using visual studio code and chrome as the browser
18:40 I can not get my snake to move
You might have a typo. You could open developer tools and see if you see an error. Normally you press f12 on your keyboard and look at the console tab for errors. Here is a link to the completed code to compare. github.com/CodingWith-Adam/snake/blob/main/index.js You can also check if the keybard event is wried up or a variable has the wrong name. I hope that helps
cant get the snake to appear
Sorry to hear that! There most likely is a typo. If you know how take a look at the chrome deliver console you can find the error there.