HTML5 game tutorial - Make a snake game using HTML5 canvas and Jquery

@ thecodeplayer

View code Play Walkthrough

Description

Learn to make a simple snake game using HTML5 canvas and Jquery.

X

Related:

• Magnifying glass for image zoom using Jquery and CSS3
• HTML5 Features that you must implement right now
• Snow Effect using HTML5 Canvas and Javascript
• Make a particle system in HTML5 canvas

1. HTML
2. CSS
3. JS

<!-- Lets make a simple snake game -->

<canvas id="canvas" width="450" height="450"></canvas>

<!-- Jquery -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

x

$(document).ready(function(){

    //Canvas stuff

    var canvas = $("#canvas")[0];

    var ctx = canvas.getContext("2d");

    var w = $("#canvas").width();

    var h = $("#canvas").height();

    //Lets save the cell width in a variable for easy control

    var cw = 10;

    var d;

    var food;

    var score;

    //Lets create the snake now

    var snake_array; //an array of cells to make up the snake

    function init()

    {

        d = "right"; //default direction

        create_snake();

        create_food(); //Now we can see the food particle

        //finally lets display the score

        score = 0;

        //Lets move the snake now using a timer which will trigger the paint function

        //every 60ms

        if(typeof game_loop != "undefined") clearInterval(game_loop);

        game_loop = setInterval(paint, 60);

    }

    init();

    function create_snake()

    {

        var length = 5; //Length of the snake

        snake_array = []; //Empty array to start with

        for(var i = length-1; i>=0; i--)

        {

            //This will create a horizontal snake starting from the top left

            snake_array.push({x: i, y:0});

        }

    }

    //Lets create the food now

    function create_food()

    {

        food = {

            x: Math.round(Math.random()*(w-cw)/cw), 

            y: Math.round(Math.random()*(h-cw)/cw), 

        };

        //This will create a cell with x/y between 0-44

        //Because there are 45(450/10) positions accross the rows and columns

    }

    //Lets paint the snake now

    function paint()

    {

        //To avoid the snake trail we need to paint the BG on every frame

        //Lets paint the canvas now

        ctx.fillStyle = "white";

        ctx.fillRect(0, 0, w, h);

        ctx.strokeStyle = "black";

        ctx.strokeRect(0, 0, w, h);

        //The movement code for the snake to come here.

        //The logic is simple

        //Pop out the tail cell and place it infront of the head cell

        var nx = snake_array[0].x;

        var ny = snake_array[0].y;

        //These were the position of the head cell.

        //We will increment it to get the new head position

        //Lets add proper direction based movement now

        if(d == "right") nx++;

        else if(d == "left") nx--;

        else if(d == "up") ny--;

        else if(d == "down") ny++;

        //Lets add the game over clauses now

        //This will restart the game if the snake hits the wall

        //Lets add the code for body collision

        //Now if the head of the snake bumps into its body, the game will restart

        if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))

        {

            //restart game

            init();

            //Lets organize the code a bit now.

            return;

        }

        //Lets write the code to make the snake eat the food

        //The logic is simple

        //If the new head position matches with that of the food,

        //Create a new head instead of moving the tail

        if(nx == food.x && ny == food.y)

        {

            var tail = {x: nx, y: ny};

            score++;

            //Create new food

            create_food();

        }

        else

        {

            var tail = snake_array.pop(); //pops out the last cell

            tail.x = nx; tail.y = ny;

        }

        //The snake can now eat the food.

        snake_array.unshift(tail); //puts back the tail as the first cell

        for(var i = 0; i < snake_array.length; i++)

        {

            var c = snake_array[i];

            //Lets paint 10px wide cells

            paint_cell(c.x, c.y);

        }

        //Lets paint the food

        paint_cell(food.x, food.y);

        //Lets paint the score

        var score_text = "Score: " + score;

        ctx.fillText(score_text, 5, h-5);

    }

    //Lets first create a generic function to paint cells

    function paint_cell(x, y)

    {

        ctx.fillStyle = "blue";

        ctx.fillRect(x*cw, y*cw, cw, cw);

        ctx.strokeStyle = "white";

        ctx.strokeRect(x*cw, y*cw, cw, cw);

    }

    function check_collision(x, y, array)

    {

        //This function will check if the provided x/y coordinates exist

        //in an array of cells or not

        for(var i = 0; i < array.length; i++)

        {

            if(array[i].x == x && array[i].y == y)

             return true;

TheCodePlayer

Learn to Design

Subscribe & unlock secret walkthroughs

5x 10x 15x 20x

Related

53 Comments

Description

• Magnifying glass for image zoom using Jquery and CSS3
  
• HTML5 Features that you must implement right now
  
• Snow Effect using HTML5 Canvas and Javascript
  
• Make a particle system in HTML5 canvas
  
• HTML5 Canvas Experiment: A cool flame/fire effect using particles
  
• Create Binary Trees using Javascript and HTML5 Canvas