Snake Game using Javascript

Submitted by jaredgwapo on Wednesday, January 13, 2016 - 16:36.

Language

In this tutorial, I am going to teach on how to create a snake game in javascript. Just download the source code and follow the instructions below.

DIRECTIONS

HTML Code

<<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
                background-color:#eee;
                
      }
         
    </style>
  </head>
  <body>
 
    <canvas id="myCanvas" width="640" height="640" style="border:1px solid #000000;margin:0px auto;width:800px;"></canvas>
 
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
    </script>
<script src="snake_core.js"></script>
 
 
  </body>
</html>

Javascript Code

window.addEventListener("keydown", moveSnake, false);
var game_over = false;
var snake = new Array(4);
var snakeLen = 4;
var dir = "right";
var food = "";
var level = new Array();
var total_height = 640;
var total_width = 640;
var lvl_width = 20;
var lvl_height = 20;
var speed = 16;
 
snakeHeadImage = new Image();
snakeHeadImage.src = "resources/head.png";
snakeBodyImage = new Image();
snakeBodyImage.src = "resources/body.png";
snakeTailImage = new Image();
snakeTailImage.src = "resources/tail.png";
 
//food
foodImage = new Image();
foodImage.src = "resources/food.png";
 
create_snake();
create_food();
 
for(i = 0; i < lvl_width; i++)
{
        level[i] = new Array(lvl_height);
        for(var ii = 0; ii < lvl_height; ii++)
        {
                level[i][ii] = -1;
        }
}
 
window.requestAnimFrame = (function(callback) 
{
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) 
        {
                window.setTimeout(callback, 1000);
        };
})();
 
 
var the_date = new Date();
var test1 = the_date.getTime();
var stamp = the_date.getTime() + 250;
 
function animate() 
{
        the_date = new Date();
        test1 = the_date.getTime();
        if(stamp <= test1)
        {
                move_snake();
                the_date = new Date();
                stamp = the_date.getTime() + 250;
        }
        if(game_over == false)
        {
                // clear
                context.clearRect(0, 0, canvas.width, canvas.height);
                displayText("Score: " + (snakeLen - 4));
                display();
        }
        else
        {
                displayText("You so Sux.. Game Over homie");
        }
        //context.drawImage(aniblock, aniblock_x, aniblock_y); 
 
        // request new frame
        requestAnimFrame(function()
        {
          animate();
        });
} 
 
function displayText(what)
{
        context.font = "30px Arial";
        context.fillText(what, 50, 50);
}
 
function checkSnakeCollide()
{
        if( snake[0].xx == food.xx && snake[0].yy == food.yy )
        {
                create_food();
                return true;
        }
        else
        {
                //if head moving right
                if(dir == "right")
                {
                        if(snake[0].xx > lvl_width - 1)
                        {
                                game_over = true;
                        }
                }
                else if(dir == "left")
                {
                        if(snake[0].xx < 0)
                        {
                                game_over = true;
                        }
                }
                else if(dir == "up")
                {
                        if(snake[0].yy <= -1)
                        {
                                game_over = true;
                        }
                }
                else if(dir = "down")
                {
                        if(snake[0].yy >= lvl_height)
                        {
                                game_over = true;
                        }
                }
                
                for(i = 2; i < snakeLen; i++)
                {
                        if( (snake[0].xx == snake[i].xx) && (snake[0].yy == snake[i].yy) )
                        {
                                game_over = true;
                                break;
                        }
                }
                
                return false;
        }
}
 
setTimeout(function() {
animate();
}, 1000);
 
function moveSnake(e) 
{
    switch(e.keyCode) 
        {
        case 37:
                        if(dir != "right")
                        {
                                dir = "left";
                        }
            break;
                case 38:
                        if(dir != "down")
                        {
                                dir = "up";
                        }
                        break;
        case 39:
                        if(dir != "left")
                        {
                                dir = "right"; 
                        }                       
                        break;
        case 40:
                        if(dir != "up")
                        {
                                dir = "down";
                        }
            break;  
    }   
}
 
function checkAllowMove(x, y)
{
        if(x < 32)
        {
                var x_index = 0;
        }
        else
        {
                var x_index = Math.round(x / 32);
        }
        
        if(y < 32)
        {
                var y_index = 19;
        }
        else
        {
                var y_index = (total_height / 32) - Math.round(y / 32);
        }
        
        if(level[x_index][y_index] == -1)
        {
                return true;
        }
        else
        {
                return false;
        }
}
 
function create_food()
{
        var x = 0;
        var y = 0;
        var recreate = false;
        do
        {
                recreate = false;
                x =  Math.floor((Math.random() * (lvl_width-1)));
                y =  Math.floor((Math.random() * (lvl_height-1)));
                
                for(i = 0; i < snakeLen; i++)
                {
                        if( (snake[i].xx == x) && (snake[i].yy == y) )
                        {
                                recreate = true;
                                break;
                        }
                }
        }while(recreate == true);
        food = {xx: x, yy: y};
}
 
function create_snake()
{
        //var x =  Math.floor((Math.random() * (lvl_width-1)));
        //var y =  Math.floor((Math.random() * (lvl_height-1)));
        snake[0] = {xx: 4, yy: 1};
        snake[1] = {xx: 3, yy: 1};
        snake[2] = {xx: 2, yy: 1};
        snake[3] = {xx: 1, yy: 1};
        dir = "right";
}
 
function move_snake()
{
        var temp_x = 0;
        var temp_y = 0;
        var temp_xx = 0;
        var temp_yy = 0;
        var swap = true;
 
        //move snake forward
        for(var ii = 0; ii < snakeLen; ii++)
        {               
                if(ii == 0)
                {
                        temp_x = snake[ii].xx;
                        temp_y = snake[ii].yy;
 
                        //if head moving right
                        if(dir == "right")
                        {
                                snake[0] = {xx: (snake[0].xx + 1), yy: snake[0].yy};
                        }
                        else if(dir == "left")
                        {
                                snake[0] = {xx: (snake[0].xx - 1), yy: snake[0].yy};
                        }
                        else if(dir == "up")
                        {
                                snake[0] = {xx: snake[0].xx, yy: (snake[0].yy - 1)};
                        }
                        else if(dir = "down")
                        {
                                snake[0] = {xx: snake[0].xx, yy: (snake[0].yy + 1)};
                        }
                        
                        if(checkSnakeCollide())
                        {
                                snake.push({xx: snake[(snake.length-1)].xx, yy: snake[(snake.length-1)].yy});
                                snakeLen++;
                        }
                }
                else
                {
                        if(swap == true)
                        {
                                temp_xx = snake[ii].xx;
                                temp_yy = snake[ii].yy;
                                snake[ii] = {xx: temp_x, yy: temp_y};
 
                                swap = false;
                        }
                        else
                        {
                                temp_x = snake[ii].xx;
                                temp_y = snake[ii].yy;
                                snake[ii] = {xx: temp_xx, yy: temp_yy};
                                swap = true;
                        }
                }
        }
 
}
 
function display()
{
        
        for(var i = 0; i < snakeLen; i++)
        {
                if(i == 0)
                {
                        switch (dir)
                        {
                                case "left":
                                        context.drawImage(snakeHeadImage, (snake[i].xx * 32), (snake[i].yy * 32) ); 
                                        break;
                                case "right":
                                        drawRotatedImage(snakeHeadImage,(snake[i].xx * 32), (snake[i].yy * 32), 180);
                                        break;
                                case "up":
                                        drawRotatedImage(snakeHeadImage,(snake[i].xx * 32), (snake[i].yy * 32), 90);
                                        break;
                                case "down":
                                        drawRotatedImage(snakeHeadImage,(snake[i].xx * 32), (snake[i].yy * 32), 270);
                                        break;
                        }
                }
                else if(i == (snakeLen - 1) )
                {
                        //following left
                        if(snake[i].xx > snake[i-1].xx)
                        {
                                context.drawImage(snakeTailImage, (snake[i].xx * 32), (snake[i].yy * 32) ); 
                        }
                        //following right
                        else if(snake[i].xx < snake[i-1].xx)
                        {
                                drawRotatedImage(snakeTailImage,(snake[i].xx * 32), (snake[i].yy * 32), 180);
                        }
                        //following up
                        else if(snake[i].yy > snake[i-1].yy)
                        {
                                drawRotatedImage(snakeTailImage,(snake[i].xx * 32), (snake[i].yy * 32), 90);
                        }
                        //following down
                        else if(snake[i].yy < snake[i-1].yy)
                        {
                                drawRotatedImage(snakeTailImage,(snake[i].xx * 32), (snake[i].yy * 32), 270);
                        }
                }
                else
                {
                        context.drawImage(snakeBodyImage, (snake[i].xx * 32), (snake[i].yy * 32) ); 
                }
 
        }
        
        context.drawImage(foodImage, (food.xx * 32), (food.yy * 32) ); 
 
}
 
function drawRotatedImage(image, x, y, angle) 
{ 
        var TO_RADIANS = Math.PI/180; 
 
        // save the current co-ordinate system 
        // before we screw with it
        context.save(); 
 
        // move to the middle of where we want to draw our image
        context.translate(x, y);
 
        // rotate around that point, converting our 
        // angle from degrees to radians 
        context.rotate(angle * TO_RADIANS);
 
        // draw it up and to the left by half the width
        // and height of the image 
        context.drawImage(image, -(image.width/2), -(image.height/2));
 
        // and restore the co-ords to how they were when we began
        context.restore(); 
}

If you have any questions and suggestions just comment below or email me at [email protected]. Hope this simple project will help to in your systems or projects.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

353 views