I the first post in this series, we just initialized all of the variables and called a few functions.
The past two posts focused on just one function each,
The keyDownHandler function that executes based on where the player goes.
The render function that draws the game board, and
In this post, I’m going to go over a lot of shorter functions.that you saw called previously.
Just for fun, the eatSquash function may given you a good squash, in which case you eat it, gain health and experience points and burp, or a rotten squash, that you eat, gain fewer experience points, no health points and fart.
I create a random number, cost, by multiplying the sum of the player’s health and experience points by a random number. I use the ceil function so I get an integer and not something like 12.876. If health > cost you get a good squash, otherwise, a rotten one.
The setMessage function changes the message in the upper right corner of the screen.
// Eating squash ;
function eatSquash() {
// How good is this squash to eat?
var healthSquash = experience + health;
var cost = Math.ceil(Math.random() * healthSquash);
// Player can pick up squash if strong and healthy enough ;
if (health > cost) {
health += cost;
experience += 2;
playSound("burp");
gameMessage = "You ate the squash and <br/>it gave you " + cost + " health points";
}
else {
experience += 1;
playSound("fart");
gameMessage = "The squash was rotten. You feel sick."
}
setMessage();
}
Again, to make the game not so simplistic, I create a new variable that is the player’s gold plus health. The rockStrength variable is a random number. Again, I use the ceil function to make sure it is an integer. If the player health is less than the rock strength then they either trip on it or step on it. Either way, they lose health points.What is that thing parameter doing here? I’m planning to make levels of difficulty later on. So, I can change the value of thing, to say 5, and have the player lose that multiple of health points. Basically, this is just a ‘hook’ for future modifications.
// DYING OR NOT WHEN YOU HIT A ROCK ;
function rockEffect(thing) {
// The player’s strength ;
var playerStrength = Math.ceil((gold + health) / 2);
var rockStrength = Math.ceil(Math.random() * playerStrength * 2);
// Find out if the player strength is greater than the rock strength ;
if (rockStrength > playerStrength) {
// The player loses some gold and gains experience ;
var lostHealth = Math.round(rockStrength / 2);
health -= lostHealth;
// Player gains experience ;
experience += 1;
// Update game message ;
if (thing > experience) {
gameMessage = “You tripped on a rock and fell. <br/>You lose ” + lostHealth + ” health points.”;
}
else if (thing < experience) {
gameMessage = “You hurt your foot stepping on a rock. <br/>You lose ” + lostHealth + ” health points.”;
}
}
If the playerStrength is greater than the rockStrength then the player finds some gold and does not lose any health points.
else {
// The player runs around the rock ;
var rockGold = Math.round(rockStrength / 2);
gold += rockGold;
// Gain more experience ;
experience += 2;
if (thing < experience) {
gameMessage = “You step AROUND the rock <br/>and find ” + rockGold + ” gold pieces.”;
setMessage();
}
else if (thing >= experience) {
gameMessage = “You threw the rock out of the way <br/>and found ” + rockGold + ” coins.”;
setMessage();
}
}
if (gold >= 10000 && health >= 10000) {
gold = 9999;
health = 9999;
}
else if (gold >= 10000) {
gold = 9999;
}
else if(health >= 10000) {
health = 9999;
}
gameMessage2 = “Gold: ” + gold + ” Health points: ” + health;
setMessage();
}
This is the end of the game. If the value of that cell is head_dress, you have won the game. If you want to move the head_dress randomly around every time you draw the maze so the game is not always the same, you could do that and everything would still work the same way.
Once the game has been won, the game board (stage) is hidden, the background music quits playing and a victory sound plays. The message in the right corner is hidden and instead a winner div is shown that has your player in the head dress and shows your final score.
After 3 seconds, you are directed back to the page that gives your choices of games. Obviously, I am still working on that one. Right now, it just takes you back here, but when I get done it will give you a variety of games like this from which to choose your bonus game.
IF YOU LOST THE GAME … if you lost due to lack of gold one message plays, if you lost due to lack of health, a different message plays. Either way, the death function executes.
// END THE GAME ;
function endGame() {
$('#stage').hide();
if (map[playerRow][playerColumn] == head_dress) {
audio1.src=””;
playSound(“winner”);
$(“#output”).hide();
$(“#winner”).show();
var score = gold + health + experience;
$(“#output2”).text(“You made it! Final score: ” + score).show().css(“top”, “500px”);
setTimeout(function () { window.location.href=”../choice.html”}, 3000);
}
else if (health <= 0 ) {
$(“#output2”).text(“You are too weak to go on. You died. Try again.”);
death();
}
else if (gold <= 0) {
$(“#output2”).text(“You’ve run out of gold. The villagers killed you! Try again.”);
death();
}
}
// DEATH FUNCTION. Pretty self evident. You died. Hide the game board. Show death animation. Show message. Stop sound track ;
function death(){
$(“#stage”).hide();
$(“#output”).hide();
$(“#output2”).show();
$(“#death”).show();
$(“#tryagain”).show();
audio1.src = “” ;
}
// CHANGES THE MESSAGE SHOWN IN TOP LEFT ;
// Notice I use the html function so I can have longer messages broken into 2 lines using <br/>;
// This function hides the message, changes the html and then shows the new message;
function setMessage(){
$(“#message”).hide();
$(“#message”).html(gameMessage);
$(“#message”).show();
}
THIS ANONYMOUS FUNCTION JUST RELOADS THE PAGE when the player hits the tryagain button.
The functions after this control the sound. The startSound function plays a loop of the background track. When it ends, it just starts again.
The playSound function plays different sounds depending on what is in the square you stepped into.
$("#tryagain").on("click", function(){location.reload(); });
// Starts sound loop when game starts ;
function startSound(){
audio1.src = “pyramid_maze_sounds/maze_back_soft.mp3″ ;
audio1.play() ;
audio1.addEventListener(‘ended’, function() {
this.currentTime = 0;
this.play();
}, false);
}
// Plays sound for the cell. Pauses sound track so you can hear sound effect ;
function playSound(soundfile) {
if (walk == 0) {audio1.pause(); }
audio_e = new Audio();
audio_e.src =”pyramid_maze_sounds/” + soundfile + “.mp3” ;
audio_e.play();
setTimeout(function(){audio_e.pause();
audio1.play();
},600);
}
});
</script>
So, that’s it. That’s the end of the JavaScript for the game. We still need the CSS and HTML for the game, plus the instructions. Coming up next.
In the meantime, think about this, this is just the bonus game that’s an option in one of our games. Imagine how much detail we put into the main part of the game.
Maria (our CEO) thinks these posts are a waste of time because people who buy games for their kids are too busy taking their kids to soccer practice, softball and dance class to read blogs on coding games.
Prove her wrong by buying our games.
or one of our cool shirts – great for wearing while coding.
