- Getting Started with melon.js
- Recipe: Creating a Tiled Map
- Recipe: Starting the Game
- Recipe: Adding a Character
- Recipe: Building a Collision Map
- Recipe: Walking and Jumping
- Recipe: Title Screen
- Recipe: Adding Collectables
- Recipe: Enemies
- Recipe: Powerups
- Recipe: Losing, Winning, and Information
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Recipe: Losing, Winning, and Information
Sometimes people like to be a little bit confused. Puzzles can be fun. However, “what button do I press to jump?” and “did I win?” are not terribly interesting puzzles. Yes, you could make a game where there was a puzzle about which button to press to jump. It might be clever or artfully done. But we’re not doing anything so bold or groundbreaking in this chapter. We’re making a no-nonsense platformer, so we should present the game to players as clearly as possible.
Let’s add some containers for our messages to our index.html file, as shown in Listing 5.25, after the closing </div> of the jsapp.
Listing 5.25. Adding Some Containers for Messages and Instructions
</div>
<div id="info" style="text-align:left; margin-top:20px;">
<div>
<div style ="font-size: 14px; font-family: Courier New">
<div id="game_state"></div>
<div id="instructions"></div>
</div>
</div>
</div>
In the screens.js file, let’s add the bolded lines in Listing 5.26 to the onResetEvent function of the PlayScreen object with some basic instructions for the player.
Listing 5.26. Tell the Player How to Move
me.input.bindKey(me.input.KEY.RIGHT, "right");
document.getElementById('game_state').innerHTML = "Collect all of the coins!";
document.getElementById('instructions').innerHTML = "Arrows to move and Space to jump.";
In that same file, let’s clean up those messages in onResetEvent for the TitleScreen object, as shown in Listing 5.27.
Listing 5.27. Clear Out Old Messages
this.title = me.loader.getImage("titleScreen");
document.getElementById('game_state').innerHTML = "";
document.getElementById('instructions').innerHTML = "";
Then, in your entities.js file, let’s add a bit to the gameOver function so that it looks like Listing 5.28.
Listing 5.28. Create the gameOver State
gameOver: function() {
me.state.change(me.state.MENU);
document.getElementById('game_state').innerHTML = "Game Over";
document.getElementById('instructions').innerHTML = "";
}
Now that we’ve extended our gameOver function, it’s making the game look a little bleak for Guy. He should be able to win, not just lose. Let’s add a winning state that looks like Listing 5.29 after gameOver. Don’t forget to add a comma to the end of the gameOver function.
Listing 5.29. Create the youWin State
}, // This is at the end of the gameOver function. The brace needs a
comma now.
youWin: function() {
me.state.change(me.state.MENU);
document.getElementById('game_state').innerHTML = "You Win!";
document.getElementById('instructions').innerHTML = "";
}
Say that you can enter this winning state by getting all the coins on the level. How do you do that? Add coins and totalCoins to the onload function of the jsApp variable in main.js, as shown in Listing 5.30.
Listing 5.30. Add Coins and Total Coins
me.gamestat.add("coins", 0);
me.gamestat.add("totalCoins", 2);
Note that you might have a different number for totalCoins depending on how you created your level in Tiled.
Next, add the code from Listing 5.31 to add an onDestroyEvent function to the PlayScreen object in screens.js to reset the coins collected. Put this before onResetEvent, and be careful with your commas.
Listing 5.31. Reset Coins When Game Ends
onDestroyEvent: function() {
me.gamestat.reset("coins");
},
Next, we’ll need to add the bolded code in Listing 5.32 to our CoinEntity inside of entities.js. It should increment the coin value when collected and check to see if all the coins are collected. If they all are collected, the player sees the “You win” message.
Listing 5.32. Create a Way to Win if All the Coins Are Collected
var CoinEntity = me.CollectableEntity.extend({
init: function(x, y, settings) {
this.parent(x, y, settings);
},
onCollision : function (res, obj) {
me.gamestat.updateValue("coins", 1);
this.collidable = false;
me.game.remove(this);
if(me.gamestat.getItemValue("coins") === me.gamestat.getItemValue("totalCoins")){
obj.youWin();
}
}
});
Naturally, there are other ways to handle winning and losing other than simply printing text below the game. You could even create an entire new screen for each case.