Ajax Loader
×

Classic Snake Game with HTML5 Canvas

This is the classic 8-bit snake game created using HTML5. This game also includes some 8-bit music and sounds while maintaining the old classic fun. Here are some of the features of the game:

  1. 8 Bit graphics just like the classic one.
  2. Speed of the snake increases as you progress.
  3. Classic 8-Bit Retro Music.
  4. Easy to lean, hard to master!
  5. You can tweet your score and let the world know about your accomplishment. :D

This game has all the features that of a classic Snake game. The only difference is that it is created using HTML5. It will work in all the browsers except IE8 and below but works best in Chrome and Safari. Now talking about the development, the game's logic is pretty simple. To make the snake move, I just had to pop the tail and put it in front of the head. I took this idea from the awesome tutorial on The Code Player. Here's the code segment for the main logic:

//Get the position of the head of the snake
var head_x = snake[0].x;
var head_y = snake[0].y;

//Move snake
var tail = snake.pop();
tail.x = head_x;
tail.y = head_y;
snake.unshift(tail);

After creating the basic game, I added sounds and music to it. Then created a basic preloader so that all the sounds and music gets loaded before you start the game. The logic for the preloader is also very simple. Here's how I did it.

//Preloading audio stuff
var mainMusic = document.getElementById("main_music"),
        foodMusic = document.getElementById("food"), 
        goMusic = document.getElementById("gameOver");

var files = [mainMusic, foodMusic, goMusic];
var counter = 0;

var start = document.getElementById("start"),
        loading = document.getElementById("loading");

for(var i = 0; i < files.length; i++) {
    var file = files[i];
    file.addEventListener("loadeddata", function() {
        counter++;
        var percent = Math.floor((counter/files.length)*100);
        loading.innerHTML = "Loading " + percent + "%";
        if(percent == 100) showButton();
    });
}

function showButton() {
    start.style.top = "30%";
    loading.style.top = "100%";
}

So here, the start button is hidden using CSS and after the loading is finished, it is showed up. Also, the title screen and the game over is created using basic HTML and CSS.

I have made this game to support any resolution so try it out on your computer or tablet. If you find any bugs, then tell me using the comments. Happy snaking! ;)

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

10 Comments

× New

Sign In to comment

Jerick:

oh! the code is not allowed in the comment box :) im sorry

Jerick:

i copy the html code in notepad++ and save it html file the same as for css and js file. and i wrote this

inside the head section. what i've done wrong sir?

Jerick:

i run this codes and nothing happen, only the main screen appear. the loading is not running. how can i run this game? am i do something wrong with your codes? please tell me how to fix my problem! i need it badly :(

kquinn:

Is there any way to add a high score feature?

aneeshtan:

Thanks for the game but it could be hacked easily by injecting to score variable. is there anyway to make it private and immune to injection hack ?

Rishabh :

Download the musics files and get rid of any http links ?

Paul Mountney:

This is a great snake clone. If i were to copy your code into a file of my own, how can i make it work offline, or without the links to the webpages i see in the HTML?

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+