Create A Classic Snake Game Using HTML5 Canvas in 10 Simple Steps

Introduction

These days I'm working on HTML5, so I decided to make some examples using the HTML5 Canvas. The Canvas is one of the best features of HTML5 and you can create beautiful designs using it. In this article, I have tried to make a very old and classy game example that we played many times in our childhood. We used the HTML5 Canvas and a little jQuery to create our "Classic Snake Game".

Step 1: Create a canvas in your application's body and provide its size, whatever you want. Now, here we create a canvas with 600px width and 600px height:

<canvas id="drawCanvas" width="600" height="600"></canvas>

Step 2: In the head section we need to write our jQuery code in a <script> tag. So, now declare some variables for our canvas that we need in our code

var drawCanvas = $("#drawCanvas")[0];
var context = drawCanvas.getContext("2d");
var width = $("#drawCanvas").width();
var height = $("#drawCanvas").height();

Step 3: Now we declare some variables inside our start() method. For some easy control you can save the width of a cell into a variable:

var cell_width = 15;
var defaultRun;
var snake_food;
var userscore;

Now, to create a snake we need to define an array of cells:

var mySnakeArray;

Now to start our game we need a function that helps us to run our game:

function start()

Set the default direction of the snake to go to the right:

defaultRun = "right";

To create our snake's food we need to create a function:

createFood();

And also we need to display our score so we can define a variable for it:

userscore = 0;

To move our snake we can use a timer that will trigger the paintSnake method every 70ms: 

if (typeof game_loop != "undefined") clearInterval(game_loop);
game_loop = setInterval(paintSnake, 70);

Step 4: Now its time to create our Snake using createSnake() method. In this method, we also define the size of our snake and use an empty array to start:

function createSnake() {
     var snakeSize = 6;
     mySnakeArray = [];
     for (var m = 0; m<snakeSize-1;m++) {

This line will create a horizontal snake starting from the middle left. You can change its position by giving the value of x or y:

mySnakeArray.push({ x: 0, y: 20 });

Step 5: Now its time to create some food for our little hungry snake. Here, we used some mathematical functions that will create a cell with x/y between 0-44 because there are 45(450/10) positions across the rows and columns:

function createFood() {
    snake_food = {
        x: Math.round(Math.random() * (width - cell_width) / cell_width),
        y: Math.round(Math.random() * (height - cell_width) / cell_width),
    };
 }

Step 6: After creating our snake we need a paintSnake() method  that paints our snake. We need to paint the Background on every frame to avoid the snake trail:

function paintSnake()

First we need to paint our canvas:

context.fillStyle = "#c0f0aa";
context.fillRect(0, 0, width, height);
context.strokeStyle = "0000ff";
context.strokeRect(0, 0, width, height);

Now we need to move our snake. Here, we use two variables that will pop out the last cell and it will place in front of the head cell:

var pop_x = mySnakeArray[0].x;
var pop_y = mySnakeArray[0].y;

These are the positions of the head cell. We need to increment it to get the new head position of our snake. Now add some proper direction based moment:

if (defaultRun == "right") pop_x++;
else if (defaultRun == "left") pop_x--;
else if (defaultRun == "down") pop_y++;
else if (defaultRun == "up") pop_y--;

Its time to add the game so it will restart our game if our snake hits the wall. Also add the body collision code so that if our snake's head bumps into the body then our game will restart:

if (pop_x == -1 || pop_x == width / cell_width || pop_y == -1 || pop_y == height / cell_width || check_collision(pop_x, pop_y, mySnakeArray)) {

The start() method will restart our game and return helps to organize our code:

     start();
     return;
}

Step 7: Now we need to write some code so that our little hungry snake will eat his food. The logic is very simple if the new head position matches with the food then create a new head instead of moving the snake's tail:

if (pop_x == snake_food.x && pop_y == snake_food.y) {
     var snake_tail = { x: pop_x, y: pop_y };
     userscore++;
     createFood();    //It will create our snakes food.
}
else {
    var snake_tail = mySnakeArray.pop();
    snake_tail.x = pop_x; snake_tail.y = pop_y;
}

Finally our little hungry snake is able to eat his food. Now we need to return the snake's tail to the first cell:

mySnakeArray.unshift(snake_tail);

If you remember, we declared our cell width; we now paint a 15px wide cell using "paintCell(k.x, k.y)". After that we will paint the food & score both:

paintCell(snake_food.x, snake_food.y);
var score_text = "Score: " + userscore;
context.fillText(score_text, width-50, 20);

Step 8: Now create a generic function that will paint cells:

function paintCell(x, y) {
     context.fillStyle = "orange";
     context.fillRect(x * cell_width, y * cell_width, cell_width, cell_width);
     context.strokeStyle = "red";
     context.strokeRect(x * cell_width, y * cell_width, cell_width, cell_width);
 }

Step 9: This is a very important method that will check if the given x/y coordinates exist already in an array of cells or not.

function check_collision(x, y, array) {
    for (var i = 0; i < array.length; i++) {
        if (array[i].x == x && array[i].y == y)
            return true;
    }
    return false;
}

Step 10: In this final step we will add the keyboard controls so that we can control our little snake from our keyboard arrow keys.

$(document).keydown(function (e) {
      var keyInput = e.which;

We will add another clause to prevent reverse gear:

if (keyInput == "40" && defaultRun != "up") defaultRun = "down";
else if (keyInput == "39" && defaultRun != "left") defaultRun = "right";
else if (keyInput == "38" && defaultRun != "down") defaultRun = "up";
else if (keyInput == "37" && defaultRun != "right") defaultRun = "left";

We have created our snake game in just 10 simple steps and now its ready to play. I'm providing the complete code below or you can also download the code from the link above.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="snake.aspx.cs" Inherits="snake" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body {
            margin: 0 auto;
            padding : 0;
        }
    </style>
    <!-- Jquery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            //Canvas stuff
            var drawCanvas = $("#drawCanvas")[0];
            var context = drawCanvas.getContext("2d");
            var width = $("#drawCanvas").width();
            var height = $("#drawCanvas").height();

            var cell_width = 15;
            var defaultRun;
            var snake_food;
            var userscore;
            var mySnakeArray;

           function start() {
                defaultRun = "right";
                createSnake();
                createFood();
                userscore = 0;

                if (typeof game_loop != "undefined") clearInterval(game_loop);
                game_loop = setInterval(paintSnake, 70);
            }
            start();

           function createSnake() {
                var snakeSize = 6;
                mySnakeArray = [];
                for (var m = 0; m<snakeSize-1;m++) {
                    mySnakeArray.push({ x: 0, y: 20 });
                }
            }

            function createFood() {
                snake_food = {
                    x: Math.round(Math.random() * (width - cell_width) / cell_width),
                    y: Math.round(Math.random() * (height - cell_width) / cell_width),
                };
             }

            function paintSnake() {
                context.fillStyle = "#c0f0aa";
                context.fillRect(0, 0, width, height);
                context.strokeStyle = "0000ff";
                context.strokeRect(0, 0, width, height);

                var pop_x = mySnakeArray[0].x;
                var pop_y = mySnakeArray[0].y;

                if (defaultRun == "right") pop_x++;
                else if (defaultRun == "left") pop_x--;
                else if (defaultRun == "down") pop_y++;
                else if (defaultRun == "up") pop_y--;


                 if (pop_x == -1 || pop_x == width / cell_width || pop_y == -1 || pop_y == height / cell_width || check_collision(pop_x, pop_y, mySnakeArray)) {
                     start();
                     return;
                }

                 if (pop_x == snake_food.x && pop_y == snake_food.y) {
                    var snake_tail = { x: pop_x, y: pop_y };
                    userscore++;
                     createFood();
                }
                else {
                    var snake_tail = mySnakeArray.pop();
                    snake_tail.x = pop_x; snake_tail.y = pop_y;
                }

                mySnakeArray.unshift(snake_tail);

                for (var i = 0; i < mySnakeArray.length; i++) {
                    var k = mySnakeArray[i];

                    paintCell(k.x, k.y);
                }


                paintCell(snake_food.x, snake_food.y);

                var score_text = "Score: " + userscore;
                context.fillText(score_text, width-50, 20);
            }

           function paintCell(x, y) {
                context.fillStyle = "orange";
                context.fillRect(x * cell_width, y * cell_width, cell_width, cell_width);
                context.strokeStyle = "red";
                context.strokeRect(x * cell_width, y * cell_width, cell_width, cell_width);
            }

            function check_collision(x, y, array) {
                for (var i = 0; i < array.length; i++) {
                    if (array[i].x == x && array[i].y == y)
                        return true;
                }
                return false;
            }

          $(document).keydown(function (e) {
                var keyInput = e.which;
                if (keyInput == "40" && defaultRun != "up") defaultRun = "down";
                else if (keyInput == "39" && defaultRun != "left") defaultRun = "right";
                else if (keyInput == "38" && defaultRun != "down") defaultRun = "up";
                else if (keyInput == "37" && defaultRun != "right") defaultRun = "left";
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
             <canvas id="drawCanvas" width="550" height="600"></canvas>

        </div>
    </form>
</body>
</html>