How to code snake game in JavaScript
ฝัง
- เผยแพร่เมื่อ 15 ต.ค. 2024
- How to code a snake game in javascript for beginners! Learn how to create the snake game using javascript, html, and css! Throughout the tutorial, you will learn how to use the canvas tag to display the Snake game, create the game loop, listen for Key presses to move the snake, use an array to store the snake's segments, and check collision and out of bounds for game over.
Code: github.com/ImK...
Demo: imkennyyip.git...
Website: www.kennyyipco...
Java Game Programming Projects Playlist:
• Java Game Programming ...
JavaScript Game Programming Projects Playlist:
• JavaScript Game Progra...
Subscribe for more coding tutorials 😄!
Whoever is a beginner never put the script link in the header always make sure its at the end of the body tag
why though? that's a very little detail with no consequence at all
@@raicyceprine8953 if you want to put it at the head tag you have to use the defer attribute OR you should use beforre the end of the body tag
@@raicyceprine8953No it have consequences because JavaScript runs from the first line to the last and it may cause some errors in the code
Sometimes we need to modify dom with javascript, but if we load javascript first, the dom object doesn't load. That causes no define error for javascript. So make sure your script load after html loads
Loved your video! Clear and calm explanation, and every time i didnt get the results i wanted it was because i missed a detail. After about 90 minutes was able to fully copy the code from the video. Had a little struggle with the body, but the next day i played around with the nested arrays enough to finally see what you were doing there haha. Am new to JS, but you really showed me how to use it, practically. Thanks man! ^^
can u respond to my question did u face the problem that the black box didnt apper if u hhave faced the problem and found the solution can u tell my how u got it dont thank u
@@Belal-t5e you mean the context box if yes then you should probably re watch the video and make sure to define all the variables get the context and multiply the different lengths with block size just like how he multiplied them and got the size hope you find some solution and help
One of the best tutorials I've ever seen. Idk why you dont have more subscribers in your channel you deserve more for what you give. Thank you so much!
1:50 QuickTip : Use a "!" sign instead, to write the whole boilerplate down
Really nice tutorial . i have been following all you games coding playlist and practising . i have only 4 games left. keep going great content and the explanation are so clear and the logic of thinking make it easy to follow till the final result.
You are very good at breaking down difficult concepts. Please keep making these videos!
Love from Nigeria 🇳🇬 ❤
Amazing 🤩
27:22 for the gameover to trigger properly, you need to do add a - 1 like this "SnakeX > cols*blockSize - 1" and the same with SnakeY and rows. If you dont add the -1 the snake can go one line out of bounds and not die
Gotta do it on snakeY too :D
oh u rite
awesome video man thank you! really helped to understand better how to call functions in at the correct time and where to place them in the code! keep it chief!
This video explanation made my day.
Best - Simple and Clear Logic Building without any fluff or other non-required information.
I love your straight forward way of sharing the problem behind the scene in graph.
Keep uploading such great videos.
Thank You so much for your efforts and teacing us once again , You got new Subscriber 💖💖💖💖💖💖💖
Rigth now i am in a personal project ... transform all the old basic games that i develop to javascript. This video help me a lot. Thanks.
Thank you so much! Such an amaizing experience and your a very good teacher, I understood everything you said. Thank you so much for your effort.
i found out that its entertaining to learn javascript with tutorial in making game than tutorial with only code.
Bit late to comment, but there is a bug where if you change direction twice in the same tick it can cause a game over. To fix, I just set a new variable 'currentDirection' to change to the most recent key event and only change the velocity of the snake at the start of every update instead of whenever a key is pressed using the currentDirection variable.
Thanks for bringing this up for others to see!
thx
I just watched along all the video this is really smart can't wait to code it or better yet do it with vue
Great content, great explanations from scratch, very concise & clear, I subscribe !
Best snake video on TH-cam
Love from India ❤️
Sorry but we don't have problems with our Microsoft cumputers!
Me also ❤
🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
@@damanMikey
That's because we have an INDIAN CEO for Microsoft. ENJOY😊
There is a bug where you can move the opposite direction by pressing two keys are once, or really fast.
Amazing work dude thx alot very clear and helpful 🙌
It would be better to use the unshift method instead of push when u eat I think. Because the new element is near the head right? so its near to [0] position
Check out the playlist of web project tutorials here!
th-cam.com/play/PLnKe36F30Y4bLhA-st9sC4ZthyV7nsL2Q.html
Code Snake Game in Java: th-cam.com/video/Y62MJny9LHg/w-d-xo.html
Code Snake Game in Python: th-cam.com/video/FtqWCo1_I4g/w-d-xo.html
Got a tutorial suggestion? Let me know down below!
amazing tutorual i have now learnt the basics ty so much !!!!🖥⌨🤩
I seem to have some problem in the 1st step and I have written the code twice but the thing is not showing up (I have checks both js and css and also html)
This was very helpful..... Best video for javascript Snake tutorial ❤❤
I didn't understand how did you manage to move the snake in the same "grill" as the food, I'm having problems colliding head with food, usually because it's not precise and there's always a minimum difference between food and head coordinates.
brother, you explain so well....thank you for the video
28:51 u can see that the snake goes right through, and the alert isn't triggered before a while. I've also tried it a few times, and it also happened to me sometimes. Maybe if u check if the rows and cols is equal to 0, it will fix the problem. Like this:
if(snakeX=rows*blocksize){
gameOver = true
alert("Game Over")
}
Idk if this is the best way to do it, but it worked for me :)
Amazing video btw, keep up the great work! Helped me a lot!
Hey, I'm learning through this tutorial myself, and everything seems good but when I implement the overlap game over condition, it tirggers when the snake eats the the food. I've been checking the video and even copypasted fragments of your code from the link in your description, and I'm still getting the same trigger. can anyone help?
Its very helpful, I will try to make it again with the help of your video but some parts were a bit hard for me.
With this version the food can spawn on top of the snake to prevent that just make an array with every tile and pop them if it is a snake segment and then choose a random position from the array like so
let spawnable = [];
for (let i = 0; i < row; i++) {
for(let j = 0; j < row; j++){
spawnable.push([i,j]);//adds every tile to an array i is row and j is the col
}
}
for(let i = 0; i < snakeSegments.length; i++){
let index = spawnable.indexOf([snakeSegments[i].x,snakeSegments[i].y]);
if (index!= -1){
spawnable.slice(index,index);// removes the spawnblock if there is a snake segment
}
}
let randomPos = Math.floor(Math.random()*(spawnable.length));
pebbleY= spawnable[randomPos][0];//o is the row
pebbleY = spawnable[randomPos][1];//1 is the col
thank you, badly need this! how can i add a new segment of the snake or a tail like 5 blocks length?
for some reason when i make the game overs, it doesnt work and dosent show the alert. it also stops the gameplay when i eat a apple
Feel free to compare the code in the GitHub link in the video description to see if you made any errors
either my snake or my apple aren't on the 'grid'. What i mean is that when they meet they dont fully overlap. I cant see any errors in my code and this is keeping me from progressing, any ideas?
NVM, i solved it
for anyone wondering i misused the math.floor func
Hey bro, I hope you're having good day. I've got a problem, I've written these codes as you did but when I finished I couldn't run the game. So How can I run the game or simply check if it's working?
for the javas script can you please tell me whats wrong as i cant seem to make the canvas yet?
var blockSize = 25;
var rows = 20;
var cols = 50;
var board;
var context;
window.onload = function (){
board=getElementByID("board")
board.height = rows * blockSize;
board.width= cols * blockSize;
context=board.getcontext("2d");
update()
{
function update()
context.fillstyle=("black";
context.fillRect(0,0,boardwidth,boardheight);
}
there should be a canvas tag with the id "board" in your html
Je n'arrive pas à faire le canvas car lorsque je visualise je trouve uniquement le titre or j'ai bien relié mes pages
Hay I was working though it and fallowing along step by step but I couldn't get the black box to show up I ran the code though code validator and it came back clean I checked the code again and the variable tab is highlighted in red is there anything I can do?
Did you link your JS file to your HTML? Make sure there’s no typos and you’re following the exact steps.
Great job sir love❤❤❤ ❤❤❤❤ from 🇮🇳🇮🇳🇮🇳🇮🇳🇮🇳🇮🇳🇮🇳 india
wow your clear explanation pushes me to subscribe this channel with out doubt thanks bro keep making this kind of bunches🥰😍😍🥰
Please help me I can't reproduce this, to visualize I have to be online?
Thank you, now i have snake game in my pc :D
great job !!
but there is one little bug when you go to the left or up out of bounds u get the alert of game over directly but if you go right or down you only get it after a while
you can go out of bounds to the right and go back to the map quickly and then you get the alert.
can you tell me why that happens and how to fix it if possible :D ?
nvm i fixed it when you are doing the conditions of the bounds instead of (snakeX> cols * blocksize || snakeY > rows * blocksize) you write (snakeX == cols * blocksize || snakeY == rows * blocksize) so that when u touch the bounds you instantly get the alert
🎉extreamly addictive ❤ its awsome
Can anyone help me? In the start the snake is a slightly not on 0 0 and when it goes to the food it goes next to it by a pixel and cant sensor it ,what can be wrong pls help
sir code not working . why
Ahh .... .
JavaScript code isn't working I linked it also but still code isn't running
Help!!!
what if i want to change the head of the snake to a little darker shade of green but the body will remain lime...how can i do that???
You can look up a list of hardcoded colors, ex) Color.green. Or you can look up how to use a color based rgb values in JavaScript.
HI, thanks for the video, but is there any way to make the game run smoother? Like the movement feels a bit slow, so like is there any way to make it smoother, like in the google snake game?
Interpolation
i have a problem, the black box wont appear even if the code is identical to how is shown, can you help me?
Either you missed a step in the code, etc setting context fillStyle to black, or you didn't link your JS file correctly?
brò ?! I followed all steps... but the result shows just only the snake moving up,down and only left... there isn't food.. can u help me to fix that pls ?? Maybe i should install which extension of javascript on visual studio code ??
wait on some your answer brò.. hugs
You might’ve missed a few steps. In the video description, I have the source code, feel free to download and compare that with your code
help Me... my snake is going outside the canvas not around the boundary
hey everything went smoothly untill i wrote the java script, i have checked every line of code and they have been correct but the black screen won show at 10:14 coul anyone help me and say what maybe could be wrong with it thanks(btw it is my first time coding) . and i have saved the file lol.
You probably didn’t link the js file in the html
Can u help me out
What was the mistake?
@@FlyBee07 Here's what I think: in the index.html file, in the section you should have a where snake.js is the name of your javascript file. They also need to be in the same folder and what it does is to tell the page from where to load the scripts.
@@KennyYipCoding still not working
Can u tell which app u use?
Visual studio code for my code editor
can someone please explain to me whats going on at 22:30sec point in the vid. what do the numbers on 2nd brackets of the snakeBody[i] [0], snakeBody[i][ 1 ] mean?
@@POGPlanet-n5h what is snakeBody? It is an array of Snake parts. Each snake part is represented as an array of 2 values [x, y], so it is the x y coordinates of the current part, which is the i-th part of the snake array
if(snakeX < 0 || snakeX > cols * blockSize) {
//snakeX does not change
}
else {
snakeX += velocityX * blockSize;
}
Why does snakeX not stop on edge of the screen?
Because the snake head needs to cross the edge. A player can have the snake touch the edge of the screen and then have the snake switch direction to move along the edge of the screen.
What do you recommend to keep the snake on the screen?
I'm on a steep learning curve for JavaScript. I'd like to know how this could be implemented. What I tried did not work. Thanks for the prompt responses!
If I try loading the game, only the "snake" text appears
You didn’t link the JS or CSS files properly
@@KennyYipCoding i will try again thx for the help
why you still awake at 2:00 AM 💀💀💀
😢😢
Hello there, what is the name of the font that you are using in this video ?
Does anybody know why my canvas turns the color of the food when I start the game? It still happened even when I got rid of the "placefood" function.
_Love from Bangladesh_
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
You could use snakePart = new Image;
snakePart.src=“sample source”;
context.drawImage(snakePart,x,y,width,height);
Hey man, I'm having trouble doing this and i dont know why... at the end of 09:54 you show the black rectangle and in my page it doesn't appear. And i have the css and js linked.
Can you please help me? Thanks!
Make sure you’ve written the code correctly and did not rename or misspell variables. You can also right click inspect to check the console for error loga
@@KennyYipCoding i figured it out, I linked the Js incorrectly :/
Thank you!!
When I add e did exactly why is it not moving @ 15:26
hey , everyting work good till the moving section , idknw why it didn't work , I even tried to copy and paste the source code but it didn't move , only the food ...i guess somthing with velocity or idknw ....any idea to help me please ??
You probably missed a step, the source code should’ve worked. Make sure you added the click handler for the arrow keys for the snake and the variable names are correct
Not working bro and how did the snakehead became green without even mentioning it anywhere...
Hi, at 11:20, I changed the context color to lime (green), and the line after, I drew the square to represent the snake. You can also check out the completed code using the github link in the video description.
You are the best my man!
Thanks i Love the way you explains all that things 😍
You are a genius, greetings from argentina
Thx alot We shall even pray for you
Hi, it was very helpful to me, thanks, how long have you been doing programming ?
Hi, glad you found it helpful. I've been programming for a little over 6 years now!
If I understood it right the snakebody is an array. But I can't figure out how I can modify the starting lenght of the snake. Any tips?
It is an array of X Y coordinates so if you want the snake to start with more segments, you’d have to initialize the array with more [x,y] coordinates for each segment
That is what I have tried but I't has not worked. Could you provide some kind of example line?
really helpful thanks!
Brilliant code
how to fix the food spawning in the snake body;
I when I got to 3:01 it didn't show the "Snake" at the top right of my google page.
Hey, I fixed my problem. Turns out I needed to press the save button lol. Got it all good here!
mine didn't show either, and I saved multiple times
I still don't know where I can get to this page so I can start coding
The program he is using is called Visual Studio Code or VS code for short
how did u put these 2 lines in 27:16
What I can't understand is what does means the [i][0] and [i][1] in this code:
for (let i = 0; i < snakeBody.length; i++) {
context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize)
}
I'm totally begginer, so I would aprecciate if someone could help me. I'm not english speaker. |
I know it's late and you might have got the answer. But for the other people out there, the snakeBody array has small arrays inside of it. Each small array has x and y position of snake.
@@hrithikkedare I want to make the snake 3 blocks long at the start. What is the best way to implement that?
Thank you for this vedio i help me very much
Hey man I’m just tryin ur tutorial (which is very good and clear) I can’t see the black box and I’ve tried all I could do (all I knew how to do) but it didn’t work could ya help me out a lil please😊
You probably didn’t link your css file to your html
ohyup imma idiot lol
Je n'arrive pas à faire le canvas
What is the unit of 25
Good work!!
All the codes were doing perfectly fine untill 26:41 that’s where my when my game over thing popped up I refreshed and it was still there and it wouldn’t return back to normal
Hi, thanks for you make the video, it was really helpful for me 😁👍
my js code randomly stopped working
how can i ran it on my pc?
can you explain the coded?
Thank you!
what program do u use?
You mean where I write my code? It’s called visual studio code
@@KennyYipCoding cool! i use the same. could i ask for your help with something i cant figure out? im making the snake game and there's a problem in my code but idk where.
Whats your issue? You can also add print statements and when you refresh the page, right click -> inspect -> console tab, and check the console log
@@KennyYipCoding umm i got it figured out :) thx
thank you so much
thanks for vid bro
Love from 🇻🇳
thank you bro
hi kenny yip coding can you please give a whole code please
ты крут, очень классное объяснение
Great tutorial thanks
The board is based on 4th quadrant of the xy coordinate system!!!
Just for knowledge
Actually it’s still based on the first quadrant since X goes from 0 to positive infinity and Y goes from 0 to positive infinity. I think you meant that it’s rotated 90 degrees to the right so that it is now located where the 4th quadrant would be.
Great tutorial! thanks
Subscribed! thanks for the help.!
Why doesn't the snake move with me?
Watch the whole video