game.html

<!DOCTYPE html> <html> <head> <title> Snake Game </title> <link rel= "stylesheet" href= "snake.css" > <!-- jQuery --> <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type= "text/javascript" ></script> <style> #container { margin: auto; width: 600px; } #myCanvas { background-color: #000000; border: 3px red solid; } #gameover { position : absolute; top: 200px; left: 600px; font-size: 25px; text-align: center; color: #FFFFFF; display: none; } #score { width: 600px; height: 100px; margin: auto; background-color: grey; } #current, #highest { font-size : 25px; color: black; text-align: center; } a { text-decoration: none; color : #FFFFFF; } span { color : #FFFFFF; } </style> <script> $(document).ready(function() { var canvas = $( "#myCanvas" )[0]; var ctx = canvas.getContext( "2d" ); var w = $( "#myCanvas" ).width(); var h = $( "#myCanvas" ).height(); var cw = 15; var food; var snake; var d = "RIGHT" ; var gameloop = setInterval(update, 100); function update() { if (d == "RIGHT" ) snake.x = snake.x + 1; else if (d == "LEFT" ) snake.x = snake.x - 1; else if (d == "UP" ) snake.y = snake.y - 1; else if (d == "DOWN" ) snake.y = snake.y + 1; check_borders(); check_food(); blank(); paint_cell(food.x, food.y, "grey" ); paint_cell(snake.x, snake.y, "green" ); } function showGameOver() { var current = $( '#current' ).text(); $( '#final' ).text(current); $( '#gameover' ).fadeIn(); } function updateHighScore() { var current = $( "#current" ).text(); var highest = $( "#highest" ).text(); if (parseInt(current) > parseInt(highest)) { $( '#highest' ).text(current) } } function placeFood() { food = { x : Math.round(Math.random()*(w-cw)/cw), y : Math.round(Math.random()*(h-cw)/cw) } } function placeSnake() { snake = { x : Math.round(Math.random()*(w-cw)/cw), y : Math.round(Math.random()*(h-cw)/cw) } } function blank() { //Paint The Canvas ctx.fillStyle = "black" ; ctx.fillRect(0, 0, w, h); ctx.strokeStyle = "white" ; ctx.strokeRect(0, 0, w, h); } function check_borders() { if (snake.x < 0 || snake.x > (w-cw)/cw || snake.y < 0 || snake.y > (h-cw)/cw) { clearInterval(gameloop); showGameOver(); } } function paint_cell(x,y, color) { ctx.fillStyle=color; ctx.fillRect(x*cw,y*cw,cw,cw); ctx.strokeStyle= "white" ; ctx.strokeRect(x*cw,y*cw,cw,cw); } function check_food() { if (food.x == snake.x && food.y == snake.y) { var current = parseInt($( '#current' ).text()); current += 1; $( '#current' ).text(current); placeFood(); } } placeFood(); paint_cell(food.x, food.y, "grey" ); placeSnake(); paint_cell(snake.x, snake.y, "green" ); //Keyboard Controller $(document).keydown(function(e) { //39: RIGHT //37: LEFT //38: UP //40: DOWN var key = e.which; if (key == "37" ) { snake.x -= 1; d = "LEFT" ; } else if (key == "38" ) { snake.y -= 1; d = "UP" ; } else if (key == "39" ) { snake.x += 1; d = "RIGHT" ; } else if (key == "40" ) { snake.y += 1; d = "DOWN" ; } check_food(); blank(); color = "grey" ; paint_cell(food.x, food.y); color = "green" ; paint_cell(snake.x, snake.y); } ); } ); </script> </head> <body> <div id= "container" > <div id= "gameover" > Game over! <br> Your score is <span id= "final" ></span> <br> <a onClick= "window.location.reload()" href= "#" >Click To Play Again</a> </div> <canvas id= "myCanvas" width= "600" height= "450" > Your browser does not support the canvas feature </canvas> <div id= "score" > <div>Current Score:<span id= "current" >0</span> </div> <div>High Score:<span id= "highest" >3</span> </div> </div> </div> </body> </html>

Today's Post we are going to share a code related to. we have implemented this using HTML5 and JQuery.Lets see the completevideo demo :Lets play and enjoy the Classic Snake Game.