D4mations.com

Snake Game Using JavaScript



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

d4mer

, , , , , , , ,

45 responses to “Snake Game Using JavaScript”

  2. @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

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

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

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

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

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

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

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

Leave a Reply