Search Topic Here

Thursday, 26 June 2014

Design snake game with javascript

Code for snake game with  javascript:


<!doctype html>
<html>
<head>
<meta charset=UTF-8">
<meta name="description" content="Snake Game using HTML5 Canvas">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<title>Snake Game</title>
<style>
</style>
<script>

$(document).ready(function(){
var canvas = $("#canvas")[0];
var Context = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();
var GameOver = $("audio#GameOver").get(0);
var GamePlay = $("audio#GamePlay").get(0);
var SnakeEating = $("audio#SnakeFood").get(0);
var cw = 10;
var direction;
var food;
var score;
var SnakeArray; 
$("button#play").hide();
$("button#Soundoff").hide();
function init()
{
if (GamePlay.paused)
         GamePlay.play();
direction = "right";
create_snake();
create_food();
score = 0;
Speed =100;
play();
}
function play()
{
   if(typeof game_loop != "undefined") clearInterval(game_loop);
game_loop = setInterval(paint, Speed);
allowPressKeys = true;
$("button#Soundoff").removeAttr('disabled');
$("button#SoundOn").removeAttr('disabled');

}
function pause()
{
clearInterval(game_loop);
allowPressKeys = false;
$("button#Soundoff").attr('disabled','disabled');
$("button#SoundOn").attr('disabled','disabled');
}
init();
function create_snake()
{
var length = 3; 
SnakeArray = [];
for(var i = length-1; i>=0; i--)
{
SnakeArray.push({x: i, y:0});
}
}

function create_food()
{
food = {
x: Math.round(Math.random()*(w-cw)/cw), 
y: Math.round(Math.random()*(h-cw)/cw), 
};
}

function paint()
{
YourScore="Your Score is: "+score;
   $("p#Score").html(YourScore);
Context.fillStyle = "blue";
Context.fillRect(0, 0, w, h);
Context.strokeStyle = "red";
Context.strokeRect(0, 0, w, h);
  var nx = SnakeArray[0].x;
var ny = SnakeArray[0].y;
if(direction == "right") nx++;
else if(direction == "left") nx--;
else if(direction == "up") ny--;
else if(direction == "down") ny++;
if(nx == -1 )
{
nx=w/cw-1;
}else if (nx==w/cw)
{
nx=0;
}
if(ny == -1)
{
ny=h/cw-1;
}
else if (ny == h/cw)
{
ny=0;
}

if(Ouroboros_Check(nx, ny, SnakeArray))
{
pause();
GamePlay.pause();
if(GameOver.paused)
 GameOver.play();
 alert("Game Over- Your Score : "+score);
 init();
 return;
}
if(nx == food.x && ny == food.y)
{
SnakeEating.play();
var tail = {x: nx, y: ny};
score++;
create_food();

}
else
{
var tail = SnakeArray.pop();
tail.x = nx; tail.y = ny;
}
SnakeArray.unshift(tail); 
for(var i = 0; i < SnakeArray.length; i++)
{
var c = SnakeArray[i];
paint_cell(c.x, c.y);
}
paint_cell(food.x, food.y);
}

function paint_cell(x, y)
{
Context.fillStyle = "white";
Context.fillRect(x*cw, y*cw, cw, cw);
Context.strokeStyle = "white";
Context.strokeRect(x*cw, y*cw, cw, cw);
}

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

$("button#pause").click(function(){
$("button#pause").hide();
GamePlay.pause();
pause();
$("button#play").show();
});

$("button#Soundoff").click(function(){
$("button#Soundoff").hide();
GamePlay.play();
$("button#SoundOn").show();
});

$("button#SoundOn").click(function(){
$("button#SoundOn").hide();
GamePlay.pause();
$("button#Soundoff").show();
});

$("button#play").click(function(){
$("button#play").hide();
play();
GamePlay.play();
$("button#pause").show();
});

//Lets add the keyboard controls now
$(document).keydown(function(e){
if (!allowPressKeys){
    return null;
  }
var key = e.which;
switch(key)
{
case 37:
if(direction!="right") direction="left";
break;
case 38:
if(direction!="down") direction="up";
break;
case 39:
if(direction!="left") direction="right";
break;
case 40:
if(direction!="up") direction="down";
break;
default: 
         break;
}
})







})
</script>
</head>
<body align="center">
<h1>Snake Game</h1>
<canvas id="canvas" width="500" height="300">OOPS.. Upgrade your Browser</canvas>
<audio id="GamePlay" loop="loop" autoplay="autoplay">       
            <source src="GameGng.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
<audio id="GameOver">       
            <source src="GameOver.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
<audio id="SnakeFood">       
            <source src="SnakeEating.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
<br/>
<strong><p id="Score"></p></strong>
<button id="pause"><img src="pause.jpg" alt="Pause"/></button>
<button id="play"><img src="Play.jpg" alt="Play"/></button>
<button id="Soundoff"><img src="SoundsOff.jpg" alt="SoundOFF"/></button>
<button id="SoundOn"><img src="SoundsOn.jpg" alt="SoundON"/></button>
</body>

OUTPUT: Snake Game

Snake Game

OOPS.. Upgrade your Browser


No comments:

Post a Comment