jQuery: Simple Click Game with Interval

Mar 12, 2014
Here's another simple game using HTML5 and Javascript.

The following are the requirements of the game:

  • The game starts when the "ENTER" key is pressed.
  • A "monster" will be displayed in random location of the canvas per set milliseconds.
  • Hit - when the monster is clicked.
  • Miss - when the monster is missed - only during click
  • Monster turns yellow when hit.
  • Monster turns red when hit.
  • The game is over when there are already five (5) misses.
  • The top score is recorded - this will reset on every page load, though.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
 
 <canvas id="canvas" width="450" height="450"></canvas>
 <script src="pop.js" type="text/javascript"></script>
</body>
</html>

pop.js
$(document).ready(function()
{
 // canvas
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var w = canvas.width;
 var h = canvas.height;
 
 // monster
 var locX;
 var locY;
 var monsterSize = 50;
 var monSpaceX; // space occupied by monster in X
 var monSpaceY; // space occupied by monster in Y
 
 // colors
 var bgColor = "white";
 var strokeColor = "black";
 var monsterColor = "blue";
 var monsterHitColor;
 
 // other variables
 var text; // label on canvas
 var topScore = 0;
 var topText;
 var hitScore; // number of hits
 var isHit;
 var missLimit;
 var interval;
 var msec = 700;
 var play; // game is ongoing
 
 init();
 
 // ** ----- FUNCTIONS ----- **
 
 // initialize
 function init()
 {
  // initialize variables
  hitScore = 0;
  missScore = 0;
  missLimit = 5;
  text = "Click ENTER key to play.";
  topText = "Top Score: " + topScore;
  play = false;
  window.clearInterval(interval);
  
  // draw canvas
        paintCanvas();
 }
 
 // draw canvas
 function paintCanvas()
 {
  // format canvas by setting BG color and border
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, w, h);
  ctx.strokeStyle = strokeColor;
  ctx.strokeRect(0, 0, w, h); 
  
  setLabel();
 }
 
 // draw monster
 function placeMonster()
 {
  // set score label
  text = "Score: " + hitScore + "; Chance left: " + missLimit;
  
  setLocation(); // random location
  paintCanvas(); // draw canvas to cover past monsters
    
  // monster
  ctx.fillStyle = monsterColor;
  ctx.fillRect(locX, locY, monsterSize, monsterSize);
  
 }
 
 // paint monster to indicate it is hit or not
 function paintMonsterHit()
 {
  ctx.fillStyle = monsterHitColor;
        ctx.fillRect(locX, locY, monsterSize, monsterSize); 
 }
 
 // place label on canvas
 function setLabel()
 {
  // set top score label above
  ctx.fillStyle = strokeColor;
  ctx.fillText(topText, 5, 10);
  
  // set label below
  ctx.fillStyle = strokeColor;
  ctx.fillText(text, 5, h - 5);
 }
 
 // randomly generate location to where monster will be placed
 function setLocation()
 {
  locX = Math.floor((Math.random() * (w - monsterSize)) + 0);
  locY = Math.floor((Math.random() * (h -monsterSize)) + 0);
  
  getMonsterSpace();
 }
 
 // get the coordinates of the space occupied by monster
 function getMonsterSpace()
 {
  monSpaceX = locX + monsterSize;
  monSpaceY = locY + monsterSize;
 }
 
 // check if monster is hit or missed
 function isMonsterHit()
 {
  if(isHit)
   hitScore++;
  else
   missLimit--;
 }
 
 // check if game is over or not
 function checkGameOver()
 {
  if(missLimit == 0)
  {
   alert('Game Over. Score: ' + hitScore);
   if(hitScore > topScore)
   {
    alert('Congratulations! New Top Score!');
    topScore = hitScore;
   }
   init();
  }
 }
 
 // ** ----- EVENTS ----- **
 
 $(document).click(function()
 {
  if(play)
  {
   if(event.x >= locX && event.x <= monSpaceX && event.y >= locY && event.y <= monSpaceY)
   {
    monsterHitColor = "yellow";
    isHit = true;
   }
   else
   {
    monsterHitColor = "red";
    isHit = false;
   }
   
   paintMonsterHit();
   isMonsterHit();
   checkGameOver(); // check if game is over
  }
 });
 
 $(document).keydown(function(e)
 {
  if(!play)
  {
   var key = e.which;
   
   if(key == '13')
   {
    interval = window.setInterval(placeMonster, msec);
    play = true;
   }
  }
 });
 
});

Improvements in the future:
  • A miss should also be counted when user fails to do a click every time a monster appears.
  • Use image for monster.
NOTE: Only works for Google Chrome. :/

No comments:

Post a Comment