Again I said that this is a stupid game I created years ago... You have been warned!
A picture of Aragog in Harry Potter and the Half-blood Prince.How does it work -- Gameplay!
As easy as this - KILL THOSE SPIDERS! Yup, that's the rule. If you happen to kill any other bugs or manage to miss any spiders, then your lifeline falls down.A simple twist I added is if you manage to kill those red spideys -- that's an instant 1up!
Other features added is the speed up of the appearance ( though I haven't thought of a better way to do this back then -- again this code was written back in 2014)
Dig down to the codes!
Unfortunately, I couldn't find my project code for this. I think I left it on my other laptop. Though I was able to retrieve at least some parts of it.HTML file
Every one who tried Phonegap knows that it requires at least one HTML file. As for mine, it comes with this:<div class="hide gamepage" id="gamepage">
<div class="container-fluid">
<div class="headrow">
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
<h4>Score: <div id="score">--</div> </h4>
</div>
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
<h4>Life: <div id="life">--</div> </h4>
</div>
</div>
<div class="childrow">
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole1"> </div>
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole2"> </div>
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole3"> </div>
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole4"> </div>
</div>
<div class="childrow">
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole5"> </div>
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole6"> </div>
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole7"> </div>
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole8"> </div>
</div>
<div class="childrow">
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole9"> </div>
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole10"> </div>
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole11"> </div>
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole12"> </div>
</div>
<div class="childrow">
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole13"> </div>
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole14"> </div>
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole15"> </div>
<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 hole-dis" id="hole16"> </div>
</div>
</div>
<div class="modal fade gameover bs-example-modal-sm" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content centerText">
<div class="modal-header">
<h3>Game over</h3>
</div>
<div class="modal-body">
<h4>High Score: <span id="hs"></span></h4>
<h4>Score: <span id="finalScore"></span></h4>
<p><a class="btn btn-info" href='javascript:;restart();'>Try Again</a></p>
</div>
</div>
</div>
</div>
<div class="modal fade startCount bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content centerText">
<div class="modal-header">
<div id="count"></div>
</div>
</div>
</div>
</div>
</div>
What I did here is just to provide a place for the Score and Life values. I also provided a matrix for the images to display. This will serve as the container for the spiders and ladybugs.
By the way, I used Bootstrap (v 3.1.1) for this. Add a few background images, icons and fonts and you have your design!
The script
Since we're using Phonegap, I used JavaScript (jQuery for easy coding) for the logical parts.First thing to do is to prepare the variables specially the session variable. This is where I store the high score. After that, start by setting the display.
$highscore = 0;
$score = 0;
$bomb = 0;
$speed = 1000;
$life = 5;
$limit = 16;
$gameover = false;
changeScore();
changeSpeed();
changeLife();
// initialization.
function onDeviceReady() {
if (localStorage.hs) {
var $hs = localStorage.getItem("key");
} else {
localStorage.setItem("hs", "value");
}
}
// set speed.
function changeSpeed() {
$("#speed").text($speed);
}
// set score
function changeScore() {
$("#score").text(leftPad($score, 9));
$("#finalScore").text($score);
}
// set life.
function changeLife() {
$str = "";
for (a = 0; $life > a; a++) {
$str += "♥";
}
$("#life").html(">span class='heart-live'<l;" + $str + ">/span<");
if ($life == 0) {
setGameover();
}
}
Next is to let the spiders out. We determine first if the continaer is blank then we simply fill it out. The figuring out which container to check is simply done using random numbers generated and called by a series of
setIntervals.// Accio Spiders!
function setHole(holetype) {
if (holetype === undefined)
holetype = 1;
var number = 1 + Math.floor(Math.random() * $limit);
if (!($("#hole" + number).hasClass("spider1") || $("#hole" + number).hasClass("spider2") || $("#hole" + number).hasClass("ladybug"))) {
$("#hole" + number).addClass("spider" + holetype);
setTimeout("javascript:clearHole(" + number + ")", 6000);
}
}
// Accio Ladybug!
function setBomb() {
bmbset = 1 + Math.floor(Math.random() * 10);
if (bmbset % 2 == 1) {
var number2 = 1 + Math.floor(Math.random() * $limit);
if (!($("#hole" + number2).hasClass("spider1") || $("#hole" + number2).hasClass("spider2") || $("#hole" + number2).hasClass("ladybug"))) {
$("#hole" + number2).addClass("ladybug");
setTimeout("javascript:clearHole(" + number2 + ")", 6000);
}
}
}
Then the event to catch when they are click. Note that I'm using the touchstart instead of the click event. It seems that the click event has a few ms (~300ms) delay compared to touchstart which fires almost an instant.// On touchstart check what kind of bug the user touch then do the necessary action.
$(".hole-dis").bind("touchstart", function() {
$id = $(this).attr('id');
if ($(this).hasClass("ladybug")) {
setGameover();
} else {
if ($(this).hasClass("spider1")) {
$(this).html("!");
$score += 1;
changeScore();
$(this).removeClass("spider1");
scoreCheck();
setTimeout("javascript:removePoof('" + $id + "')", 500);
}
if ($(this).hasClass("spider2")) {
$(this).html("!");
$score += 1;
if ($life <= 5) $life += 1;
changeLife();
changeScore();
$(this).removeClass("spider2");
scoreCheck();
setTimeout("javascript:removePoof('" + $id + "')", 500);
}
}
});
// I choose to create a poof icon first before making the bug disappear just for some feedback instead of removing the image.
function removePoof(id) {
$('#' + id).html("");
}
Basically, that's how the code works. It sets the ground for the images and assets to play then uses intervals to call the spiders and other bugs to put on div containers. When containers are clicked, we determine what kind of element is within and do the processing then.
- If it is a bug, then it's game over!
- If it is a black spider, then the add score.
- If it is a red spider, then add life.
Why did I create such thing?
Real reason? I'm just curious if it would be possible back then. I'm not really a game developer, what I do are web applications so Phonegap seems to be a nice portal for me to traverse a different medium. What I initially planned is a simple tic-tac-toe (for those who don't know, this is basically the 'Hello World!' of game development). But then I want something unique so I thought of anything to smash instead and the first thing in my mind is the pesky-little-eight-legged-not-sor-friendly neighborhood's animal (err insect) spirit -- a spider!Screenshot
Categories
No comments :
Post a Comment