Be sure that you completed Coding Steps 1-5 on the previous page.
IMPORTANT: Take the time to read each step, and try to understand how the code works.
Now that you've added a way for the player to interact with the game, let's add a sound effect as feedback to the player. We'll play a "spinning" sound as the emoji randomly changes.
Adding a sound is similar to adding a sprite:
you declare a global variable for it
then you preload it
then you add it to the game
Add a global variable named spinSound to your code.
Within your preload() function, add this Phaser command:
You can see the first part of the Phaser command indicates that you're loading audio into your game. Let's take a look at what's inside the parentheses:
'spin' represents the asset key for this sound. Again, the key is a reference, similar to a variable name, and you get to decide the name for the key.
'assets/spinner.mp3' represents the folder path and filename of the sound file that will be loaded. You can only use the following types of sound files in your game: wav, mp3, ogg
Add this Phaser command inside function create() to add the sound to the game:
This command adds the sound to the game and assigns that sound to the spinSound variable.
spin is the asset key for the sound file to use
0.3 represents the volume for this sound, which can be a value between 0 to 1 (with 1 being the file's maximum volume).
Be aware that the sound won't actually play until we use a command telling it to start playing.
By default, when you do play a sound, the sound will play one time and then stop. However, we want our spinning sound to keep playing over and over, for as long as the spacebar is held down.
So add this Phaser command after the command that added the audio:
This will make the sound keep playing in a loop once it's started. The sound will keep looping until we specifically tell the sound to stop playing.
For your game, your code will start playing the sound when the spacebar is first pressed down. The sound will keep playing on a loop as long as the spacebar is still being held down. Then your code will stop playing the sound as soon as the spacebar is released.
Modify your existing code inside the update() function, so it looks like this:
Notice that we're using a series of if-else conditional statements. The game will check these conditions in the order listed.
The game will check to see whether the first condition (spacebar.justDown) is true. If that condition is true, it will start playing the sound (which will keep playing over and over since we set it to loop) and then skip the other two conditions.
Otherwise, if that first condition is false, then it will check the second condition (spacebar.isDown). If that condition is true, it will change the sprite to a random frame and then skip the last condition.
Otherwise, if that second condition is false, then it will check the third condition (spacebar.justUp). If that condition is true, it will stop playing the sound.
Refresh your HTML preview to verify that if you hold down the spacebar, the spinning sound will play — but as soon as you release the spacebar, the sound will stop.
Eventually, this game will have three emoji sprites that the player randomly spins, and the game will award score points for for matching emojis and subtract points if there's no match.
The score will displayed as text in the game display. So let's add this text that will eventually display the score — but in the meantime, we'll just have the text display instructions for how to spin the emojis. Later, we'll update this text to display the score.
Add a global variable named scoreText to your code.
Add this Phaser command inside function create() to add text to the game:
This command adds the text and assigns it to the scoreText variable.
Let's take a look at what's inside the parentheses of this command:
First you provide the x and y coordinates (in order) of the pixel position where the text should be added to the game.
Then you can provide the actual text to display by listing it within quotes: 'Use Spacebar to Spin'
Then within a set of curly braces { }, you have the option of listing style properties for the text. This example lists a font, a font size, a font style, and a fill (i.e., text color, which will be a CSS hex color code). You don't have to list all of these, but usually you'll want to provide the font, the font size, and the fill color. The Phaser API reference identifies all the style properties for text.
Refresh your HTML preview to verify that the text appears in the game.
Just like when we first added the sprite, the text is not centered because its top-left corner represents its x and y position. Let's fix that by setting a different "anchor" point for the positioning of the text.
Add a command to change the text's anchor point to be the center of the text. (Hint: How do you do this previously for the hello1 sprite?)
Refresh your HTML preview to verify that the text is now centered horizontally below the emoji sprite.
Now you're going to add the other two emojis to your game, so you can start building the "matching" part of the game.
In your create() function, modify the existing command that adds the hello1 sprite, so it looks like this instead:
Refresh your HTML preview to verify that the sprite is now shifted slightly to the left of the game's center.
Now you'll add two more emoji sprites. These will use the same spritesheet as the first emoji sprite. Your code only needs to load this spritesheet one time — you'll just reuse the same spritesheet by referring to its asset key when you add each of the other sprites.
Create two more global variables called hello2 and hello3.
Within your create() function, add the hello2 sprite to the center of the game, and add the hello3 sprite 100 pixels to the right of the game's center. Remember that both of these new sprites will just reuse the existing 'hello' spritesheet.
Be sure to set the anchor point for each new sprite, similar to what you did for the hello1 sprite.
Refresh your HTML preview to verify that you have 3 emoji sprites that are equally spaced in a row across the center of your game.
If you press down the spacebar, only the first sprite (which is hello1) will randomly change, while the other two sprites stay the same. You'll fix this in the next step.
Now that you have all 3 emoji sprites added, add code within your update() function to make hello2 and hello3 also change to a random frame whenever the spacebar is down.
Refresh your HTML preview to verify that each of the 3 emoji sprites changes randomly when the spacebar is pressed — and they keep changing randomly as long the spacebar is held down.
We want to add a score to the game, so the player will be awarded points if there are matching emojis after a spin.
Create a global variable named score and assign it an initial value of zero for the start of the game:
You'll use score to actually keep track of the numerical score during the game, and then use scoreText to display the score on the game screen.
Now that you have a score variable, you need to add code to check for emoji matches after each spin and then update the score. You're going to add this code inside your own custom function (so you can practice making a new function).
As you've seen, a function contains a set of related code statements that perform a specific task or function, such as preloading game assets, etc.
Add the following JavaScript code to the very bottom of your code.js file (after the update() function):
This creates a new function in your JavaScript. Right now, this function is empty — it has no code between its curly braces { } — but you'll be adding code inside the function in just a little bit.
As you can see, checkMatch is the name of the function. Just like variable names, you get to decide the name of the function, as long as every function in your code has a unique name. Functions always have a set of parentheses () at the end of their name. Sometimes there are variable names called parameters listed inside the parentheses — but we don't need parameters for this particular function.
RESOURCE: W3Schools has a JavaScript tutorial on Functions
Let's figure out the code to add inside the checkMatch() function. As soon as the spacebar is released, we want to check to see if any of the emoji sprites match each other.
The easiest way to check for matches is to compare the frame numbers of the sprites. If they currently have the same frame number, that means they are displaying the same exact emoji.
We want to first check to see if all 3 sprites match. If they do, we'll add 100 to the score as a reward. In JavaScript (like other programming languages), you can only compare two variables at a time, so we'll need to combine multiple comparisons into one conditional statement. So if hello1 and hello2 have the same frame AND hello2 and hello3 have the same frame, then all 3 match. (We don't even need to check hello1 vs. hello3 because they will logically match if the other two comparisons were true.)
Otherwise, we want to check to see if any 2 of the sprites match. If they do, we'll add 20 to the score as a reward. There are three possibilities for a double match: hello1 and hello2 match OR hello2 and hello3 match OR hello1 and hello3 match. Again, we'll combinine these multiple comparisons into one conditional statement.
Otherwise, if both of these checks were false, it means none of the sprites match (all three are different emojis). In that case, we'll subtract 10 from the score as a punishment.
Lastly, regardless of which of these is true (all 3 match, any 2 match, or none match), we will need to update scoreText to display the new score.
Add this code inside function checkMatch() by pasting it between the curly braces { }:
Let's examine this code:
When you are comparing two variables to see if they are equivalent to each other, you have to use double equals signs ==. This is because JavaScript (like most other programming languages) uses a single equals sign = to assign or change the value of a variable.
&& represents AND. By using && to combine multiple comparisons into one condition, the condition will be true only if every comparison in the set is true.
|| represents OR. By using || to list multiple comparisons within one condition, the condition will be true if any one (or more) of the comparisons is true (even if the others are false).
Hint: You can type | by pressing shift-backslash on your keyboard
Notice we first checked for a triple match, and then checked for a double match. If we reversed the order of these checks, the code would treat 3 matching emojis as a double match. (Do you understand why?)
You can change the value of a variable, such as score, by using a single equals sign =. You can even refer to the previous value of the variable. In our case, the code assigns a new value to score by taking its previous value (which is saved as score) and then adding or subtracting a number.
You change the text being displayed by assigning a new value to the text property of your text variable. In our case, we just want to display a number (the player's score). If you wanted to display some actual text, you would list it inside quotes: scoreText.text = 'Triple Match!';
The checkMatch() function won't actually run until and unless we tell the game to do so. You run a function by "calling it" — which simply means listing its name with a set of parentheses. (If the function happened to require parameters, then you'd also list parameters within the parentheses — but your function doesn't require these.)
Since we want to perform the check for matches as soon as the emojis stop changing, add this line of code within your update() function, so that it will call your custom function when the spacebar has just been released:
The game will recognize that this is the name of one of your custom functions — so it will go and perform all the code listed inside that custom function, and then it will return back to where it was.
Refresh your HTML preview and play the game to verify that it correctly identifies when a match occurs and correctly awards points based on a triple match, double match, or no match.
Your game should be functioning correctly at this point. The score should be changing, though it may be a little challenging to determine if it is changing accurately. We'll fix this in the last step, so the game provides clear feedback to the player.
For this last step, you'll add some things to improve the game. You'll make it easier for the player to understand what's happening and also make the game a little more fun.
As some visual feedback to the player, let's change the game's background color to a random color after every spin. It helps make it clear when a "spin" has ended — plus it adds another interesting random element to the game.
Add this Phaser command within your update() function, so that it will occur when the spacebar has just been released:
Refresh your HTML preview to play the game and verify that the game background changes to a random color after each spin.
You will notice that the white color of the scoreText can be hard to read when the background color randomly changes to a light color. To help fix that, let's add a shadow behind the text to make it easier to read.
Add this Phaser command in your create() function after the command that added scoreText to the game:
This will add a small dark shadow behind the white text, making it a little easier to read on light-colored backgrounds. If you want to learn more about the settings inside the parentheses, here is the Phaser API reference for setShadow, which explains it in detail.
Refresh your HTML preview to verify that the text shadow is visible.
Okay, let's add sound effects for a triple match and a double match.
Create two more global variables called match2Sound and match3Sound.
Within your preload() function, load the sound files in your assets folder called coin.wav and power-up.wav. Be sure to assign a unique asset key name to each sound (use something that makes sense to you).
Within your create() function, add the sounds to your game. Use coin.wav for match2Sound, and use power-up.wav for match3Sound. Set a volume for each sound (which you can modify later after testing them out in the game). Since we only want these sounds to play one time whenever we do play them, you don't need to adjust their loop property (it will be set to false by default).
Within your checkMatch() function, add a command to play match2Sound when a double match occurs, and add another command to play match3Sound when a triple match occurs.
Refresh your HTML preview to play the game and verify that the correct sound plays whenever a double match or triple match occurs (and no sound plays if there's no match).
Your final addition to the game will be some text feedback after each spin to confirm whether a triple match, double match, or no match occurred.
Create a global variable called matchText.
Within your create() function, add matchText to the game by positioning it 120 pixels below the center of the game. Set the text to read Match 2 or 3 to Win, and use the same font styling as you did for scoreText.
Add a command to change the matchText anchor point to be the center of the text.
Add a command to add a text shadow to matchText (use the same shadow settings as you did for scoreText).
Within your update() function, add a command to do the following:
When the spacebar is first pressed down, clear out the text in matchText. You do this by assigning an empty string (quotes with nothing inside) to its text property, like this:
Within your checkMatch() function, add commands to do the following:
When a double match occurs, change matchText to read Match Two +20, and change its text color to green (#00ff00) by changing its fill property, like this:
When a triple match occurs, change matchText to read Match Three +100, and change its text color to green.
When no match occurs, change matchText to read No Match -10, and change its text color to red (#ff0000).
Refresh your HTML preview to play the game and verify that the correct feedback text appears after each spin.
What else do you think could be added or changed to improve this game? Why?
Congratulations, you've completed your first practice game! Hopefully, the Phaser commands made sense — you'll get the chance to use them again in the next practice game.
Be sure that you completed the Prep Steps on the previous page.
IMPORTANT: Take the time to read each step, and try to understand how the code works.
In your HTML file (index.html), add a paragraph with your name after <div id="my-game"></div> (which is the container for your game):
Refresh your preview of your HTML file to verify that the paragraph with your name shows up under the black box and is left-aligned on the webpage.
In your CSS file (style.css), let's add a background color to the webpage body and let's center all the text on the webpage body.
Add this new CSS into style.css before #my-game (which styles the <div> containing your game).
Refresh your preview of your HTML file to verify that the paragraph is center-aligned on the webpage and the webpage has a light gray background color (but your game doesn't).
That's all we're going to do with the HTML and CSS files for this practice, but feel free to make other changes to the webpage (such as: picking a different background color for the webpage, adding text above the game container, etc.).
Before we start coding the game, let's get oriented to the starter Phaser code already in your code.js file. We're just going to look at some code in this step.
Don't add or revise any code during this step. Just focus on understanding how the code works.
The first thing your JS code does is create a new Phaser.Game object by assigning it to a variable named game:
Many of the Phaser commands that you'll use will start with game because this is a reference to your variable named game — you could use a different name for this variable if you really wanted to, but almost every example Phaser code that you'll see uses game (so make your life easier by using this name).
You will notice two numbers — 800 and 600. These represent (in order) the width and height (in pixels) of your game display. You could change these numbers for your own game, but for right now, we'll just stick with these.
Notice where it says 'my-game' — this represents the id name of the <div> in your HTML file where Phaser inserts your game. You could change this id name, but you'd want to make sure the new id name matches in your HTML, CSS, and JS files.
Finally, notice that it refers to preload, create, and update. These are the names of 3 core Phaser functions that will be used in your game. If you look down further in your JS file, you will see these functions listed — except they are empty at the moment. You will be adding Phaser commands inside these functions to build your game:
PRELOAD: The preload() function is used to load game assets (such as images, sounds, etc.) into the game's memory, so they are all ready at the same time for use in the game. The preload() function runs one time at the start of the game (i.e., when the webpage loads).
CREATE: The create() function is used to create your game world and its user interface by adding images and sounds into the game, adding player controls, adding text, etc. The create() function runs one time after the preload() function is finished.
UPDATE: The update() function is used to update the gameplay by checking for player input, checking for conditions or events, updating objects in the game world, etc. The update() function runs in a continuous loop after the create() function is finished. The update() function loops many times per second, allowing for smooth animations and responsive interactions.
Two other things to notice in your code.js template:
There is a place near the top where you may need to declare global variables for certain objects in your game (such as: the player, a group of enemies, the score, etc.).
There is a place at the bottom where you may need to create custom functions to handle certain conditions or events in the game.
By default, Phaser makes the background color of your game black. You can change the background color, or you can add images as a background for your game.
In your JS file (code.js), add this Phaser command inside function create() by pasting the command on a blank line between the curly braces { }:
Does your code look like this now? Good.
Refresh your preview of your HTML file to verify that your game now has a blue background color.
Remember that you created a Phaser.Game object named game at the start of your game code. An object is a special type of variable that can contain a set of properties (variables) and methods (functions).
In fact, a property within an object can be another object — in other words, an object can contain other objects inside it.
Besides the main Phaser.Game object itself, there are other types of Phaser objects that you will be creating and using in your game. Each of these objects will have its own set of properties and methods (which are defined by the Phaser JS library).
Every Phaser command is a reference to a Phaser object property or a Phaser object method. If the command has parentheses (), it's a reference to a method. Otherwise, it's a reference to a property.
The Phaser API documentation is a reference that describes all the Phaser objects and their properties and methods.
RESOURCE: W3Schools has a great explanation of JavaScript Objects
So let's look at this Phaser command:
The first part of this Phaser command is: game.stage
Within your Phaser.Game object named game, there is a property (a variable) called stage — the Phaser JS library automatically created this property (along with other properties and methods) inside your Phaser.Game object when the game variable was created at the beginning of your code.js file.
Notice that a period is used to separate the name of the object and the name of the property (or method) within that object.
This property called stage is a variable representing the game display. In fact, it turns out that stage is also an object, meaning that it has its own set of properties (variables) and methods (functions).
Within the stage object, there is a property called backgroundColor which is exactly what it sounds like: it determines the color of the game display background. When a Phaser.Game object is first created, this backgroundColor property within the stage object is set to a value of black.
So game.stage.backgroundColor is a reference to the background color of the stage within the game. The last part of the command uses an equals sign to change the value of this property to blue (#6699ff is a CSS hex color code for blue).
That's how Phaser commands work, in a nutshell.
Let's add an image to your game. Inside your assets folder is an image file called hello-sprite.png that looks like this:
What looks like 6 separate images is actually one combined image. PNG image files can have transparent backgrounds (which this image has).
If you view this image in an image editor (such as: Pixlr, etc.), it will look like it has a checkboard background:
The image editor displays the transparent areas as a checkboard pattern to make it clear (get it? clear) what parts of the image are transparent. When you use this image in your game, you won't see any checkerboard pattern.
You're going to add this image to your game as something called a spritesheet. A spritesheet is an image that will be subdivided into a set of smaller images.
A typical use for a spritesheet is to contain a set of animation frames for an object in your game (such as: player's character, etc.). Animations work by showing a sequence of frames — one at a time — in rapid succession to create the illusion of something moving or changing.
A sprite is a game object (such as: the player's character, an enemy, etc.) that uses a spritesheet. At any given moment during gameplay, a sprite only displays one possible frame from its spritesheet. By rapidly changing which frame is displayed, the game can animate the sprite.
Every animation frame in a spritesheet has to have the same rectangular size. In our case, our frames happen to be squares that are 64 pixels in width and 64 pixels in height. Here's our spritesheet image with the frames highlighted, so you can see how it will be sliced up into smaller images:
Technically, this particular spritesheet is not really an animation. Instead, it just shows the 6 possible emojis for our matching game. Combining these 6 images into a single spritesheet image (instead of 6 separate image files) just makes it easier to use in this particular game (as you'll see later in Step 5).
Here's a spritesheet for a different game that does actually show animation frames:
This spritesheet contains 9 animation frames: the first four frames show a little dude running to the left (imagine these four frames playing over and over again in a loop), the fifth frame shows him (or her?) standing still, and the last four frames show the little dude running to the right. You'll meet this little dude again in Practice 3.
You will need to declare (i.e., create) a global variable to represent your sprite. Add this JavaScript statement near the top of your code (look for the comment line that mentions global variables).
This statement creates a new variable named hello1. You get to decide the names of variables, as long as each variable has a unique name (and as long as the variable name is not a reserved word in the JavaScript language).
You're going to name this variable hello1 because eventually you'll have 3 sprites in your game (hello1, hello2, hello3). You could call them Moe, Larry, and Curly if you really wanted — as long as each variable has a unique name.
RESOURCE: W3Schools has a JavaScript tutorial on Variables
Before you can add a sprite to your game, you have to load its spritesheet into the game's memory. Add this Phaser command inside function preload() by pasting the command on a blank line between the curly braces { }:
Does your code look like this now? Good — just checking.
You can see the first part of the Phaser command indicates that you're loading a spritesheet into your game. Let's take a look at what's inside the parentheses:
'hello' represents an asset key — a key is sort of like a variable name. You decide what name to use for the key. Similar to variable names, each key should have a unique name, and the name cannot contain any spaces. In other Phaser commands, if you use this specific key name, Phaser will know that you are referring to this particular spritesheet.
'assets/hello-sprite.png' represents the folder path and filename of the spritesheet image to load.
64, 64 represent (in order) the width and height (in pixels) of each frame in this particular spritesheet. Phaser will use these measurements to divide the spritesheet into a set of individual frames.
Now that the spritesheet is loaded, the next step is to actually add your first sprite to the game world.
Add this Phaser command inside function create() by pasting the command on a new line after the command to change the game's background color:
This command adds a sprite to the game and assigns that sprite to the hello1 variable. So now, when you refer to hello1 in your code, you are referring to this sprite.
Let's look at what's inside the parentheses:
400, 300 represent the x and y coordinates (in order) of the pixel position where the sprite will be added to the game. The top-left corner of your game is 0, 0. The values for the x-position increase from left to right. Since your game was set as 800 pixels wide, the x-position of the right edge of your game is 799 (because the first pixel is actually numbered as 0). The values for the y-position increase from top to bottom. Since your game was set as 600 pixels high, the y-position of the bottom edge of your game is 599. So 400, 300 is basically the center of your game.
'hello' is the asset key name of the spritesheet to use for this sprite.
Refresh your HTML preview to verify that your game now has the emoji sprite inserted.
You will notice a couple of things:
Instead of seeing all 6 emoji frames, the sprite only shows one frame — this is normal and exactly what we want. Sprites only show one frame at any given time, and a sprite will show the first frame by default until you tell it to either show a different frame or play an animation sequence.
The sprite does not look centered. Instead, the top-left corner of the sprite is positioned at the game's center (400, 300). By default, Phaser positions objects using their top-left corner as the "anchor" point. Sometimes this is exactly what you want. However, for some game objects — like a player's character, etc. — it will make more sense to use the center of the object (or some other point) as its "anchor" point for positioning in the game.
Add this Phaser command inside function create() on a new line after the command that added the hello1 sprite:
This command will change the sprite's anchor point for positioning to be the center of the sprite (0.5, 0.5 means set the anchor to half-way across its width and half-way down its height).
Refresh your HTML preview to verify that the sprite is now centered in the game.
In fact, rather than you needing to figure out the x and y values for the center of your game, you can use a built-in Phaser property that calculates these values automatically.
Modify your existing command that adds the sprite, so the command looks like this instead:
Refresh your HTML preview to verify that the sprite is still centered in the game.
A game needs to provide a way for the player to interact with the game. Phaser supports various types of player input: keyboard input, mouse input, multi-point touch input, and even gamepad input.
You're going to add a keyboard input. Phaser allows you to designate specific keys on the keyboard as inputs. In this game, the player will use the spacebar key to "spin" the emoji sprite, so it randomly switches between the different emoji frames.
You need to declare a global variable for each input used in your game, so create another global variable called spacebar.
You already have a line of code that added the hello1 global variable, so you have a couple of different options for adding a new variable:
(1) You could add a new var statement for the new variable, so your code looks like this:
OR
(2) You could modify the existing var statement to include the new variable (use a comma to separate the names), so your code looks like this:
Just choose one of the options above. In later steps, you'll need to add even more global variables, so keep these two options in mind.
Add this Phaser command inside function create() on a new line after the command that sets the anchor for the hello1 sprite:
This command makes a specific key on the keyboard into an input and assigns it to your variable. You just have to provide the Phaser.KeyCode for the specific key. This reference lists all the available Phaser keycodes.
Next we need to make the game actually do something when the player presses the spacebar.
Phaser has several properties for detecting input on keys. Here are four properties for a key that will have a value of either true or false:
isDown will detect if the key is currently pressed down — this property will remain true for as long as the player continues to hold the key down
isUp will detect if the key is currently up (i.e., not being pressed) — this property will remain true for as long as the player doesn't press the key
justDown will detect if the key was just pressed down during the current game loop (so you can detect exactly when the key is pressed down) — this property is only true during the specific game loop when the key is first pressed down — after that loop, it becomes false, even if the player keeps pressing the key
justUp will detect if the key was just released during the current game loop (so you can detect exactly when the key is released) — this property is only true during the specific game loop when the key is first released — after that loop, it becomes false, even if the player still isn't pressing the key
Let's detect when the spacebar key is being pressed down. If that's true, we'll change the sprite to a random frame (one of the 6 possible emojis).
Add this Phaser code inside function update() by pasting the code on a blank line between the curly braces { }:
This if statement will detect whether the spacebar is currently pressed down. If this condition is true, then it will change the sprite to a random frame. Otherwise, if this condition is false (i.e., when the spacebar is not being pressed), it won't change the sprite frame.
Here's a few things to note about this code:
if statements are commonly used in computer programs to make decisions about what actions to perform (or not perform) based on specific conditions being true or false. You will need to understand how these work.
Sprite frames are referenced by number, with the first frame numbered as 0, the second frame numbered as 1, the third frame numbered as 2, etc. The emoji spritesheet contains 6 frames, which Phaser numbers as 0 to 5.
The statement Math.floor(Math.random() * 6) generates a random whole number between 0 and 5 (i.e., 6 possibilities). Random numbers are commonly used in games — they are very helpful for adding some variation and unpredictability to the gameplay.
Refresh your HTML preview to verify that if you press the spacebar, the sprite will randomly change to a different emoji.
If you keep holding the spacebar down, the sprite will keep changing randomly — it will change every time the update() function completes a loop. (This should give you a good idea of how fast one game loop is.) If you release the spacebar, the sprite should stop changing.
RESOURCE: W3Schools has a JavaScript tutorial on If-Else Conditional Statements
RESOURCE: W3Schools has a JavaScript tutorial on Random Numbers
It's time to introduce you to the technology that your team will be using later to develop it's own game. This will be your first practice coding a browser-based video game using the Phaser JS game engine.
For this practice, all the game assets (i.e., images and sounds) and nearly all the game code will be provided. Focus on becoming familiar with how the code works.
This first practice will create a simple game. You're going to code an emoji matching game, similar to a slot machine. This game is based entirely on chance — no player skill involved. However, it will introduce you to some of the basic concepts of using Phaser to create a game.
PREVIEW VIDEO: Demo of Emoji Match
Check out the Phaser Introduction to better understand what Phaser does and to download a copy of the latest version of Phaser (phaser.min.js).
Follow the instructions to prepare your Phaser Game Template.
Download this assets.zip file, and then extract (decompress) the file contents, which will be a folder named assets that contains one image file and three sound files. (To extract the file on a Windows computer, right-click on the downloaded zip file, and select Extract All. On a Mac, double-click on the downloaded zip file.)
Place the assets folder into your game template folder.
Test your Phaser game template by previewing the HTML file online. If everything's ready to go, you should see a solid black box (i.e., a blank Phaser game canvas) on your webpage.
PHASER NOT LOADING? If you only see a black outline around a white box (or see nothing at all), then Phaser isn't loading correctly. Try these troubleshooting tips:
Be sure you downloaded the correct Phaser JS file: phaser.min.js
Be sure your Phaser JS file is named: phaser.min.js — if necessary, rename the file in your game folder to this exact name.
Be sure you placed phaser.min.js into the same folder that has your HTML, CSS, and JS files. If Phaser is in a different folder (or inside a subfolder), it will not load (unless you modify the <script> tag in your HTML file to load Phaser from its correct folder location).
Be sure your index.html file includes <script> tags to load phaser.min.js and code.js (in that order) from your game folder.
Be sure your code.js file lists the command to create a Phaser.Game object and includes the preload(), create(), and update() functions (must be present even if empty at first)
Be sure your HTML, CSS, and JS files are running on a web server (such as: Editey web editor in Google Drive, CodePen, Codeanywhere, etc.).
Check your browser's JavaScript console to see if there are errors listed.
This first practice game will be coded in 10 steps. Overall, it doesn't take that much code to create this game; however, every step will explain how the code works.
In Step 1, you'll make a couple of changes to your HTML file and CSS file to demonstrate that the rest of the webpage surrounding your game can be modified. That will be useful later when your team develops its own game — you'll be able to customize the webpage to match your game's theme.
The rest of the steps are for coding your game, which will be done in your code.js file using Phaser JavaScript commands (as well as regular JavaScript).
The steps are outlined below. The instructions for Steps 1-5 start on the next page.
