Here's another simple game using HTML5 and Javascript.
The following are the requirements of the game:
Read more ...
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. :/
