Coding Snake in JavaScript Complete Tutorial Every Step Explained with HTML5 Canvas -

Coding Snake in JavaScript Complete Tutorial Every Step Explained with HTML5 Canvas

Coding With Adam
Views: 64474
Like: 1514
In this tutorial we will be creating the game snake using JavaScript and HTM5 Canvas. We will explore the game loop, collision detection, taking keyboard input and adding sound. If you enjoy this tutorial please subscribe like and share!

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)


  1. thanks for helping me understand really great help !!!

  2. How can we add a Google Font to the Game Over! text?

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

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


    } else {

    goodPosition = true;



    if (goodPosition) {

    appleX = newAppleX;

    appleY = newAppleY;


    } else {




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

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

  7. broo tysm!! this was magical, you're so underrated!
    new sub 😀

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

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

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

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

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

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

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


  15. thanks! helped me make another snake game

  16. 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 !! 🤷🏽‍♂️

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

  18. how do you make the playable link thats in your discription?

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

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

  21. I liked it a lot! it's so informative and enjoyable, thanks. 🙂

  22. Great video man! Is there a way to reset the game after you lose without refreshing the window?

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

  24. Still kinda confused on how you stored the tails' positions…

  25. You are an amazing mentor! Thank you for this great detailed thorough explanation!

  26. Thank you very much it's rare that I comment in a tutorial session but that was a master piece

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

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

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

  30. Hey, I have a question.
    How can I do a reset button?

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

  32. Your a great teacher thanks this is very helpful

  33. Bro, I love you,. this tutorial is so very well put. thanks man.

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

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

  36. I have a problem with function clearScreen(){

    ctx.fillStyle = 'black';


    } I get Uncaught RangeError: Maximum call stack size exceeded how can I fix?

  37. Thankyou sirr for giving such a clean explaination. i would like to watch more of you tutorials

  38. Why this code is not working for me 😞.

  39. how do i change only the last one color? @Coding With Adam

  40. 😍😍😍🥰🥰😍🤩🤩🤩🤩🤩🤩🤩🤩thank you so much 😘💋

Leave a Reply

Your email address will not be published.