Developing a game using Html and jQuery
Table of Contents
Developing a game using Html and jQuery:
Are you bored of playing games? then come, lets create the html jquery games. Currently we have lot of jQuery plugins to create the html/html5 games using the jQuery
plugins. Today we are going to see the html game development using the gameQuery.js. It’s also an another jQuery plugin for game developments.
Requirements:
jQuery.js
gameQuery.js
Html source Code:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>gameQuery (jQuery Game Engine) – the Mechalchemist</title>
<style type="text/css">
html,body{
background-color: white;
}
a{
color: #FFF;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="jquery.gamequery.js"></script>
<script type="text/javascript" src="mechalchemist.js"></script>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
background-color: white;
}
</style>
</head>
<body>
<center>
<div id="playground" style="width: 600px; height: 600px; background: white;margin-left:30%;">
<!–<div id="board" style="position: absolute; overflow: hidden; top: 20px; left: 20px; width: 360px; height: 480px; background: red;">–>
<div id="welcomeScreen" style="background: url(./startscreen.jpg); width: 600px; height: 600px; position: absolute; z-index: 100;">
<div style="position: absolute; top: 320px; width: 600px; color: white;">
<div id="loadingBar" style="position: relative; left: 100px; height: 15px; width: 0px; background: red;"></div><br />
<center><a style="cursor: pointer;" id="startbutton">Click here to start game!</a></center>
</div>
</div>
</div>
</center>
<div style="width: 350px; text-align:left;height: 100px; color: black; font-size: 13pt;display:block;margin-left:0px;">
<p style="text-align: center">In this game your goal is to clear the screen from as much ore as you can. Over time new ore accumulate to the top of the
screen pushing existing ones to the bottom. When some ore corses the line at the bottom of the screen the game is over. To get rid of the ore you use alchemical
reaction describe by the table on the right. For example if you put two coal side by side it will turn into copper. To play use the left arrow(<-) to move the probe
left, right arrow(->) to move the probe right, the down arrow to take a stone and the up arrow to drop it, at one given time the probe can only contain ore of the same
kind.</p>
</div>
</body>
</html>
[/html]
Imports:
[plain]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="jquery.gamequery.js"></script>
<script type="text/javascript" src="mechalchemist.js"></script>
[/plain]
mechalchemist.js source code [only few parts, for full source code, click the above download link]
Starting the game onclick of start button:
[html]
//initialize the start button
$("#startbutton").click(function(){
$.playground().startGame(function(){
$("#welcomeScreen").remove();
});
})
[/html]
$.playground().startGame is the gamequery jQuery plugin function to initialize the game.
capturing key events: [To move left,right and to take and drop a stone]
[html]
$(document).keydown(function(e){
switch(e.keyCode){
case 37: //this is left! (Left Arrow)
sidemove–;
break;
case 38: //this is up! (Up Arrow)
wanadrop = true;
break;
case 39: //this is right (Right Arrow)
sidemove++;
break;
case 40: //this is down! (Down Arrow)
wanapick = true;
break;
}
[/html]
Note: If you want swipping enabled in mobile devices for probe movements and balls take and drop, then you need to use letter a instead left arrow, d instead of right arrow, w instead of up arrow and s instead of down arrow.
Probe[Container placed at the bottom to take and drop the ball] Actions:
Below are the requirements need to be done for the probe [stone container – Picking and dropping functions]:
1. PROBE_IDLE [Probe/container idle case]
2. PROBE_PICKING [To pick the stone/ball from its current position – when the down arrow pressed]
3. PROBE_PICKED [Once the ball picked, then again it will be moved to the PROBE_IDEL till its next event. Continuation of down arrow press functions]
4. PROBE_DROPING [Dropping the container/prob balls to up playground place – when the up arrow pressed].
5. PROBE_DROPED [When the balls dropped, we need to check whether its out of the limit or can be placed – continuation of up arrow press functions]
[html]
// This state is when the prob is going UP to take a ball
case PROBE_PICKING:
var incremant = 45;
var currentPos = $("#probe").y();
if(currentPos-incremant > pickDestination*60){
$("#probe").y(currentPos-incremant);
} else {
//we reached the ball!
$("#probe").y(pickDestination*60);
$("#"+destination+"-"+pickDestination).remove();
$("#probe").addSprite("pickedBall",{posx: 0, posy: 0, width: spriteWidth, height: spriteHeight, animation: spriteList
[storedColor]})
ballsArray[destination][pickDestination] = null;
storedNumber++;
//we turn all balls of the same color to their "excited state"
if(storedNumber==1){
for(var i=0; i < numberOfColumn; i++){
for(var j=0; j < maxRow-1; j++){
if(ballsArray[i][j]==storedColor){
$("#"+i+"-"+j).setAnimation(animatedSpriteList[storedColor]);
}
}
}
}
gameState = PROBE_PICKED;
}
wanapick=false;
break;
// this state is when the prob is going down from taking a ball
case PROBE_PICKED:
var incremant = 45;
var currentPos = $("#probe").y();
if(currentPos + incremant < 460){
$("#probe").y(currentPos+incremant);
} else {
$("#probe").y(460);
// we add a ball to the container:
$("#pickedBall").remove();
if(storedNumber == 1){
$("#sparkEmpty").remove();
$("#container").addSprite("contained",{posx: 20, posy: 20, width: spriteWidth, height: spriteHeight, animation:
spriteList[storedColor]});
$("#container").addSprite("sparkFull",{ posx: 20, posy: 20, height: 60, width: 59, animation:
containementSparkAnimation});
}
gameState = PROBE_IDLE;
}
break;
//this state is when the prob is going up to drop all the balls it contain
case PROBE_DROPING:
var incremant = 45;
var currentPos = $("#dropBeam").y();
if(currentPos – incremant > pickDestination*spriteHeight+20){
$("#dropBeam").y(currentPos-incremant);
} else {
$("#dropBeam").y(pickDestination*spriteHeight+20);
$("#glowBeam").remove();
gameState = PROBE_DROPED;
}
wanadrop=false;
break;
//this state is when the prob is going down from droping a ball
case PROBE_DROPED:
// does the beam conects a least the right number of
// balls to triger a fusion ?
var result = reduceArray(storedNumber, destination, pickDestination);
if((result.number + storedNumber) > conversionList[storedColor]){
// add the right amount of points to the score
score += (result.number+storedNumber)*pointPerBall;
comboCount++;
// we mark the balls for removing
for(var i=0; i<result.array.length; i++){
for(var j=0; j<result.array[i].length; j++){
if(result.array[i][j]){
ballsToErase[i][j] = true;
}
}
}
//we add the converted one:
if((storedColor+1) < spriteList.length){
ballsArray[destination][pickDestination] = storedColor+1;
$("#board").addSprite(""+destination+"-"+pickDestination, {posx: 20+(spriteWidth*destination), posy:
20+(spriteHeight*pickDestination), height: spriteHeight, width: spriteWidth, animation: spriteList[storedColor+1]});
$("#dropBeam-0").remove();
}
wanaerase = true;
gameState = BEAM_ERASING;
} else {
// if not do we get outside of the limit ?
// then it’s game over
if(pickDestination + storedNumber > maxRow-1){
gameState = GAME_OVER;
$.playground().addSprite("gameover",{posx: 0, posy: 0, animation: gameOverAnimation, width: 600, height: 600});
$("#gameover").append(‘<div style="position: absolute; top: 340px; width: 600px; color: white;"><center><a
style="cursor: pointer;" id="restartbutton">Click here to restart the game!</a></center></div>’);
$("#restartbutton").click(restartGame);
} else {
// we need to get the balls out of the beam
// into the grid
for(var i=0; i<storedNumber; i++){
ballsArray[destination][pickDestination + i] = storedColor;
$("#board").addSprite(""+destination+"-"+(pickDestination + i),{posx: 20+(spriteWidth*destination), posy:
20+(spriteHeight*(pickDestination + i)), height: spriteHeight, width: spriteWidth, animation: spriteList[storedColor]});
}
$("#dropBeam").remove();
gameState = PROBE_IDLE;
}
}
oldstoredNumber = storedNumber;
storedNumber = 0;
break;
[/html]
Playground functions: [to clear and convert the stones/balls to gold/silver/copper/diamond based on the number of matches]
Below are the requirements need to be done for the probe [stone container – Picking and dropping functions]:
1. BEAM_ERASING [To pick the stone/ball from its current position – when the down arrow pressed]
2. BOARD_COLAPSE [Once the balls erased adding the points and re-arranging the balls in the playground area]
3. BOARD_EXPAND [Expanding the playground area based on the new balls].
4. BOARD_ERASING [wanaerase=true then number of columns and rows values will be retrieved]
[html]
case BEAM_ERASING:
// Does the earsing begins ?
if(wanaerase){
for(var i=0; i < numberOfColumn; i++){
for(var j=0; j < maxRow; j++){
if(ballsToErase[i][j]){
$("#"+i+"-"+j).setAnimation(eraseAnimation);
}
}
}
if((storedColor+1) == spriteList.length){
$("#dropBeam-0").setAnimation(eraseAnimation);
}
for(var i=1; i < oldstoredNumber; i++){
$("#dropBeam-"+i).setAnimation(eraseAnimation);
}
wanaerase = false;
setTimeout("timedEarse()", eraseTimeout);
}
//cheack for the erasing timeout
if(eraseTimedout){
for(var i=0; i < numberOfColumn; i++){
for(var j=0; j < maxRow; j++){
if(ballsToErase[i][j]){
// we erase this ball
$("#"+i+"-"+j).remove();
ballsArray[i][j] = null;
ballsToErase[i][j] = false;
}
}
}
$("#dropBeam").remove();
markForChainReaction();
if(chainReactionMarker[destination]>pickDestination){
chainReactionMarker[destination] = pickDestination; // we add the new element from the bean to the chainreaction
}
splitForCollide();
eraseTimedout = false;
gameState = BOARD_COLAPSE;
}
break;
case BOARD_COLAPSE:
var incremant = 16;
var movedCount = 0;
for(var i=0; i < numberOfColumn; i++){
if(mobileElement[i] != null){
var currentPos = $("#collapse-"+i).y();
if(currentPos – incremant > (mobileElement[i].destination*spriteWidth+20)){
$("#collapse-"+i).y(currentPos – incremant);
movedCount++;
} else {
// the collapsing block is at its desitnation
// we put the balls back in the array:
$("#collapse-"+i).remove();
for(var j=0; j < mobileElement[i].array.length; j++){
ballsArray[i][j+mobileElement[i].destination] = mobileElement[i].array[j];
if(mobileElement[i].array[j] != null){
$("#board").addSprite(""+i+"-"+(j+mobileElement[i].destination),{posx: 20+(spriteWidth*i), posy: 20+(spriteHeight*(j+mobileElement[i].destination)), height: spriteHeight, width: spriteWidth, animation: spriteList[mobileElement[i].array[j]]});
}
}
mobileElement[i] = null;
}
}
}
if(movedCount==0){
if(!splitForCollide()){
// We trigger the chainreaction:
var chainGroups = chainReaction();
var removed = false;
for(var color=0; color < chainGroups.length; color++){ // the colors
for(var group=0; group < chainGroups[color].length; group++){ // the groups
var firstElement = true;
if(chainGroups[color][group].number > conversionList[color]){
//we have to erase this group!
//add the right amount of point to the score and update the combo count:
comboCount++;
score += chainGroups[color][group].number*pointPerBall*(comboCount);
for(var k=0; k < numberOfColumn; k++){
for(var l=0; l < maxRow; l++){
if(chainGroups[color][group].array[k][l]){
// store the converted ball if it’s the first of the group:
if(firstElement){
if(color+1 < spriteList.length){
ballsArray[k][l] = color+1;
$("#"+k+"-"+l).setAnimation(spriteList[color+1]);
convertedBallx = k;
convertedBally = l;
} else{
ballsToErase[k][l] = true;
}
firstElement = false;
} else { // else we set this ball to be deleted
ballsToErase[k][l] = true;
}
}
}
}
removed = true;
}
}
}
if(removed){
wanaerase = true;
gameState = BOARD_ERASING;
} else {
if(comboCount > comboMax){
comboMax = comboCount;
}
comboCount = 0;
gameState = PROBE_IDLE;
}
}
}
break;
case BOARD_EXPAND:
var incremant = 16;
var currentPos = $("#board").y();
if(currentPos + incremant < 50){
//we slide down to make place to the new line
$("#board").y(currentPos+incremant);
} else {
// There we have first to test if the displacement have make a ball cross the line
var overflow = false;
for(var i=0; i<numberOfColumn; i++){
if(ballsArray[i][maxRow-2] != null){
overflow = true;
break;
}
}
if(overflow){
gameState = GAME_OVER;
$.playground().addSprite("gameover",{posx: 0, posy: 0, animation: gameOverAnimation, width: 600, height: 600});
$("#gameover").append(‘<div style="position: absolute; top: 340px; width: 600px; color: white;"><center><a style="cursor: pointer;" id="restartbutton">Click here to restart the game!</a></center></div>’);
$("#restartbutton").click(restartGame);
} else { // nop! we’r good we can add a lline
// now we can hidde the board and start working on it
$("#board").contents( ).remove();
$("#board").y(0);
// shift the balls arrays line down and add a new line:
for(var i=0; i<numberOfColumn; i++){
for(var j=maxRow-2; j > 0; j–){
ballsArray[i][j] = ballsArray[i][j-1];
if(ballsArray[i][j] != null){
if((storedNumber > 0) && (storedColor == ballsArray[i][j])){ //is the ball in "excited state"
$("#board").addSprite(""+i+"-"+j,{posx: 20+(spriteWidth*i), posy: 20+(spriteHeight*j), height: spriteHeight, width: spriteWidth, animation: animatedSpriteList[ballsArray[i][j]]});
} else {
$("#board").addSprite(""+i+"-"+j,{posx: 20+(spriteWidth*i), posy: 20+(spriteHeight*j), height: spriteHeight, width: spriteWidth, animation: spriteList[ballsArray[i][j]]});
}
}
}
ballsArray[i][0] = newLine[i];
//if(ballsArray[i][j] != null){
if((storedNumber > 0) && (storedColor == ballsArray[i][0])){ //is the ball in "excited state"
$("#board").addSprite(""+i+"-0",{posx: 20+(spriteWidth*i), posy: 20, height: spriteHeight, width: spriteWidth, animation: animatedSpriteList[ballsArray[i][0]]});
} else {
$("#board").addSprite(""+i+"-0",{posx: 20+(spriteWidth*i), posy: 20, height: spriteHeight, width: spriteWidth, animation: spriteList[ballsArray[i][0]]});
}
//}
}
gameState = PROBE_IDLE;
}
}
break;
case BOARD_ERASING:
// Does the earsing begins ?
if(wanaerase){
for(var i=0; i < numberOfColumn; i++){
for(var j=0; j < maxRow; j++){
if(ballsToErase[i][j]){
$("#"+i+"-"+j).setAnimation(eraseAnimation);
}
}
}
wanaerase = false;
setTimeout("timedEarse()", eraseTimeout);
}
//cheack for the erasing timeout
if(eraseTimedout){
for(var i=0; i < numberOfColumn; i++){
for(var j=0; j < maxRow; j++){
if(ballsToErase[i][j]){
// we erase this ball
$("#"+i+"-"+j).remove();
ballsArray[i][j] = null;
ballsToErase[i][j] = false;
}
}
}
markForChainReaction();
if(chainReactionMarker[convertedBallx]>convertedBally){
chainReactionMarker[convertedBallx] = convertedBally;
}
splitForCollide()
eraseTimedout = false;
gameState = BOARD_COLAPSE;
}
break;
}
return false;
}, 30);
[/html]
Apart from the above, we have some more below function for other utility logics,
timedEarse()
columnFirstElement(column)
reduceArray(beamNumberOfBalls, beamPositionX, beamPositionY)
chainReaction(chain reaction method)
splitForCollide(function to split the array for colliding)
markForChainReaction(chain reaction method called globally for the probe and board activities)
generateRandomColumn() [To generate the balls at the starting of the game].
This game will be available in the gamequery.js demo zip file, which you can get from
GameQuery and we made some customization in the same game here, you can download the customized game by clicking download button at the top of this post.
Hope you can understand how to develop a game using Html and jQuery.
Feel free to post your comments/feedbacks/suggestions/thoughts in the below comment section….