Sunday, December 3, 2017

Skptricks html5 jquery Create A Classic Snake Game Using HTML5 and JQuery

Create A Classic Snake Game Using HTML5 and JQuery

by on December 03, 2017 in ,
Today's Post we are going to share a code related to A Classic Snake Game. we have implemented this using HTML5 and JQuery.

html5-snake-game

Lets see the complete example of Snake Game :
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>

video demo :


Lets play and enjoy the Classic Snake Game.

output :

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/snake%20game

By at
Tags: ,

1 comment:

  1. Richard C. LambertMarch 12, 2019 at 1:09 PM

    I was surfing net and fortunately came across this site and found very interesting stuff here. Its really fun to read. I enjoyed a lot. Thanks for sharing this wonderful information. addicting games

    ReplyDelete

Subscribe to: Post Comments (Atom)