Coding Snake in JavaScript Complete Tutorial Every Step Explained with HTML5 Canvas
If you haven’t played snake let me give you the breakdown of this version of snake. You the player move around a line aka the snake as you eat various items your snake body gets longer. The objective is to keep eating the red dot and avoid hitting your own snake body or the edges of the screen if you do it’s game over. It’s your basic last as long as you can game and get the highest score using your quick reflexes.
Through this tutorial you will learn about adding audio. Every time our snake eats the apple he makes a gulp sound!
We will learn about collision detection by detecting when the snake eats an apple, hits the edge of the screen or collides with another part of its body.
We will take keyboard input to decide the direction our snake moves in.
Lastly we will add text to the canvas by implementing a game over screen and displaying a score that increments as you eat apples
Snake GitHub source code
Playable version of snake from tutorial (use arrow keys to move)
Alternate version of snake from GitGub user jeremystone4321 (use WASD keys to move)
Uncaught SyntaxError: Unexpected token '<' why?
thanks for helping me understand really great help !!!
How can we add a Google Font to the Game Over! text?
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 🙂
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();
}
}
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
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
broo tysm!! this was magical, you're so underrated!
new sub 😀
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?
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 <3
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?
programme name ?
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?
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!
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).
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)
}
thanks! helped me make another snake game
How do you add a sound file?
that colision detection implementation is way too weak… because if you set the head's x and y position on the exact same x and y position of the Apple then it's almost impossible to hit the apple… if you set both head and apple on the exact same coordinates then the game will be malfunctioning.. because you'll only be able to hit the apple once in a while…when it should hit it as soon as they head touches any side or corner of the Apple from any angle… that's exactly the algorithm that I'm working on and it's making me fucking insane and stressed because all algorithm combinations that I try always fail, always have a malfunction when approaching the apple…. if it was like in python pygame it would be very easy to develop a colision detection but in Javascript it's all 'manual' there's not a built-in function in the canvas api for that functionality and it's burning my fucking brainzzz 🧠 🔥 🔥 🔥 … and I hate it !! 🤷🏽♂️
cant get the snake to appear
great tutorial, thanks a lot bro
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
how do you make the playable link thats in your discription?
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.
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 liked it a lot! it's so informative and enjoyable, thanks. 🙂
Great video man! Is there a way to reset the game after you lose without refreshing the window?
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.
Still kinda confused on how you stored the tails' positions…
You are an amazing mentor! Thank you for this great detailed thorough explanation!
Thank you very much it's rare that I comment in a tutorial session but that was a master piece
Bro can you send me code
Because was not working
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
tanks
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!
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.
why tailLength++ doesn't work ?
Hey, I have a question.
How can I do a reset button?
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!
Your a great teacher thanks this is very helpful
I am getting a error 🙁 good tutorial though.
Bro, I love you,. this tutorial is so very well put. thanks man.
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 !
why not head { x: 0, y: 0 } and use head.x and head.y ?
edit: seems you thought about the same thing, even said "head.x"
also, save space —
kc = event.keyCode;
Velocity.y = kc == 38 ? Velocity.y == 0 ? -1 : Velocity.y : kc == 40 ? Velocity.y == 0 ? 1 : Velocity.y : Velocity.y;
Velocity.x = Velocity.y != 0 ? : 0 : Velocity.x;
Velocity.x = kc == 37 ? Velocity.x == 0 ? -1 : Velocity.x : kc == 39 ? Velocity.x == 0 ? 1 : Velocity.x : Velocity.x;
Velocity.y = Velocity.x != 0 ? 0 : Velocity.y;
or if you want it to be readable:
const keys {
up: 38,
down: 40,
left: 37,
right: 39
};
//…
Velocity.y = kc == keys.up ? Velocity.y == 0 ? -1 : Velocity.y : kc == keys.down ? Velocity.y == 0 ? 1 : Velocity.y : Velocity.y;
Velocity.x = Velocity.y != 0 ? : 0 : Velocity.x;
Velocity.x = kc == keys.left ? Velocity.x == 0 ? -1 : Velocity.x : kc == keys.right ? Velocity.x == 0 ? 1 : Velocity.x : Velocity.x;
Velocity.y = Velocity.x != 0 ? 0 : Velocity.y;
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?
Thankyou sirr for giving such a clean explaination. i would like to watch more of you tutorials
Why this code is not working for me 😞.
Dziękujemy.
how do i change only the last one color? @Coding With Adam
24:45 Appel Collision