8-Ball
In this game you will ask the 8-ball a question, then click on the 8-ball icon to get the answer.
Setup our Index Page
Create a new Plunk. Edit the index.html file to look like below. The Index file is what loads our Phaser Game Engine and our javascript game file.
<html>
<head>
<script src="https://github.com/photonstorm/phaser-ce/releases/download/v2.9.4/phaser.min.js"></script>
<script src="game.js"></script>
</head>
<body>
<div id="gameBoard"></div>
</body>
</html>
Create our Javascript Game file
Create a new file called game.js and copy the code below into it.
// Game: Magic 8-Ball
// GAME STATE
// -----------------------------------------------------------------
var PlayGameState = {
preload: function() {
},
create: function () {
},
update: function() {
}
};
// GAME - INITIALIZE
// -----------------------------------------------------------------
// Startup the Phaser Game Engine
var game = new Phaser.Game("100%", "100%", Phaser.CANVAS, 'gameBoard');
// add game scenes ( game states ) to the phase game engine
game.state.add('PlayTheGame', PlayGameState);
// Start Game!
game.state.start('PlayTheGame');
Run Your Code and check for errors.
You should get a nice black canvas. Press F12 to open the Developer Tools, click Console tab and make sure there are no errors.
Load in our 8-ball image data
Add this code to the PRELOAD function. This code will load in our image of the 8-ball.
You can use the Phaser Image Editor to make your own images here.
// load in all our image data we will use during our game
// image data for our 8ball
// -------------------------------------------------------------------------
var eightballData = [
'......0000......',
'....00111100....',
'...0111111110...',
'..011122221110..',
'.01112222221110.',
'.01122200222110.',
'0111220220221110',
'0111222002221110',
'0111220220221110',
'0111222002221110',
'.01112222221110.',
'.01111222211110.',
'..011111111110..',
'...0111111110...',
'....00111100....',
'......0000......'
];
this.eightball = game.create.texture('eightball', eightballData, 6, 6, 0, false);
Run Your Code and check for errors.
You won't see anything yet since we only loaded the image data.
Create the 8-ball image button
Add the code below to the CREATE function. This code will add our 8-ball image to the game as a button.
If the player clicks on it, we will call the function called "this.playerClickedButton".
// change background color
game.stage.backgroundColor = "#000000";
// create the magic eight ball button
EightBallButton = game.add.button(game.world.centerX, game.world.centerY / 3, this.eightball, this.playerClickedButton, this, 2, 1, 0);
// position anchor to center of image
EightBallButton.anchor.x = 0.5;
EightBallButton.anchor.y = 0.5;
Run Your Code and check for errors.
You should see the 8-ball image.
Create all our 8-ball answers
Add this code to the CREATE function.
This code will add all the possible answers the 8-ball can have.
// create an array with list of all our 8-ball answers
this.array_of_eightball_answers = [
'It is certain',
'It is decidedly so',
'Without a doubt',
'Yes definitely',
'You may rely on it',
'As i see it, yes',
'Most likely',
'Outlook good',
'Yes',
'Signs point to yes',
'Reply hazy, try again',
'Ask again later',
'Better not tell you now',
'Cannot predict now',
'Concentrate and ask again',
'Dont count on it',
'My reply is no',
'My sources say no',
'Outlook not so good',
'Very doubtful'
];
Run Your Code and check for errors.
Our answers are now in an array of answers which we can access by the index. You won't see any changes on screen yet.
Add a function to run when the player clicks on the 8-ball
Add this new function after our UPDATE function.
(remember to add "," at the end of the UPDATE function)
This function will randomly pick a number between 0 and 19, then use it to get an answer out of our Array Of Answers.
playerClickedButton: function() {
// come up with a random number
var RandomNumber = game.rnd.integerInRange(0, 19);
// get answer from array of phrases
var TheAnswer = this.array_of_eightball_answers[RandomNumber];
// remove any existing text
if (this.text8 !== undefined) {
this.text8.destroy();
}
// display the answer
this.style = { font: "55px Arial", fill: "#ff0044", align: "center" };
this.text8 = game.add.text(game.world.centerX, game.world.centerY / 1.5, TheAnswer, this.style);
this.text8.anchor.set(0.5);
this.text8.alpha = 0;
// fade in the answer using a tween
this.tween = game.add.tween(this.text8).to( { alpha: 1 }, 5000, "Linear", true);
}
Run Your Code and check for errors.
Run the game and try clicking on the 8-ball icon.
code on plnkr