• Wednesday , 20 March 2019

Snake Game Using JavaScript

Code Canyon



We will create the Snake game using JavaScript only, means no framework is been used during the tutorial, the tutorial has two parts:

1st part : we understand everything about the game, we discuss things before we code.
2nd part : Type in the Code.

****************************************************************************************
Download the starter template from gitHub, so you can follow the tutorial step by step :
****************************************************************************************

The Game files link : https://github.com/CodeExplainedRepo/Snake-JavaScript

****************************************************
Other Tutorials for games created using JavaScript :
****************************************************

Tetris : https://www.youtube.com/watch?v=HEsAr2Yt2do

Flappy bird : https://www.youtube.com/watch?v=L07i4g-zhDA

*************
Social Media
*************

Facebook : https://web.facebook.com/codeXplained
Twitter : https://twitter.com/code_explained

************
HASHTAGS
************
#JavaScript #Games #JavaScriptGames

Original source

3d Ocean

Related Posts

45 Comments

  1. Alok Kumar
    January 12, 2019 at 01:37

    How to do that without background image?
    Tail is not removing when i have a blank canvas..

  2. Amol Shelake
    January 12, 2019 at 01:37

    @code Explained Thanks ,The task I want to do is when apple generate randomly .and snake ate it . I want to add another fruit ( banana ) on canvas and disable apple fruit at that time. and after eating banana I want to again generate apple ..How can I do this ? please help

  3. Omer Gal
    January 12, 2019 at 01:37

    hii i learn from you a lot! and do some extra tnx 🙂
    https://omergal2.glitch.me/

  4. abdel abdel
    January 12, 2019 at 01:37

    Hi. Like i wrote in the comment section of another video of yours, your tutorials are great!
    I have a question. Do you have knowledge of design patterns? And if so which one should I use? I am planning on rewriting the code using one, but I am new to this so I am a bit stuck.
    Or if anyone of the viewers cares to give some suggestion, the help will be greatly appreciated.

  5. Gaming Sniper
    January 12, 2019 at 01:37

    Please, sir, how do I open the html5 and the javascript tabs?
    in another comment, I saw you advised to download brackets.io and I download it and install it and I still don't get how you opened these two tabs?
    Edit: (to CodeExplained) Sorry for not making myself clear. (Buttons hirt is my other account)

  6. The Gobblegum Sweetner
    January 12, 2019 at 01:37

    Skip Ad

    Who else?

  7. Hicham Faouzi
    January 12, 2019 at 01:37

    My images Wont load. Can Anyone help me. I connected my pages but nothing..

  8. Ustad Ji
    January 12, 2019 at 01:37

    Brilliant For A Newbie Like Me This Is An Easy To Follow Tutorial, Thank You Very Much For Your Effort

  9. Jovan Novakovic
    January 12, 2019 at 01:37

    All of your videos are just pure gold! They should teach us at school like this! You deserve at least 100K subscribers!

  10. kiss of death
    January 12, 2019 at 01:37

    Dude youre si awesome, i jilust wondering if i could change the snake with an png image.. how could we did it?

  11. Vaibhavkumar Patel
    January 12, 2019 at 01:37

    Best Explanation. Fantastic

  12. im probably going to jail
    January 12, 2019 at 01:37

    If your images don't load, add this code to your index.html file:

    <img id="ground" src="img/ground.png" style="display: none;">
    <img id="food" src="img/food.png" style="display: none;">

    Then, replace this:

    const ground = new Image();
    ground.src = "img/ground.png";
    const foodImg = new Image();
    foodImg.src = "img/food.png";

    with this:

    const ground = document.getElementById('ground');
    const food = document.getElementById('food');

    in your snake.js file. It should now work as expected. Good luck!

  13. Devin Simpson
    January 12, 2019 at 01:37

    Does it matter what the names of the files are? I have been running into problems with this project and other javascript projects where all the code is identical except the name of the source file and when I try to load the webpage it is just blank.

  14. Musical Comic 69
    January 12, 2019 at 01:37

    i'm trying to follow the tutorial and using the links but for some reason the files aren't working

  15. Hasnain Malik
    January 12, 2019 at 01:37

    Great Job 👍👍

  16. 3dzbot
    January 12, 2019 at 01:37

    I will wait for your next work! Best of the video!

  17. home alone
    January 12, 2019 at 01:37

    Best Snake game tutorial, I've come across – Great approach to explain visually in advance. With sound to the game. Great concept. Looking forward to seeing more. What I miss with most tutorials that there is no series that build in more features to the fundamental game. Well done!

  18. Ying Ying
    January 12, 2019 at 01:37

    Oh this is a lot of work. Game logics + javascript + massive animations & good presentation. Why people down vote?

  19. eTeTi GaNa
    January 12, 2019 at 01:37

    Awesome video , learned a lot ! Can you make a video about building a user interface in game ( such as new game, scores, exit) ? Keep up with videos, you deserve alot more views/subs !

  20. ME ME
    January 12, 2019 at 01:37

    Does the code work if instead of the green background image, I just use black color?

  21. Techno Logy
    January 12, 2019 at 01:37

    keep going you are doing well

  22. T. ZHF
    January 12, 2019 at 01:37

    So strange, the draw function refreshes but keep old trail positions and score when there's no ground image. Tested and tested again without ground, the snare trail grow and grow again, the new score doesn't replace the older one but is added above. Then just adding a background fixes everything. Strange behaviour to me.

  23. slowloris
    January 12, 2019 at 01:37

    Excellent tutorial. The pace was perfect! To many tutorials explain the basics over and over and just drag on. This was concise, detailed and easy to follow!

  24. Pranat Pannao
    January 12, 2019 at 01:37

    Thank you. Very good.

  25. arthur bryanne
    January 12, 2019 at 01:37

    Can anybody help me fix my prob. My problem is once you open the net it only pops out the background picture but not the snake and i followed the tutorial.

  26. Minh Luân Vũ
    January 12, 2019 at 01:37

    Hello sir, I have one question.
    How can I create 2 snakes with different speed ?
    Thank you.

  27. Aastha Jain
    January 12, 2019 at 01:37

    I followed all the steps. My snake is not moving. Please help.

  28. Aastha Jain
    January 12, 2019 at 01:37

    wowww!! superb explaination.

  29. Alpha Fail
    January 12, 2019 at 01:37

    can i do the whole thing without having background image? and with box = 5px? assuming minor changes in calculations

  30. Alpha Fail
    January 12, 2019 at 01:37

    very nice tutorial for me to grasp…. is there a significance to the value of width and height being 608px? is it having to do with the ground image? any relations? please explain im at a basic level of javascript understanding

  31. Anusa Inthisan
    January 12, 2019 at 01:37

    I don't understand which parts of this program make snake longer

  32. ByClient
    January 12, 2019 at 01:37

    I've never seen a better tutorial than yours. I'm from Germany, but I understood all the code, because you spooke

  33. Unique Channel
    January 12, 2019 at 01:37

    you helped me make my first snake game ….thakyou

  34. Oleg Tzurikov
    January 12, 2019 at 01:37

    Amazing video very detailed! Thank you!

  35. Gary1q2
    January 12, 2019 at 01:37

    this video is so detailed and amazing good job

  36. franz seidenfuss
    January 12, 2019 at 01:37

    good work. Thanks a lot. This cured a lot of headaches. Keep'em coming.

  37. adam dalker
    January 12, 2019 at 01:37

    first sorry for my english
    can you explain why
    snake[0] = {
    x : 9 * box,
    y : 10 * box
    }
    the x is correct i count the box is 9 but the y is not 10 box, it's 8 box?, why can you tell me

  38. Farid Usofi
    January 12, 2019 at 01:37

    Your tutorials are awesome man create a new JavaScript game tutorial about cars racing.
    Good luck 🙂

  39. andre meijer
    January 12, 2019 at 01:37

    Hello and tks for the video.
    I do have a question about the color of the snake.
    Like you can see in the code below:

    c.fillStyle=(i==0)?"yellow":"green";

    What is instead of (i==0) I like to have something like (i=="even numbers")
    So that all even numbers in the Array are getting a yellow color and all odd numbers green.
    Does somebody know where I can look this up or is there some kind of a solution for this problem?

    thank you for reading and have a nice day.

  40. jwengBVG
    January 12, 2019 at 01:37

    does anybody know where i can find the images used to create this game?? Some help would be amazing!!

  41. MarcusD3N
    January 12, 2019 at 01:37

    Hey code explained, I'm not sure if you're still replying to comments but I could really use some help. I've copied the names, files, and code in the .html and .js correctly (at least I think so) however when i open the html in google chrome it opens as a blank page: heres my html code:

    <html>
    <head>

    <title>Snake Game</title>
    </head>
    <canvas id="snake" width="608" height="608"></canvas>
    <script src="snake/snake.js"></script>

    </html>

    Let me know if you need anymore of my code to look at, thanks

  42. Armin b
    January 12, 2019 at 01:37

    this channel deserves more subscribers!

  43. James
    January 12, 2019 at 01:37

    sanke

  44. Omar Farouk
    January 12, 2019 at 01:37

    awesome
    the best tutorial i've seen ever

  45. Emmanuel Prince
    January 12, 2019 at 01:37

    Thanks a whole lot!!

Leave A Comment

You must be logged in to post a comment.