What types of video games do you like to play?

Just as people like different types of books or movies, people like different types of video games. If you're going to design a video game, you'll need to know more about what motivates people to play certain games.

You'll start by taking a survey to determine your own Gamer Motivation Profile. Later in the project, each team will decide what gamer motivations their game will target.

Quantic Foundry is a game analytics consulting company that has gathered data from over 300,000 video game players to construct a scientific model that describes different types of gamer motivations.

This model identified 12 motivations that clustered into 6 pair groups: Action, Social, Mastery, Achievement, Immersion, and Creativity. For example, Challenge and Strategy are motivations that belong to the Mastery group.

VIDEO: This gamer motivation model was constructed using a statistical method called factor analysis. If you're interested, Quantic Foundry has a video explaining how this model was built using survey data collected from thousands of video game players.

YOUR TASK

1. Take the online survey to determine your Gamer Motivation Profile. The survey takes about 5-7 minutes.

2. Record your results in this assignment document.

3. Discuss and compare your results with others in the class.

Assignment Templates

Some of the assignments in this project guidebook include links to Google Drive templates (document, spreadsheet, slide presentation, drawing, etc.). All the templates are shared as "View Only." Students must create a copy of the template in order to modify it. (Students should not request edit access, as the file is a master template for all students.)

What motivates people to keep playing a game?

We know that video game players are motivated by different types of gameplay. For example, some players are motivated to play games featuring challenge and competition, while some players might be motivated by games featuring story and strategy.

Once you've designed a game that players will be interested in playing, you want to keep those players engaged in the gameplay. There are other motivational factors that can help accomplish this.

We can use research in psychology to understand what factors motivate people to perform behaviors in general (whether it is playing a game or doing something else). Two of the possible ways to classify these motivational factors include:

• External vs. Internal — External motivations originate outside ourselves, while internal motivations come from within ourselves.

• Negative vs. Positive — Negative motivations involve avoiding painful experiences, while positive motivations involve seeking out pleasing experiences.

This diagram is a model that combines both of these dimensions of motivations:

EXTERNAL MOTIVATIONS: REWARDS AND PUNISHMENTS

Rewards and punishments are external motivations. As we know, rewards are positive, and punishments are negative. They can be very effective at getting people to do things. However, the effectiveness depends on the amount and frequency of the rewards or punishments. Psychologist B.F. Skinner conducted numerous studies on the effectiveness of external motivations on behavior.

Rewards and punishments are commonly used in video games. Rewards and punishments often help players learn how the gameplay works — and are often a core part of the gameplay experience.

• Rewards in games might include: receiving points, gaining special abilities, etc.

• Punishments in games might include: losing health, losing resources, etc.

Even things like sounds can be used in a game as reward or punishment: an annoying sound might play while an enemy is alive, a pleasing sound might play when the enemy is defeated, etc.

An advantage of using external motivations is they quickly teach and reinforce desired behaviors. People quickly learn the cause-and-effect behind rewards and punishments.

However, the drawback with external motivation is that people will also quickly stop performing a behavior if the rewards or punishments are removed — unless the person has already developed some internal motivation to keep performing the behavior.

In fact, studies have shown that people's internal motivation to perform a behavior can actually become lower after becoming dependent on external motivation.

YOUR TASK

In this assignment, you will explore how external motivations are used in games. The next assignment will focus on internal motivations in games.

1. Follow the instructions and links in this assignment to playtest two games to compare their use of rewards and punishments.

2. Discuss your findings as a class.

Your project challenge is to design and build a video game that people want to play.

Your team will solve the project challenge by applying a user-centered design process that follows an iterative "Learn-Build-Measure" cycle. In this project, the players of the game are your users.

A key source of information during the game design process will come from playtesting — having users play the game in order to get feedback on specific aspects of the game. Playtesting of a game is similar to user testing of an app.

1. Research Problem Space - Let's start by exploring what makes a game engaging and motivating to players. Then you'll explore the elements that help define all games. You'll practice using the Phaser JS game engine to code some sample video games. You'll also practice creating sound effects and animated art for games.

   • Determine your gamer motivation profile

   • Analyze external motivations in games

   • Analyze internal motivations in games

   • Analyze game design elements

   • Phaser Practice 1: Code a matching game

   • Phaser Practice 2: Code a top-down game

   • Phaser Practice 3: Code a side-scrolling game, and create custom assets

2. Define Problem to Solve - Your team will identify the gaming motivations and experiences that your game is intended to provide for your target players. Then your team will generate ideas for games that might appeal to these target players. Your team will produce game treatments for several possible game concepts. After evaluating the game treatments with target players, your team will select a final game concept to focus on.

   • Form project teams

   • Create persona for target players

   • Generate game ideas

   • Refine ideas to create game treatments for top game concepts

   • Evaluate game treatments to select final game concept

3. Design Solution & Deliver Proposal - Create a game design document, representing a conceptual prototype of your game. Then create a paper prototype of your game to playtest, evaluate, and refine your game's design. Present your proposed game design for critique by other teams.

   • Draft game design document

   • Create paper prototype of game

   • Playtest paper prototype to refine game design

   • Present proposed game design for critique

4. Build & Develop Solution - Create a plan to develop a digital prototype of your game design. During development, track your team's progress and any issues that arise. Program your game code in stages, starting with the core game mechanics and iteratively adding, testing, and refining other features. Create and add the visual and audio assets for the game. Create a marketing website to promote your game.

   • Create development plan for game

   • Code game in iterative stages

   • Create art and sound for game

   • Create marketing website for game

5. Evaluate & Improve Solution - After creating your game and marketing website, test them with target players to gather feedback and identify possible improvements to make. If feasible, implement improvements.

   • Evaluate game with external playtesters

   • Evaluate marketing website with user testing

   • Analyze evaluation data to identify possible improvements

6. Reflect & Present Project Results - At a public poster presentation, explain your team's design process and demonstrate your game. Be prepared to respond to questions. Each team member will reflect on his or her project experience.

   • Create project poster for public presentation

   • Present project solution to public audience

   • Write personal reflection on project experience

What do games have in common with each other?

Games have certain design elements that help define them as being games — whether it is a board game, a card game, a sport, a video game, etc. If you're going to create a game, you'll need to make design decisions about all the key elements of your game.

For example, we all recognize checkers, soccer, and Space Invaders as being examples of games. What do these have in common that defines them as being games?

We would probably agree that one element that games have is players — people that agree to participate in the game. Checkers has two players. Soccer features two teams of players. Space Invaders is a single-player game. Every game has one or more players as part of its design.

Game designers have come up with different ways to define the elements of games. In this assignment, you will define your own set of game design elements by constructing an affinity diagram.

Constructing an affinity diagram involves three basic steps: 1. Record each idea separately. It helps to use index cards or sticky notes, if possible. Otherwise, make a list. 2. Sort related ideas into groups. You can have as many groups — or as few groups — as you need, based on the patterns in the ideas. 3. Label each group to identify the pattern or relationship they represent.

After you construct the affinity diagram, you'll compare your results with a specific list of game design elements that we'll be using for this project.

YOUR TASK

1. Work with a partner or small group to construct an affinity diagram of the elements that define games. Record your ideas, sort them into groups, and label the groups.

2. Discuss your findings as a class. How similar are they?

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.

Step 6: Add Sound Effect

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:

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.

Step 7: Add Text to Game

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'

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.

Step 8: Add Other Emoji Sprites

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.

Step 9: Add Custom Function to Check for Matches

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.

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:

• && 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.

Step 10: Add Improvements to Game

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:

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.

How do we create video games that people want to play?

During this project, the entire class represents a video game company that will be divided into teams. Each team will design and develop its own video game concept. The teams will help improve each other’s games through feedback and playtesting.

At the conclusion of the project, all teams will present their video games at a public game convention.

Design Constraints

• 2D game world

• Single player game (or multi-player game using single computer)

• Single level game (or single level of multi-level game)

Design Criteria

• Innovative: Game is unique (could be unique remix of existing game concepts).

• Engaging: Game is fun and motivating to play (based on targeted gaming motivations).

• Functional: Game is functional and has no major problems (such as loopholes in rules that provide unintended advantage, dead ends that prevent player from progressing, etc.).

• Usable: Game provides clear feedback to player and is easy for new player to understand (such as learning game's controls, rules, objectives, etc.).

• Balanced: Game mechanics are fine-tuned to produce desired gameplay experience (such as balancing success vs. failure, risk vs. reward, skill vs. chance, etc.).

Design Team Roles

Each team member will be a Game Designer, contributing to the ideas, decisions, and work related to the design of their team's game.

In addition, each team member will have at least one other specialized role:

• Programming Lead: leads programming of game

• Art Lead: leads creation of art and sound for game

• Research Lead: leads playtesting and marketing of game

• Project Manager: leads team to ensure work is high-quality and completed on time

The recommended team size is 2-4 people. Your teacher will determine how many people each team must have:

• Teams of 2 people need to have separate people acting as Programming Lead and Art Lead. Each person will also take on one of the other remaining roles. It is recommended to have the Programming Lead also act as the Project Manager and to have the Art Lead also act as the Research Lead.

• Teams of 3 people need to have separate people acting as Programming Lead, Art Lead, and Research Lead. One person will also act as the Project Manager. It is recommended to have the Research Lead also act as the Project Manager.

• Teams of 4 people will have separate people acting in each of the four roles.

Each team member is responsible for contributing meaningfully at all times to the team project. Each team member must be willing and able to help work on any task at any time when needed. One of the responsibilities of the Project Manager is to ensure the team is working and collaborating effectively.

IMPORTANT: Each lead person is responsible for planning and delegating the tasks for their speciality area. However, this does not mean that only one person completes that type of work. At certain times, multiple team members will be working together on the same task, while at other times, they may be working in parallel on different tasks.

Final Team Deliverables

• Video Game that is published online and ready to play

• Marketing Website for game, which includes a gameplay demo video and a link to play game

• Poster for final presentation that highlights key features of game and key steps in creating game

• Presentation at public game convention to demonstrate game and explain how it was designed, built, and tested

In this second practice, you're going to create a top-down game that shows an overhead view of the player. It will be a space shooter game, similar to . This game will feature a nice balance of player skill, random chance, and increasing challenge. It will reinforce the basic concepts of using Phaser to create a game, plus show you some advanced features in Phaser.

Our game will be an update to the classic Asteroids that we'll call Asteroids 2084. Here's its premise:

The year is 2084. The Mars colony is running out of water and needs to reach the icy moons orbiting Jupiter. You're a spaceship pilot sent on a scouting mission to clear a path to Jupiter through the asteroid belt. Asteroids threaten to collide with your ship from all directions. Your only option is to evade and destroy the asteroids before they destroy you.

In this practice, all the game assets (i.e., images and sounds) and some of the game code will be provided. Focus on two things: (1) becoming familiar with the new Phaser commands that will be introduced, and (2) applying the Phaser commands you've already seen.

PREP STEPS

3. Place the assets folder into your game template folder.

4. Test your Phaser game template by previewing the HTML file online. If everything's ready to go, you should see a solid black box (your blank game canvas) on your webpage.

CODING STEPS

This second practice game will be coded in 15 steps, with the last step being an extra credit challenge. Some steps will involve coding that's similar to things you did previously. However, most of the steps will also introduce and explain new Phaser features.

As a reminder, all your game coding is done in your JS file (code.js).

The steps are outlined below. The instructions for Steps 1-5 start on the next page.

Step 1: Add Player Sprite

Step 2: Add Player Input

Step 3: Add Physics and Player Movement

Step 4: Add Tilesprite Background

Step 5: Add Asteroids Group

Step 6: Add Player Collision with Asteroids

Step 7: Add Player Weapon

Step 8: Add Particle Effect to Asteroids

Step 9: Add Asteroid Spawning

Step 10: Add Score

Step 11: Add Player Shields (Health Bar)

Step 12: Add Player Lives

Step 13: Add Extra Life Reward

Step 14: Add Game Start and Game Over

Step 15: Add Enemy Ship (Extra Credit)

Now your team will use its paper prototype to playtest your game, in order to evaluate the core gameplay and improve the game design.

You'll playtest your paper prototype in two stages:

• Internal Playtesting → External Playtesting

Internal playtesting is having your own team play the game to evaluate it.

External playtesting is having people outside your team play the game to evaluate it. Ideally, you would recruit people that match your target player persona.

After playtesting, your team will update its game design document to reflect any necessary additions or changes to the game's design.

YOUR TASK

1. Playtest your paper prototype internally within your team to clarify and refine your game design. If necessary, revise your game design document and/or paper prototype.

   • Have one person on your team act as the player. The player can perform any actions allowed by the procedures of the game.

   • The rest of your team will act as the "computer" by responding to the player's actions and controlling the other characters and game objects — based on the rules of the game.

   • Focus on making sure the core gameplay works, makes sense, seems fun, and matches your targeted design goals (gaming motivations and player experience goals).

2. Recruit external playtesters by partnering with another team. Have the other team playtest your paper prototype. After 15-20 minutes, the two teams can switch roles, so the other team's paper prototype is also playtested. (If time allows, have more external playtesters play your game.)

   • The design team should briefly:

     • identify the game's targeted gaming motivations and player experience goal(s)

     • explain the game's premise and objective

     • describe and demonstrate the basic actions that the player can perform during gameplay (optional: it might help to provide a "cheat sheet" that the player can refer to)

   • One person from the design team should observe and record notes during playtesting (such as: what parts of the gameplay seem to work well, what issues occurred, etc.).

   • The rest of the design team will act as the "computer" during playtesting.

   • One person from the external team will act as the player, while the rest of the external team will observe the playtesting.

   • Both during and after playtesting, the external team can ask questions and provide feedback. The design team can respond and can ask their own questions to clarify the feedback or to get feedback on specific aspects of the game.

3. Use the observations and notes from the external playtesting to clarify and improve your game's design by making additions and/or revisions to your team's game design document — including your concept sketches (if needed).

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.

Step 6: Add Player Collision with Asteroids

Let's make the game respond if the spaceship collides with any of the asteroids.

Phaser's Arcade Physics system has two methods (functions) to detect when two game objects "touch" each other:

• collide() checks to see if the two objects are colliding and keeps them separated (so they don't overlap) — if one or both of the objects is moving, they can transfer momentum between each other (if you set a body.bounce value for the objects, they'll bounce off each other)

• overlap() simply checks to see if the two objects are overlapping (but the objects will pass right through each other)

The two objects being checked can be individual objects and/or groups of objects, such as: Sprite vs. Sprite, Sprite vs. Group, Group vs. Group. For groups, each member of the group is checked individually in sequence.

Add this Phaser command in your update() function (before the if-else statements for the player movement):

game.physics.arcade.collide(player, asteroidGroup);

This command tells the Arcade Physics system to check for collisions between the player sprite and any sprite in the asteroidGroup.

Refresh your HTML preview to verify that the spaceship can collide with the asteroids (and it will change their velocity).

Change Collision Areas of Sprites

You probably noticed that the spaceship and asteroids act like they collide before they touch. This is because the player sprite and each asteroid sprite are actually rectangles that have transparent areas. The transparent areas of the sprites are colliding, so it seems like they collide too soon.

Luckily, Arcade Physics has two ways that we can change the collision area of a sprite's body to more closely match its visual appearance:

• body.setCircle() allows you to change the sprite's collision area to be a circle of a specified radius (which you can offset from the top-left corner of the sprite)

• body.setSize() allows you to change the sprite's collision area to be a rectangle with a specified width and height (which you can offset from the top-left corner of the sprite)

Since the asteroids are basically circles, let's set their collision areas to be circles.

The asteroid sprite frames are 40 pixels in width and 40 pixels in height. If viewed in an image editor, you would see that the asteroid is about 30 pixels across in diameter with about 5 pixels of transparent area on all sides:

The pink circle drawn above represents the circular collision area that we want each asteroid to use (instead of the full image).

Add this Phaser command inside the for loop that adds the asteroids to the asteroid group (after the code that sets the anchor for each asteroid):

asteroid.body.setCircle(15, 5, 5);

The setCircle(15, 5, 5) sets the body collision area to be a circle with a radius of 15 pixels (30 pixels in diameter) that is offset from the left edge of the frame by 5 pixels in the x-direction and offset from the top edge by 5 pixels in the y-direction. This offset will center the circle within the frame.

Let's do something similar with the spaceship, which has frames that are 64 pixels in width and 64 pixels in height. Visually, the spaceship is not a rectangle, and it's not a circle — it's more like a triangle. However, triangle is not an option for the body collision shape. Let's just use a circle because it's close enough (besides the ship rotates in a circular motion):

The pink circle drawn above represents the circular collision area that we'll use for the spaceship. It's not a perfect match, but it's better than the using the full image for collisions.

Add a Phaser command to set the body collision area of the player sprite to be a circle with a radius of 20 pixels that is offset by 12 pixels from the left of the frame and 12 pixels from the top of the frame. Add the command in the create() function (after the command that enables physics on the player sprite).

Refresh your HTML preview to verify that the spaceship and asteroids are now visually closer when they collide with each other.

What should really happen in our game when the spaceship collides with an asteroid is that the spaceship should be damaged or destroyed and the asteroid should be destroyed.

Modify your existing collide() statement in the update() function, so it looks like this:

game.physics.arcade.collide(player, asteroidGroup, collideAsteroid, null, this);

This command tells the game to run a custom function named collideAsteroid when the physics system detects a collision between the player sprite and any sprite in the asteroidGroup. (null, this are two additional parameters that you'll always include). The two specific sprites involved in the collision will be passed into the custom function as parameters (variables).

Now you have to actually create a custom function named collideAsteroid, and add code inside to do something when this type of collision occurs.

Add this code to the very end of your code.js file (after the update() function):

function collideAsteroid(player, asteroid) {

}

This creates the custom function, though it has no code yet inside its curly braces { }.

Notice that we included player, asteroid inside the parentheses after the function's name. These represent the parameters — variables that are passed into the custom function when it is called. The parameters represent the specific sprites involved in the collision, in the same order they are listed in the game.physics.arcade.collide() function.

The parameter names act as local variables inside the custom function, so the names of the parameters do not have to exactly match the sprite names in the collide() function. However, it will be much easier to understand what's happening in the custom function if the names are either identical or similar. Inside the custom function, whatever you do to the parameter variables will affect the sprites they represent.

Within the custom function collideAsteroid(), the parameter player represents the player sprite (easy to understand because both use the same name). The parameter asteroid represents the specific asteroid sprite from the asteroidGroup that collided with the player sprite. (We could use ship as the parameter name to represent the player sprite and rock as the parameter name to represent the sprite from the asteroidGroup — and the custom function would work exactly the same. However, the code might seem less clear to us.)

Kill Asteroid

Alright, enough of that — let's destroy the asteroid involved in the collision.

Add this Phaser command inside the collideAsteroid() function by pasting it between the curly braces { }:

asteroid.kill();

The kill() command removes a sprite from the game. Phaser actually keeps the sprite object saved in memory, in case you decide to reuse the sprite later. Phaser has commands to revive() or reset() a "dead" sprite to add it back into the game.

Refresh your HTML preview to verify that each asteroid will disappear if it collides with the spaceship.

Add Collision Sound Effect

Now let's add a sound effect that will play one time whenever a collision occurs:

• Use boomSound as the name of the global variable for the sound.

• Use assets/sounds/boom.wav for the sound file. Assign a unique asset key name to the sound, such as boom.

• Add boomSound to the game with a volume of 0.3.

• Add a Phaser command inside the collideAsteroid() function to play boomSound.

Refresh your HTML preview to verify that the explosion sound plays whenever an asteroid collides with the spaceship.

Kill Player and Add Camera Shake

Add a Phaser command inside the collideAsteroid() function to kill the player sprite.

Let's also add a visual effect as feedback to make the collision feel more realistic.

Add this Phaser command inside the collideAsteroid() function:

game.camera.shake(0.02, 250);

This command will cause the game screen to "shake" briefly when a collision occurs:

• The first number 0.02 represents the intensity of the camera shaking as a percentage of the camera size (0.02 = 2%).

• The second number 250 represents the duration of the shaking in milliseconds (1000 milliseconds = 1 second).

Refresh your HTML preview to verify that the game display "shakes" and the spaceship disappears when it collides with an asteroid.

Add Explosion When Player Killed

Let's add an explosion effect when the player sprite is killed. The explosion will be an animated sprite that we'll hide from view until needed.

Use explosion as the name of the global variable for the sprite.

Use assets/images/explosion.png for the spritesheet image. It contains 16 animation frames that are each 128 pixels in width and 128 pixels in height. Assign a unique asset key name to the spritesheet, such as explosion.

In your create() function (after the for loop that added the asteroids), add the explosion sprite to position 100, 100 of the game (this will just be a temporary position), and set the sprite's anchor to its center.

Add an animation to the explosion sprite named explode that will play all 16 frames in order (list an array from 0-15) at a frame rate of 30, with loop set to false.

Refresh your HTML preview to verify that the first frame of the explosion sprite is visible in the upper left of the game screen.

We're actually going to hide the explosion sprite until we need to display it (and then we'll move it to the player sprite's position when it's killed).

Add this Phaser command to your create() function (right after the command that added the animation for the explosion sprite):

explosion.visible = false; // hide until needed

Refresh your HTML preview to verify that the explosion sprite is no longer visible.

When the player sprite is killed, we will move the explosion sprite to the same position where the player was located, make the explosion sprite visible, play the explode animation, and then remove the explosion sprite again.

Add this Phaser code in your create() function (after the code that added the player animation, but before the code that added the asteriodGroup):

    player.events.onKilled.add(function() {
        explosion.reset(player.x, player.y);
        explosion.animations.play('explode', 30, false, true);
    });

This code adds an event when the player sprite is killed. This event will perform the code listed inside the function's curly braces { }:

• reset() makes the explosion sprite visible again and moves it to the x-y coordinates listed inside the parentheses. In this case, we want to make it appear at the player sprite's position.

• The command to play the animation includes an extra argument at the end:

  • explode is the animation key name

  • 30 is the frame rate

  • false means do not loop the animation (play it only once)

  • true means kill (remove) the sprite after the animation has ended

Refresh your HTML preview to verify that the explosion animation will appear (and then disappear after playing) when and where the spaceship collides with an asteroid.

Step 7: Add Player Weapon

Let's give your player a way to fight back. It's time to add a weapon.

Phaser's Arcade Physics system includes a Weapon object with properties and methods related to firing bullets. The weapon is really just a group of bullet objects.

The "bullets" for a weapon can be any image (or spritesheet) that you want: bullets, lasers, arrows, fireballs, etc. If you want the weapon to fire smiley face emojis, you can do that.

Adding a weapon to the game involves 3 steps:

• Declare a global variable for the weapon.

• Load an image (or spritesheet) for the bullets into memory in the preload() function.

• Add the weapon to the game in the create() function.

The weapon can then be fired in the update() function.

Let's get ready to add your weapon:

• Add a global variable named laser for the weapon.

• Preload assets/images/laser.png for the bullet image. Assign a unique asset key name to the image, such as bullet.

Remember that the order in which visual objects are added in the create() function determines which objects appear in front of (or behind) other objects. We want the weapon's bullets to look like they are being fired from beneath the spaceship, so we need to add the weapon before the player sprite is added in the code.

Add this Phaser code in your create() function (before the code that adds the player sprite):

    laser = game.add.weapon(10, 'bullet');
    laser.bulletKillType = Phaser.Weapon.KILL_CAMERA_BOUNDS;
    laser.bulletSpeed = 600;
    laser.fireRate = 250;

    // set bullet collision area to match its visual size
    laser.setBulletBodyOffset(24, 12, 6, 6);

Let's examine this code:

• The first line adds the weapon. 10 represents the number of bullets to create in the bullet group. The bullets will be recycled as they are fired, so this sets an upper limit on the maximum number that could be on-screen at any one time. 'bullet' is the asset key name that it will use for each bullet.

• The second line will kill (remove) a bullet if it leaves the game display boundaries. Phaser has multiple options for bulletKillType.

• The third line sets the bullet speed in pixels per second.

• The fourth line sets a limit on the firing rate. In this case, a bullet can only be fired every 250 milliseconds (even if the player holds down the fire key).

• The last line changes the bullet's collision area to be a rectangle with a width of 24 pixels and height of 12 pixels offset 6 pixels from the left edge of the bullet image and offset 6 pixels from the top edge of the bullet image.

There are many other Phaser.Weapon properties that you could use in other games, if needed.

We want the laser weapon to be associated with the player sprite. Phaser has a method for the weapon to track (follow) another sprite, so the bullets will be fired from that sprite's position.

Add this Phaser command in your create() function (after the code that added the player onKilled event):

laser.trackSprite(player, 0, 0, true);

This command will ensure the laser weapon tracks the position of the spaceship:

• player represents the name of the sprite that the weapon will track

• 0, 0 represents an x-y offset from the sprite's anchor position. Using 0, 0 means the weapon will fire from the player sprite's center.

• true means that the weapon should also track the sprite's rotation. We need this for our game since the ship rotates, but other games may not need this (so they could list false or nothing at all).

Fire Weapon When Fire Key Pressed

Now we just need a way to fire the laser weapon. Remember that way back in Step 2, you assigned the spacebar as an input named fireKey.

Add an if statement in your update() function (after the if-else statements for the player movement) to check when the fireKey is being pressed.

Add this Phaser command to your code, so it will be performed when your new if statement is true:

laser.fire();

Refresh your HTML preview to verify that your spaceship fires the laser weapon when the spacebar is pressed.

You'll see that the laser "bullets" don't do anything yet — we'll have to add a collision between the laser bullets and the asteroids.

You'll also discover that the laser can still be fired even after the player sprite has been killed.

Modify your existing if statement for the fireKey, so it will check whether the fireKey is being pressed AND the player exists.

• Remember that && is used to represent AND

• Command to check if player exists (returns true or false): player.exists

Refresh your HTML preview to verify that the laser weapon can only be fired when the spaceship exists.

Add Weapon Sound Effect

Let's add a sound effect that will play whenever the weapon is fired:

• Use fireSound as the name of the global variable for the sound.

• Preload assets/sounds/fire.wav for the sound file. Assign a unique asset key name to the sound.

• Add fireSound to the game with a volume of 0.1. Add the sound after the code that set the laser to track the player sprite.

Add this Phaser code inside your create() function (after the code that added fireSound):

    laser.onFire.add(function() {
        fireSound.play();
    });

This code will play the fireSound every time the laser weapon is fired. The reason for playing the sound using this code is the weapon has a fireRate that limits how frequently it can fire. If we played the sound whenever the fireKey is being pressed, the sound would play too frequently (and would play even when a new bullet is not actually fired). So the code above will keep the sound effect synced with the actual weapon firing.

Refresh your HTML preview to verify that the sound effect plays whenever the laser weapon is fired.

Add Collision Between Weapon Bullets and Asteroids

In your update() function (directly after your existing collide() function), add a new Arcade Physics collide() function to check for collisions between the laser bullets and the asteroids:

• Check for collisions between laser.bullets and asteroidGroup. List these two sprite groups in this order.

• When a collision is detected, it should run a custom function called shootAsteroid.

Add a new custom function named shootAsteroid() (after your collideAsteroid() function). Inside the parentheses () after the function name, list bullet and asteroid as parameters (in that order).

Inside the curly braces { } of the shootAsteroid() function, add Phaser commands to:

• kill the asteroid

• kill the bullet

• play the boom sound effect

Refresh your HTML preview to verify that the asteroids are destroyed when they are hit by the laser.

Step 8: Add Particle Effect to Asteroids

We have an explosion animation that plays when the player sprite is killed, so let's add a particle effect to show the asteroid breaking up into pieces when it's destroyed.

Phaser's Arcade Physics system includes a Particle Emitter object with properties and methods related to emitting particles. An emitter is just a group of particle objects (similar to how a weapon is just a group of bullet objects).

Particle emitters are useful for one-time events (such as explosions, etc.) or continuous effects (such as rain, snow, flames, etc.).

Adding a particle emitter to the game involves 3 steps:

• Declare a global variable for the particle emitter.

• Load an image (or spritesheet) for the particles into memory in the preload() function.

• Add the particle emitter to the game in the create() function.

The particle emitter can then be activated in the create() function or update() function, depending on what you need for your game. The particle emitter can be a single point or can be an area of a specified width and height.

Let's get ready to add your particle emitter:

• Add a global variable named asteroidParticles for the particle emitter.

• Preload assets/images/asteroid-particle.png for the particle image. Assign a unique asset key name to the image, such as particle. This particle image is just a scaled down version (20 pixels by 20 pixels) of the first frame from the asteroid spritesheet:

Add this Phaser code in your create() function (after the for loop that added the asteroids, but before the code that adds the explosion sprite):

    asteroidParticles = game.add.emitter(0, 0, 50);
    asteroidParticles.makeParticles('particle');
    asteroidParticles.gravity = 0;
    asteroidParticles.setAlpha(1, 0, 1000); // fade out after 1000 ms

Let's examine this code:

• The first line adds the particle emitter to the game. 0, 0 represent the x and y coordinates where the particles will be emitted from. (Later, we'll change the x and y coordinates to match the x and y coordinates of the asteroid being killed.) 50 represents the maximum number of particles to create in the emitter group. We won't be using all 50 for a single particle explosion — we just want to have enough available in the game's memory, in case we need multiple particle explosions on-screen at the same time.

• The second line adds the particle objects to the emitter group using the provided asset key name.

• The third line sets the gravity property of the particles to zero (since we don't want any gravity for our particular game). By default, particles will have a gravity value of 100, unless you change it.

• The fourth line will make the particles fade out of view from an alpha of 1 (opaque) to 0 (transparent) over 1000 milliseconds (1 second).

When an asteroid collides with the spaceship or with a laser bullet, we want to create an "explosion" of particles at the asteroid's position.

Add this Phaser code in your collideAsteroid() function (right before the asteroid.kill() command):

    asteroidParticles.x = asteroid.x;
    asteroidParticles.y = asteroid.y;
    asteroidParticles.explode(1000, 5);

Add the same code in your shootAsteroid() function (right before the asteroid.kill() command).

Let's examine this code:

• The first two lines set the x and y position of the asteroidParticles emitter to be the same as the x and y position of the asteroid involved in the collision.

• The third line creates an explosion effect from the particle emitter. 1000 represents the lifespan of the particles in milliseconds (1000 ms = 1 second), and 5 represents the number of particles to emit.

The particles will be emitted in random directions with slightly different speeds, so the explode() effect looks slightly different each time.

Remember in the create() function that we set our particles to fade out over 1000 milliseconds. Since we also set our particles to have a lifespan of 1000 milliseconds during the explode() effect, they will be removed as soon as they fade out.

If we didn't fade out the particles, they would disappear abruptly after 1000 milliseconds, which would look odd. The fading makes the particle explosion seem more natural.

Refresh your HTML preview to verify that a particle explosion occurs when the asteroids are destroyed.

Step 9: Add Asteroid Spawning

Our game is not going to last very long if there are only 10 asteroids to shoot. As asteroids are destroyed, the game should periodically spawn (generate) new asteroids to replace them, so the game can keep going.

As part of our game's design, we'll keep it so there are never more than 10 asteroids at any one time. (Of course, we didn't have to design our game that way.)

Here are a few different options for when to spawn new asteroids:

• Immediately spawn a new asteroid whenever an existing asteroid is destroyed

• Use a timer to spawn a new asteroid after an existing asteroid is destroyed (such as: making new asteroid appear 5 seconds after one is destroyed)

• Use a random number to decide when to spawn a new asteroid after an existing asteroid has been destroyed (i.e., timing of new asteroid will be random)

Let's go ahead and use a random number for our asteroid spawning. It will add some variation and unpredictability to the asteroid spawning.

Add this Phaser code inside your update() function (after the code that makes the asteroids wrap around the game world):

    // randomly add new asteroid if dead asteroid available
    if (Math.random() < 0.02) {
        var asteroid = asteroidGroup.getFirstDead();
        if (asteroid) {
            // reset asteroid at random position in game


            // give asteroid random speed and direction


            // make asteroid fade into view
            asteroid.alpha = 0; // start as transparent
            game.add.tween(asteroid).to({alpha: 1}, 500, Phaser.Easing.Cubic.Out, true);
        }
    }

There is some missing code that you will need to insert, but let's first explain how the provided code works:

• Each time a loop of the update() function occurs, the game will generate a random number (which will be a decimal value between 0 and 1). If the the random number is less than 0.02, then it will check for a dead asteroid. This means that each loop of the update() function has a 2% chance of checking for a dead asteroid. Even though 2% is a very low chance, the game loop runs many times per second, so it doesn't take that much time for a dead asteroid check to occur — however, the amount of time between each dead asteroid check will be random, which is what we wanted.

• When the random number is less than 0.02, the code will check for the first dead (killed) sprite in the asteroidGroup and assign that dead sprite to a local variable called asteroid. If there aren't any dead sprites at the moment, then asteroid will be assigned a value of false.

• The next check is whether asteroid is true — meaning was there a dead sprite? If so, then it performs the rest of the code (which will reset the asteroid sprite, so it is "alive" again).

Notice the tween command at the end. A tween is a command that allows you to change one or more properties of an object over a specified period of time. Tweens are very useful for adding different types of automated effects in your game. In this case, the tween will make the new asteroid fade into view by changing it from transparent to opaque over 0.5 seconds:

• The tween is added to the asteroid sprite, and it is a to tween.

• Inside the curly braces { }, it lists all the properties of the sprite that will be tweened. In this example, we're just going to change the alpha property (which represents the sprite's transparency) from its current value (which we set to 0 in the previous line of code) to a new value of 1 (which is opaque).

• 500 represents the time period (in milliseconds) for the tween. So it will take 0.5 seconds for the alpha property to change from its current value to its new value.

• The change in the property will follow a pattern called Phaser.Easing.Cubic.Out (which basically means it will change faster at first but then slow down — making this particular tween seem more "natural"). Phaser has different types of easing patterns that can be used for tweens.

• true tells Phaser to start the tween automatically. (Otherwise, you can use false to set up a tween without running it, and then use a start() command to run the tween.)

Now it's time for you to add the missing code inside the curly braces of the if (asteroid) statement:

• Add a Phaser command to reset() the asteroid at a random X-position and random Y-position in the game world. (Hint: Look back at Step 6 to see how you reset the explosion sprite, and look at Step 5 to see how you can pick a random X and Y position in the game world)

• Add Phaser code to give the asteroid a random speed and direction. (Hint: How did you do this in Step 5?)

Because we are "recycling" a dead asteroid sprite from the asteroidGroup, the "new" asteroid will still have the same properties as the original sprite — unless we change those properties.

So we did give the asteroid a new random starting position and a new random speed and direction.

However, notice that we did not have to add or change several other existing properties for the asteroid:

• We didn't need to set the anchor position for the asteroid. It will still use its same anchor position that was set when it was first added to the asteroidGroup in the create() function.

• We also didn't need to change the asteroid collision area to be a circle (because it was already set to a circle when it was first created).

• We also didn't have to add animations to the asteroid because it still has them from before. The sprite will also continue to play the same animation (spin-clock or spin-counter) that it was already playing before.

Refresh your HTML preview to verify that "new" asteroids will randomly spawn and fade in after other asteroids are destroyed.

Now your game will keep recycling the same 10 sprites in the asteroidGroup, so the gameplay can continue for as long as the player can stay alive.

Increase Maximum Speed of Asteroids

Now that our game will keep spawning new asteroids as the player shoots them, let's have the game become more challenging as the player progresses.

Every time the player shoots an asteroid, let's increase the asteroid maxSpeed by a small amount. This won't change the speed of any existing asteroids. However, it will affect the possible speed of new asteroids.

A higher maxSpeed means each new asteroid has the potential to be slightly faster than the previous asteroids. Since the speed of each new asteroid is calculated as a random value (up to the maxSpeed), some of the new asteroids will still be slow — but over time (as the player keeps shooting asteroids), some of the new asteroids will be much faster — increasing the challenge of the game in response to the player's skill. (Our game's attempt at promoting flow.)

In your shootAsteroid() function, add a line of code to increase the value of maxSpeed by 1:

maxSpeed = maxSpeed + 1;

Refresh your HTML preview to verify that some of the new asteroids seem to be faster as the game progresses.

The change in the maximum possible speed is small, so it would require destroying at least 50 or more asteroids for it to start to become obvious that some of the new asteroids are faster — but don't worry, the asteroids will definitely get faster as the game progresses.

If you want to really speed things up, you could temporarily change the line of code to increase the maxSpeed by 10 — and then test it out to verify that it does affect the speed of new asteroids.

Step 10: Add Score

Let's give the player some score points for every asteroid destroyed by a laser.

So we'll need a variable to keep track off the player's score, and we'll need to display the score as text in the game display.

As a reminder, adding text to the game involves 2 steps:

• Declare a global variable for the text.

• Add the text to the game in the create() function.

Once the text has been added, you can use the variable's text property to change what the text displays. This is typically done in your update() function or in a custom function.

Here's what you need to do:

• Declare a global variable called score and assign it an initial value of 0

• Declare a global variable called scoreText

• In your create() function (after the code that adds the keyboard inputs), add scoreText as a text object at position 20, 20. Set the text to display: 'Score: ' + score (which will display the text in the quotes followed by the current value of the score variable). Use the same font styling that you used in Practice 1 (Arial, 20px, bold, #ffffff)

• You do not need to set the text's anchor or add a text shadow.

If you need hints, look back at Step 7 of Practice 1.

Refresh your HTML preview to verify that the score (with a value of zero) appears in the upper left of the game.

Now we need to increase the score every time the player shoots an asteroid.

Add Phaser commands in your shootAsteroid function to do the following (in order):

• Increase the value of score by 250

• Change the text property of scoreText by assigning it a value of: 'Score: ' + score

If you need hints, look back at Step 9 of Practice 1.

Refresh your HTML preview to verify that the score increases by 250 every time you shoot an asteroid.

Steps 11-15 continue on next page

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.

Step 1: Modify HTML and CSS

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):

<p>Coded by Firstname Lastname</p>

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).

body {
    background: #dddddd;
    text-align: center;
}

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.).

Step 2: Look at Starter Phaser JS Code

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:

// REMINDER: Do not copy and paste this code - it's already in your starter code

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'my-game',
{ preload: preload, create: create, update: update });

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.

Step 3: Change Background Color of 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 { }:

game.stage.backgroundColor = '#6699ff';

Does your code look like this now? Good.

function create() {
    game.stage.backgroundColor = '#6699ff';
}

Refresh your preview of your HTML file to verify that your game now has a blue background color.

How do Phaser commands work?

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:

game.stage.backgroundColor = '#6699ff'; // example 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.

Step 4: Add Emoji Sprite Using Image

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).

var hello1;

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 { }:

game.load.spritesheet('hello', 'assets/hello-sprite.png', 64, 64);

Does your code look like this now? Good — just checking.

function preload() {
    game.load.spritesheet('hello', 'assets/hello-sprite.png', 64, 64);
}

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:

hello1 = game.add.sprite(400, 300, 'hello');

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:

1. 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.

2. 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:

hello1.anchor.set(0.5, 0.5);

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:

hello1 = game.add.sprite(game.world.centerX, game.world.centerY, 'hello');

Refresh your HTML preview to verify that the sprite is still centered in the game.

Step 5: Add Player Input

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:

var hello1;
var spacebar;

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:

var hello1, spacebar;

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:

spacebar = game.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR);

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 { }:

    if (spacebar.isDown) {
        hello1.frame = Math.floor(Math.random() * 6);
    }

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

Steps 6-10 continue on next page

Be sure that you completed Coding Steps 6-10 on the previous page.

IMPORTANT: Take the time to read each step, and try to understand how the code works.

Step 11: Add Player Shields (Health Bar)

Right now, our game is very unforgiving — if the spaceship collides with just one asteroid, the game is over.

Let's give the spaceship some "shields" that will be damaged every time the ship collides with an asteroid. Once all the shields are gone, then the ship will explode.

Many games have some kind of health bar for the player's character — when the health reaches zero, the player dies in the game. The shields that we're going to add to our game are just a health bar for the spaceship.

Phaser has built-in properties and methods to keep track of the health of a sprite. When a sprite's health reaches zero, Phaser will automatically kill() the sprite.

• health is the property that represents a sprite's health value. You can set it to any value (but many game designers use 100 as the starting value for a sprite's health).

• maxHealth is a property that sets a maximum value for the sprite's health. You can set this to any value (but many game designers also use 100 for the maximum value). If your game has ways for the sprite's health to increase (e.g., by collecting health packs, resting, etc.), this will prevent the health from exceeding this limit.

• damage() is a method to decrease a sprite's health value. Inside the parentheses, you include a value representing the amount of damage.

• heal() is a method to increase a sprite's health value. Inside the parentheses, you include a value representing the amount of healing.

Add Player Health and Damage

Add this Phaser code in your create() function (after the command that set the angle of the player):

player.health = 100;
player.maxHealth = 100;

This will set the starting value of the player's health to 100 (and also set 100 as the maximum value).

Instead of killing the player sprite when it collides with an asteroid, let's damage the player's health by 25. After 4 collisions, the player's health will be zero, and Phaser will automatically kill() the player sprite.

In your collideAsteriod() function, replace the command that kills the player with this command instead:

player.damage(25);

Refresh your HTML preview to verify that it takes 4 collisions with asteroids before the spaceship explodes.

Add Health Bar for Shields

Now we just need to add a health bar, so the player has some visual feedback to track the amount of "shields" remaining for their spaceship.

Typically, a health bar is a rectangle that decreases (or increases) in width (or height) to represent the amount of health remaining. An easy way to do this in Phaser is to scale an image of a rectangle in one direction (either its width or its height).

We're going to use images of a red rectangle and a green rectangle to create our health bar:

Notice that these two bars are the exact same size. We're going to position them on top of each other as layers, so the red bar is behind the green bar.

The width of the green bar will represent the amount of health ("shields") remaining. When the shields are at maximum, the green bar will completely cover and hide the red bar.

When the player's health is damaged, we will scale down the width of the green bar, which will also reveal some of the red bar behind it. This will make it easier for the player to quickly see how much or how little health is remaining.

Let's first add a text label for the health bar (so it will be clear to the player what this bar represents):

• Add a global variable for healthText

• In your create() function (after the code that added scoreText), add healthText as a text object at position 210, 20. Set the text to display: 'Shields'. Use the same font styling that you used for scoreText (Arial, 20px, bold, #ffffff)

• You do not need to set the text's anchor or add a text shadow.

Refresh your HTML preview to verify that the text label (Shields) appears at the top of the game to the right of the score.

We're going to add the red and green bars to the game as images instead of as sprites.

• Add a global variable for healthBar, which will represent the image of the green bar (we don't need to create a variable for the red bar)

• Preload assets/images/health-red.png as the image for the red bar. Assign it a unique asset key name, such as red-bar. (Hint: If you need help, look back at Step 4 to see how to preload an image.)

• Preload assets/images/health-green.png as the image for the green bar. Assign it a unique asset key name, such as green-bar.

Add this Phaser command in your create() function (after the code that added healthText):

game.add.image(300, 20, 'red-bar');

This command does just what you think — it adds an image at position 300, 20 using the red-bar asset. Because we're not going to scale or change the red bar in any way, we don't have to assign it to a variable — we can just add it to the game.

Refresh your HTML preview to verify that the red bar appears at the top of the game to the right of the "Shields" text.

Now add this Phaser command (immediately after the command that added the red bar):

healthBar = game.add.image(300, 20, 'green-bar');

This command adds the green bar at the exact same position and assigns it to the healthBar variable (so that we can scale the green bar when the health value changes).

Because you added the red bar first and then added the green bar, the green bar will be layered on top of the red bar.

Refresh your HTML preview to verify that the green bar appears at the top of the game (and hides the red bar, which is actually behind it).

Scale the Health Bar

Now we just need to scale the width of the green bar, so it will shrink to represent the decrease in the player's health.

Phaser has a scale property for game objects (such as: text, images, sprites, etc.) that allows you to scale the object's width and height to make the object larger or smaller.

• To shrink the width or height, use a scale value that is between 0 and 1.

• To enlarge the width or height, use a scale value that is greater than 1.

• To keep the width or height the same size, use a scale value of exactly 1.

For our health bar, we only want to change the width of the green bar. We'll keep the height of the green bar the same size.

We can calculate the scale needed for the width of the healthBar by using a simple fraction — the scale should be the player's current health value divided by its maximum possible health value.

• For example, if the player's health is currently 25 and its maximum health value is 100, the scale for the width of the health bar should be 0.25 (25/100), which would look like this:

Add this Phaser command inside your collideAsteroid() function (immediately after the command that damages the player):

healthBar.scale.setTo(player.health / player.maxHealth, 1);

This command sets the scale values for the width and height (in order) of the healthbar image. The scale for the width will be calculated by dividing the player's health by its maximum health. The scale for the height will be kept at 1, so the height of the image doesn't change.

Refresh your HTML preview to verify that the width of the green health bar shrinks in proportion to the damage from each collision.

In our case, each collision should shrink the width of the health bar by 25% of its original width until it reaches zero (100 → 75 → 50 → 25 → 0). When the shields reach zero, the spaceship will explode.

Step 12: Add Player Lives

Some games only give the player one life during the game — when the player's character is killed, the game is over. Other games give the player unlimited lives, allowing the player to restart the game again and again (often by sending the player back to a previous checkpoint in the game). Some games give the player a limited number of lives.

The original Asteroids game (like many video games from the 1970s and '80s) gave the player 3 lives at the start of the game. The player could also earn extra lives by reaching certain scores in the game.

We're going to add both of these features to our game. In this step, we'll give the player 3 lives (spaceships) at the start of the game. When the spaceship explodes, the player loses one life — but a new spaceship will appear as long as the player has at least one life left. When the player is out of lives, the game will be over.

Our game will also give the player a chance to earn an extra life as a bonus after every 10,000 score points (10,000 → 20,000 → 30,000 → 40,000, etc.). However, our game will also limit the total number of lives (spaceships) to a maximum of 5 lives.

Add Lives Bar

Our game could just list the number of lives as text on the screen. Instead, we'll show spaceship icons to represent the number of lives. Visually, this will make it easier for the player to see at a glance how many lives remain. It will sort of be like a health bar for the number of lives left.

Here's the image for the number of lives remaining. It shows 5 spaceship icons because that's the maximum number of lives we decided to allow the player to have:

If we were to scale this image, we could make it look larger or smaller — but it would still show 5 spaceships.

So instead of scaling this image, we are going to hide part of it when the number of lives is less than 5.

Phaser has a method called crop() that allows you to only show part of an image (and hide the rest). You can also change the "crop" later to show less (or more) of the original image. The "crop" can be changed or reversed whenever you need because it doesn't actually alter the original image.

Let's first add a text label for the spaceship icons (so it will be absolutely clear to the player what these icons represent):

• Add a global variable for livesText

• In your create() function (after the code that added healthBar), add livesText as a text object at position 590, 20. Set the text to display: 'Ships'. Use the same font styling that you used for scoreText and healthText (Arial, 20px, bold, #ffffff)

• You do not need to set the text's anchor or add a text shadow.

Refresh your HTML preview to verify that the text label (Ships) appears at the top of the game to the right of the Shields health bar.

Now you're going to add the spaceship icons to the game as an image:

• Add a global variable for livesBar

• Preload assets/images/ship-lives.png as the image for the spaceship icons. Assign it a unique asset key name, such as lives.

• Add the image to the game at position 655, 20 and assign it to the livesBar variable.

Refresh your HTML preview to verify that the 5 spaceship icons appear at the top of the game to the right of the "Ships" text.

Crop the Lives Bar

Next we're going to start the player with 3 lives and crop the livesBar to only show 3 spaceships.

In order to crop an image, you create a rectangle of a specified width and height to represent the crop that you want to apply to an image. Then you can crop() the image using this rectangle. Any part of the original image that is outside of the crop rectangle will be hidden.

The spaceship icons image is similar to a spritesheet containing frames. The image has 5 identical spaceship icons, which are each 25 pixels in width and 25 pixels in height (including the transparent area around each icon). The entire image is 125 pixels in width and 25 pixels in height.

So we can set the width of the crop rectangle based on how many lives the player has left. For example, if the player has 3 lives left, then the crop rectangle should be set to a width of 75 pixels (3×25).

We want the height of the crop rectangle to be the same as the height of the spaceship icons image (which is 25 pixels in height).

Add these variables to your code:

• Add a global variable named shipLives and assign it an initial value of 3

• Add a global variable called livesCrop to represent the crop rectangle

Add this Phaser code to your create() function (after the command that added livesBar):

    livesCrop = new Phaser.Rectangle(0, 0, shipLives * 25, 25);
    livesBar.crop(livesCrop);

Let's examine this code:

• The first line of code creates a rectangle that you'll use for the crop. 0, 0 represent the position of the top-left corner of the crop rectangle (relative to the top-left corner of the image that it will crop). The next two numbers represent the width and height (in order) of the rectangle: shipLives * 25 is the width, and 25 is the height.

• The second line applies the crop for the livesBar image using the livesCrop rectangle.

Refresh your HTML preview to verify that the only 3 spaceship icons appear at the top of the game.

Subtract Life When Player Killed

Now we need to actually change the number of shipLives every time the player's spaceship is destroyed. Then we will want to re-crop the livesBar using a new width (based on how many lives remain).

As a reminder, in your create() function, you added an event that will run a function whenever the player is killed. This is where your game resets the explosion sprite and plays its animation. Now you're going to add some more code inside this event function to change the number of lives remaining and adjust the crop for the livesBar.

Add Phaser commands in your player.events.onKilled function to do the following (in order):

• Decrease the value of shipLives by 1

• Change the width of livesCrop by calculating its new value: livesBar.width = shipLives * 25;

• Apply the crop for livesBar using the livesCrop rectangle

Refresh your HTML preview to verify that only 2 spaceship icons will be shown after the spaceship is destroyed.

Spawn New Spaceship If Lives Remain

Now we need to respawn the player's spaceship if the player still has lives yet. We can use an if-else statement to determine if the number of lives left is greater than zero (otherwise the game is over).

Add this Phaser code in your player.events.onKilled function (after the code that updated the crop for livesBar):

        // respawn player if lives are left
        if (shipLives > 0) {
            player.x = game.world.centerX;
            player.y = game.world.centerY;
            player.angle = -90;
            player.body.velocity.set(0);
            player.body.acceleration.set(0);
            player.revive(player.maxHealth);
            player.alpha = 0; // start as transparent
            game.add.tween(player).to({alpha:1}, 2000, Phaser.Easing.Cubic.Out, true);

        }
        else {
            // game over

        }

If the player still has at least one life left, this code will:

• position the player sprite back at the center of the game with the spaceship pointing up (-90° angle)

• sets the player sprite's velocity and acceleration to zero

• brings the player sprite back to life with maximum health using the revive() method (alternatively, we could have used the reset() method)

• fades the player sprite into view using a to tween on the sprite's alpha property (2000 means the tween will take 2 seconds to complete)

Otherwise, the player has zero lives left, which means the game is over. In Step 14, we'll add some code to run when the game's over.

Refresh your HTML preview to verify that a new spaceship will appear after the spaceship is destroyed. After 3 spaceships have been destroyed, the game should be over.

Add Teleport Sound Effect

Let's add some audio feedback to make it clear to the player that a new spaceship has appeared.

Add a sound effect that will play one time whenever a new spaceship appears:

• Use teleportSound as the name of the global variable for the sound.

• Use assets/sounds/teleport.mp3 for the sound file. Assign a unique asset key name to the sound, such as teleport.

• Add teleportSound to the game with a volume of 0.5.

• Add a Phaser command to play teleportSound inside your player.events.onKilled function (after the code for the tween that fades in the new spaceship).

Refresh your HTML preview to verify that the teleport sound plays whenever a new spaceship appears.

Step 13: Add Extra Life Reward

Let's reward the player with an extra life every 10,000 score points (10,000 → 20,000 → 30,000 → 40,000, etc.). However, we will set a limit of 5 lives that the player can have at any point.

If the player already has 5 lives, we'll reward the player by setting the shields (health) back to maximum.

Let's play a sound effect as feedback to the player when either reward is received. We'll also do a visual effect when a new life is awarded.

If the player already has 5 lives and maximum health, then no reward will be given, but the player will get another chance to earn a reward after another 10,000 points.

Add code to your game to do the following:

• Add a global variable named maxLives and assign it a value of 5

• Add a global variable named newLife and assign it an initial value of 10000

• Add a global variable named lifeSound for the sound effect

• Preload assets/sounds/extra-life.wav and assign it a unique asset key name, such as life

• Add lifeSound to the game with a volume of 0.5

Now let's plan out the code that we'll need to check to see if the player has earned an extra life reward.

If the player's score is greater than or equal to newLife, then the player has earned a reward:

• Next we need to check if the number of shipLives is less than maxLives. If that's true, we'll give the player an extra life.

• Otherwise the player already has the maximum number of lives, so we'll check if the player's health is less than its maxHealth. If that's true, we'll set the health back to its maximum.

• In either case, we need to increase newLife by another 10000 points, so the player can earn another reward later.

Let's add the code for this check as a separate function in your game code.

Add a new custom function named checkNewLife() (after your shootAsteroid() function).

Add this code inside the curly braces { } of your checkNewLife() function:

    if (score >= newLife) {
        if (shipLives < maxLives) {
            // award extra life

        }
        // maxLives already reached
        else if (player.health < player.maxHealth) {
            // replenish health instead

        }
        // increase score needed for next new life
        newLife = newLife + 10000;
    }

As you can see, this code will perform the check that we planned out. However, there is some missing code that you'll need to add inside the if-else statements.

Add Phaser commands to award an extra life:

• Increase the value of shipLives by 1

• Change the width of livesCrop by calculating its new value based on shipLives

• Set the crop for livesBar using the livesCrop rectangle

• Update the crop for livesBar

• Play lifeSound

• Make the game screen flash a bright green color by using this command: game.camera.flash(0x00ff00, 500);

Add Phaser commands to replenish the player's health (if the maximum number of lives is already reached):

• Change the value of player.health to be equal to player.maxHealth

• Scale the healthBar

• Play lifeSound

Most importantly, we need to call the checkNewLife() function, in order for it to actually run. We could call this function either inside the shootAsteroid() function (after the code that increases the score) OR inside the update() function (after the collide() commands is a good spot) — choose just one of those places to call the function with this command:

    checkNewLife();

Refresh your HTML preview to verify that an extra life is awarded when the score reaches 10000 points. Another extra life should be awarded at 20000 points. If possible, verify that the shields will be replenished to maximum if you already have 5 ships when you reach the next new life score.

Step 14: Add Game Start and Game Over

At this point, you have a working version of Asteroids with lots of features. Now we're going to add a simple "start screen" and "game over screen" to finish it.

Add Game Title

At the start of the game, let's show an image of our game's title (Asteroids 2084).

Add code to do the following:

• Add a global variable named gameTitle for the title image.

• Preload assets/images/asteroids-2084-title.png for the title image. Assign a unique asset key name to the image, such as title.

• At the end of your create() function (after the code that added and cropped the livesBar), add the title image 100 pixels above the game's center, and assign the image to the gameTitle variable.

• Set the title image's anchor to be its center.

• Set the scale for the title image to be 0.75 for both its width and height.

Refresh your HTML preview to verify that the game title appears on the screen. Currently, it will remain on-screen during the game, but we'll fix that in a bit.

Add Start Instruction

Let's add a way for the player to start the game when he or she is ready. We'll wait to show the spaceship until the player has pressed the fire key (spacebar). Once the fire key is pressed, we'll remove the game title (and a start instruction) from the screen, show the spaceship, and let the gameplay begin.

Add code to do the following:

• Add a global variable named startText for the start instruction text.

• In your create() function (after the code that added the gameTitle), add startText as a text object positioned 200 pixels below the game's center. Set the text to display: 'Press Fire to Start Mission'. For the font style, use Arial, 30px, bold, #00ff00 (which will make the text slightly larger and bright green).

• Set the text's anchor to be its center.

Refresh your HTML preview to verify that the start instruction text appears on the screen. (Just like the game title, it currently remains on-screen during the game, but we'll change that soon.)

Hide Spaceship Until Game Started by Player

Now let's hide the spaceship until the player actually presses the fire key to start the mission.

Add these Phaser commands (inside your create() function after the code that added the player animation):

    // hide player until game starts
    player.exists = false;

This code hides the player sprite by removing it from the game. Later, your code will add the sprite back into the game by setting the exists property back to true.

Refresh your HTML preview to verify that the spaceship no longer appears on the screen.

You probably discovered that pressing the fire key (spacebar) doesn't do anything yet. We're about to change that.

You might have also discovered that pressing the up arrow key will cause the engineSound to get louder (as if the spaceship were accelerating, except it doesn't exist yet).

Modify your existing if statement for the arrowKey.up, so it will check whether the arrowKey.up is being pressed AND the player exists.

• Hint: Look at your if statement for the fireKey as an example of how to do this

Refresh your HTML preview to verify that the engine sound will not get louder if you press the up arrow key when the spaceship is not visible.

Add Signal and Custom Function to Start Game

Now we want to add a signal that will "start" the game when the player presses the fire key. However, we only want this signal to run one time. Once the game is "started", we want the fire key to fire the spaceship's laser.

Add this Phaser command in your create() function (after the code that added the fireKey as a keyboard input):

fireKey.onDown.addOnce(startGame, this);

This command will add a one-time signal to the fireKey: when this key is pressed down, it will call a custom function named startGame (which you will need to create).

Add a new custom function named startGame() (after your checkNewLife() function).

Add this code inside the curly braces { } of your startGame() function:

    // fade out start text
    game.add.tween(startText).to({alpha: 0}, 250, Phaser.Easing.Cubic.Out, true);

    // fade out and zoom out game title (after slight delay)
    game.add.tween(gameTitle).to({alpha: 0}, 3000, Phaser.Easing.Cubic.Out, true, 250);
    game.add.tween(gameTitle.scale).to({x: 3, y: 3}, 3000, Phaser.Easing.Cubic.Out, true, 250);

    // fade in player

As you can see, this code adds several to tweens that change the startText and gameTitle. All these tweens use the Phaser.Easing.Cubic.Out pattern, and true means the tweens will start automatically (once the startGame() function is called).

• The startText will fade out (to an alpha value of zero, which is transparent) over 0.25 seconds (250 milliseconds).

• The gameTitle will fade out over 3 seconds but only starts after a 0.25 second delay (the 250 after true represents a delay value).

• At the same time, the gameTitle will also zoom out over 3 seconds (3000) by changing the scale of the image to 3 in both directions. This will also only start after a 0.25 second delay.

Now you need to add some missing code in this function to fade in the player sprite:

• Play the teleportSound (as audio feedback to the player)

• Make the player sprite exist (by changing its exists property to true)

• Add a to tween to make the player sprite fade into view by changing its alpha value to 1 over 2 seconds. Use the Phaser.Easing.Cubic.Out pattern, and set the tween to start automatically (with no delay).

Refresh your HTML preview to verify that pressing the fire key will "start" the game (fading out the start instruction, fading and zooming out the game title, fading in the spaceship and playing the teleport sound).

Show Game Over Text When Player is Out of Lives

Now let's add a simple "game over" screen once the player is out of lives. We'll display some text and allow the player to restart a new game (by pressing the fire key).

Add code to do the following:

• Add a global variable named gameOverText

• In your create() function (after the code that added the startText), add gameOverText as a text object positioned 100 pixels above the game's center. Set the text to display: 'Game Over'. For the font style, use Arial, 48px, bold, #ff0000 (which will make the text red).

• Set the text's anchor to be its center

• Make the text invisible (i.e., transparent) by setting its visible property to false

Now we need to display the gameOverText and the startText when the player has run out of lives.

Add Phaser code in your player.events.onKilled function (inside the else curly braces for when the player has no lives left) to do the following:

• Make gameOverText visible

• Set the scale for gameOverText to be 3 for both its width and height

• Add a to tween to make gameOverText fade into view by changing its alpha value to 1 over 1 second. Use the Phaser.Easing.Cubic.Out pattern, and set the tween to start automatically (with no delay).

• Add a to tween to make gameOverText.scale zoom in by changing its value to 1 (for both directions) over 1 second. Use the Phaser.Easing.Cubic.Out pattern, and set the tween to start automatically (with no delay).

• Add a to tween to make startText fade into view by changing its alpha value to 1 over 0.5 seconds. Use the Phaser.Easing.Cubic.Out pattern, and set the tween to start automatically after a 2 second delay.

Refresh your HTML preview to verify that the game over text and start instruction text appear on the screen when the player has run out of lives (game over text should fade and zoom in first, then start instruction should fade in).

Add Signal and Custom Function to Restart Game

Finally, when the game is over, we want to add a signal that will "restart" the game when the player presses the fire key again. However, we only want this signal to run one time.

Add a Phaser command in your player.events.onKilled function (when the game is over) to create a one-time signal that will call a custom function named restartGame when the firekey is pressed.

Add a new custom function named restartGame() (after your startGame function).

The restartGame() function needs to reset some of the game variables (such as: score, shipLives, etc.) back to their original values, and then restart the game.

Add code inside the curly braces { } of your restartGame() function to do the following:

• Change the value of score back to 0

• Change the value of shipLives back to 3

• Change the value of newLife back to 10000

• Change the value of the asteroids' maxSpeed back to 100

• Restart the game state with this command:

  Copy

  game.state.restart();

Refresh your HTML preview to verify that a new game can be restarted after the current game is over.

Congratulations, you've completed your second practice game! Hopefully, the new Phaser commands made sense — you'll get the chance to use them again in the next practice game.

If you have the time and interest, you can add an enemy spaceship in Step 15. Be forewarned that it will require a lot of additional code, and only a small amount will be provided to you. Luckily, most of the necessary code is similar to things you've already done (so you'll be able to copy and modify portions of your existing game code).

Step 15: Add Enemy Ship (Extra Credit)

The original Asteroids game had enemy spaceships that would periodically appear and shoot at the player, adding an extra challenge to the game — but rewarding the player with a large score point bonus if the player destroys the enemy.

In this step, you can add an enemy ship to your game. You'll add a timer event to make the enemy ship appear every 30 seconds and move across the screen in a random direction and speed. You'll also add a simple AI (artificial intelligence) to make the enemy aim and shoot at the player.

Adding this enemy ship will involve lots of sub-steps with lots of additional code (but most of it is similar to things you already have in your code). However, adding the enemy ship will be worth it because it really increases the excitement and challenge of the gameplay experience.

Add Global Variables for Enemy

Add global variables for the following:

• enemy (enemy spaceship sprite)

• enemyLaser (enemy weapon)

• enemyExplosion (animated explosion sprite for enemy)

• enemyFireSound (sound played when enemy weapon is fired)

• enemyAlarmSound (sound played when enemy is alive)

Preload Assets for Enemy

In your preload() function, load the following assets:

• Load assets/images/enemy-ship.png as a spritesheet, and assign it a unique asset key name, such as enemy-ship. Each animation frame in this spritesheet is 64 pixels in width and 64 pixels in height.

• Load assets/images/enemy-laser.png as an image, and assign it a unique asset key name, such as enemy-bullet

• Load assets/sounds/enemy-fire.wav as audio, and assign it a unique asset key name, such as enemy-fire

• Load assets/images/alarm.mp3 as audio, and assign it a unique asset key name, such as enemy-alarm

The enemyExplosion will just use the same spritesheet as the player explosion does (so your code does not need to load it a second time).

Add Enemy

In your create() function (after the code that added the player sprite), add code for the enemy sprite:

• Add the enemy sprite at position 0, 0 (which is a temporary position) using the enemy-ship asset

• Set the sprite's anchor to its center

• Enable Arcade Physics for the sprite

• Set the sprite's body collision area to be a circle with a radius of 30 pixels that is offset 2 pixels from the left edge of the frame and 2 pixels from the top edge

• Have the game automatically kill the sprite when it leaves the game world boundaries by adding this code:

  Copy

    enemy.outOfBoundsKill = true;
    enemy.checkWorldBounds = true;

• Add an animation to the sprite to play all 3 frames (in order 0-2) at 10 frames per second in a continuous loop

• Play the animation (so it will already be playing anytime the enemy is on-screen)

• Hide the sprite (until it is spawned) by setting its exists property to false

Add Enemy Laser

In your create() function (before the code that adds the enemy sprite), add code for the enemyLaser weapon:

• Add the enemyLaser weapon to the game with 5 bullets using the enemy-bullet asset

• Set the bullets to be killed automatically if they leave the camera boundaries

• Set the bullet speed to 400 pixels per second

• Set the fire rate to 750 (once every 0.75 seconds)

• Set the bullet body collision area to be a rectangle 16 pixels in width and 16 pixels in height that is offset 4 pixels from the left edge and 4 pixels from the top edge

After the code that adds the enemy sprite, add a command to:

• Set the enemyLaser weapon to track the enemy sprite with no offset but don't track the sprite's rotation (set to false)

Add Enemy Explosion

In your create() function (after the code that adds the explosion sprite used for the player), add code for the enemyExplosion sprite:

• Add the enemyExplosion sprite at position 0, 0 (which is a temporary position) using the explosion asset (same one used for player's explosion)

• Set the sprite's anchor to its center

• Add an animation to the sprite to play all 16 frames (in order 0-15) at 30 frames per second (with no loop)

• Hide the sprite (until it is needed) by setting its visible property to false

Add Enemy Fire Sound

In your create() function, add code for enemyFireSound:

• Add enemyFireSound to the game with a volume of 0.5

• After the code that adds the enemyLaser, add an enemyLaser.onFire function containing a command to play the sound.

Add Function to Spawn Enemy

You're going to create a custom function to spawn (generate) an enemy spaceship. Later, you'll add a timer to call (run) this custom function every 30 seconds.

Every time a new enemy is spawned, we want it to appear at a random location along one of the edges of the screen. The enemy should then move across the screen at a random speed and in a random direction.

After your restartGame() function, add a new custom function called spawnEnemy().

Add this Phaser code inside the curly braces { } of the function:

    if (player.exists == false) return; // don't spawn enemy if game over or not started

    // generate random location (1-4) for enemy spawn site
    // 1 = top, 2 = right, 3 = bottom, 4 = left
    var spawnSite = Math.floor(Math.random() * 4) + 1;

    // generate random starting position and velocity to move enemy across screen
    if (spawnSite == 1) {
        enemy.x = Math.random() * 400 + 200; // 200 to 600
        enemy.y = 0; // top edge
        enemy.body.velocity.x = Math.random() * 100 - 50; // -50 to 50
        enemy.body.velocity.y = Math.random() * 50 + 100; // 100 to 150
    } else if (spawnSite == 2) {
        enemy.x = game.world.width; // right edge
        enemy.y = Math.random() * 200 + 200; // 200 to 400
        enemy.body.velocity.x = Math.random() * 50 - 150; // -150 to -100
        enemy.body.velocity.y = Math.random() * 100 - 50; // -50 to 50
    } else if (spawnSite == 3) {
        enemy.x = Math.random() * 400 + 200; // 200 to 600
        enemy.y = game.world.height; // bottom edge
        enemy.body.velocity.x = Math.random() * 100 - 50; // -50 to 50
        enemy.body.velocity.y = Math.random() * 50 - 150; // -150 to -100
    } else {
        enemy.x = 0; // left edge
        enemy.y = Math.random() * 200 + 200; // 200 to 400
        enemy.body.velocity.x = Math.random() * 50 + 100; // 100 to 150
        enemy.body.velocity.y = Math.random() * 100 - 50; // -50 to 50
    }

    enemy.revive();

The first line of this code checks to see whether the player sprite exists. If the player hasn't started the game yet or the game is over, player.exists will be false. If that's the case, the function will simply return (i.e., end) without performing the other code in this function.

The rest of the code in this function generates a random number between 1-4 to decide whether the enemy will be spawned from the top, right, bottom, or left of the game screen. Then it generates a random starting position to place the enemy somewhere along the edge of the screen. It also generates a random velocity to move the enemy across the screen towards the opposite side (in a straight line). The ranges for the random values have been chosen to keep the enemy on-screen for several seconds.

The last command brings the enemy sprite back to life.

Add Enemy Alarm Sound

• In your create() function, add enemyAlarmSound to the game with a volume of 0.1, and set the sound to loop continuously.

• In your spawnEnemy() function, play the sound when the enemy is brought back to life.

• In your create() function (after the code that adds the enemy), add an enemy.events.onKilled function containing a command to stop the sound.

Add Enemy AI to Rotate and Fire

We want to add a simple AI (artificial intelligence) to control the enemy. The enemy will automatically move across the screen based on the velocity it was given when it was spawned. However, as it moves, we want the enemy to rotate to face towards the player, so the enemy can fire its laser at the player.

Add this Phaser code in your update() function (after the code that spawns new asteroids):

    if (enemy.exists) {
        enemy.rotation = game.physics.arcade.angleBetween(enemy, player); // rotate enemy towards player
        var fireError = Math.floor(Math.random() * 20) - 10; // random number between -10 and 10
        enemyLaser.fireAngle = enemy.angle + fireError; // add error so enemy not perfect shot
        enemyLaser.fire();
    }

When the enemy exists on-screen, this code will rotate the enemy sprite to face towards the player (by calculating the angle between these two sprites). Then it adds a small amount of error to the enemyLaser.fireAngle. (Otherwise, the enemy is always a perfect shot, making it too difficult for the player to avoid being hit.) Then the enemyLaser fires towards the direction of the player. The enemyLaser.fireRate (which you set in the create() function) will automatically determine how frequently the enemy actually fires its weapon.

Add Timer to Spawn Enemy

In your create() function (after the code that adds the enemy), add this Phaser command:

game.time.events.loop(Phaser.Timer.SECOND * 30, spawnEnemy, this);

This command adds a timer event that will run in a loop: Every 30 seconds, it will call (run) the custom function named spawnEnemy.

Refresh your HTML preview to verify that the enemy will appear once every 30 seconds (from a random edge location - top, right, bottom, or left). As the enemy flies across the screen, it should rotate to face towards the player and fire its weapon. The alarm sound and enemy fire sound should play.

However, at this point, the enemy and its laser bullets don't affect anything else in the game because you haven't added any collisions involving the enemy or its bullets.

Add Collision for Player and Enemy

1. In your update() function, add a collide() command for player and enemy (list in this order) that will call a custom function named collideEnemy.

2. At the end of your code, add a new custom function called collideEnemy().

3. Inside the parentheses ( ) after the function's name, list these parameters (in order): player, enemy

4. Inside the curly braces { } of the function, add Phaser commands to do the following:

   • Kill the enemy

   • Reset enemyExplosion to the x and y position of the enemy

   • Play the enemyExplosion animation

   • Play boomSound

   • Shake the game camera

   • Damage the player by 25 health points

   • Scale the player's healthBar

Refresh your HTML preview to verify that the player's spaceship is damaged and the enemy spaceship explodes when they collide.

Add Collision for Player's Bullets and Enemy

1. In your update() function, add a collide() command for laser.bullets and enemy (list in this order) that will call a custom function named shootEnemy.

2. At the end of your code, add a new custom function called shootEnemy().

3. Inside the parentheses () after the function's name, list these parameters (in order): bullet, enemy

4. Inside the curly braces { } of the function, add Phaser commands to do the following:

   • Kill the bullet

   • Kill the enemy

   • Reset enemyExplosion to the x and y position of the enemy

   • Play the enemyExplosion animation

   • Play boomSound

   • Add 2500 to the player's score

   • Update scoreText to display the new score value

   • Call the checkNewLife() function (NOTE: This is not needed if a call to checkNewLife() is already listed in your update() function)

Refresh your HTML preview to verify that the player's laser can destroy the enemy spaceship, awarding the player 2500 score points.

Add Overlap for Player and Enemy's Bullets

1. In your update() function, add an overlap() command for player and enemyLaser.bullets (list in this order) that will call a custom function named shootPlayer. As a reminder, overlap() is similar to collide() except overlap() doesn't transfer momentum between the two objects. (If we used a collide() function here, the enemy's bullets would slow down the player's spaceship or even push it backwards, which seems unnatural.)

2. At the end of your code, add a new custom function called shootPlayer().

3. Inside the parentheses () after the function's name, list these parameters (in order): player, bullet

4. Inside the curly braces { } of the function, add Phaser commands to do the following:

   • Kill the bullet

   • Play boomSound

   • Shake the game camera

   • Damage the player by 25 health points

   • Scale the player's healthBar

Refresh your HTML preview to verify that the enemy's laser can damage the player's spaceship.

Add Collision for Enemy's Bullets and Asteroids

1. In your update() function, add a collide() command for enemyLaser.bullets and asteroidGroup that will call a custom function named removeAsteroid.

2. At the end of your code, add a new custom function called removeAsteroid().

3. Inside the parentheses ( ) after the function's name, list these parameters (in order): bullet, asteroid

4. Inside the curly braces { } of the function, add Phaser commands to do the following:

   • Kill the bullet

   • Set the x and y positions of asteroidParticles to the x and y positions of the asteroid

   • Kill the asteroid

   • Play the explode() particle effect for asteroidParticles

   • Play boomSound

Refresh your HTML preview to verify that the enemy's laser will destroy an asteroid if hit.

You might have noticed that we did not add a collision between the enemy and the asteroidGroup. This was intentional, so that the player has to either destroy or avoid the enemy (rather than letting an asteroid randomly hit and destroy the enemy). However, if you want, you could add this last type of collision to make the game slightly more realistic. It's your choice.

Congratulations, you've completed everything in Step 15! You should be feeling much more confident about your ability to use Phaser to code a video game.

Your team will develop and deliver a presentation to explain your proposed game design to the class. After your presentation, the audience will provide feedback through a design critique.

Your team's presentation should briefly explain and show:

• Names and Roles of Team Members

• Design Goals for Game (Gaming Motivations and Player Experience Goals)

• Target Player Persona

• Working Title of Game

• Game's Premise and Setting

• Game's Characters and Story (if applicable)

• Game's Objective and Conflict/Challenge

• Basic Gameplay & Gameplay Progression

Be sure to incorporate visuals into your presentation, such as:

• Concept Sketches of Game World

• Concept Sketches of Characters

• Photos or Video of Paper Prototype

5 Tips for Giving Presentations

1. Know your audience — design your content and delivery for your audience's needs and expectations.

2. Keep it simple — be clear and concise, focus on your key message, have a clear structure from start to finish, etc.

3. Make your content engaging — capture your audience's interest, keep slide text limited, make numbers meaningful, use visuals and stories when possible, etc.

4. Make your delivery engaging — make eye contact, act confident and enthusiastic (even if you're nervous), use non-verbal communication, don't read slides directly, etc.

5. Practice your presentation — rehearse to become comfortable with your content and delivery.

YOUR TASK

1. Develop and deliver a team presentation to explain your proposed game design.

   • Your team will have 5-7 minutes to present. Your presentation should have about 7-12 slides.

   • Each team member should contribute meaningfully by helping create the presentation slides and/or by helping deliver the verbal presentation. Your teacher will confirm the specific expectations for participation.

   • If a team member were to be absent, the rest of the team should still be ready to give the full presentation.

2. After your team's presentation, the audience will provide feedback through a design critique.

   • The audience has about 5 minutes for a design critique.

   • Designate someone on your team to record notes of your critique (so you can follow up on possible issues or improvements)

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.

Step 1: Add Player Sprite

Add a sprite for the player. As a reminder, adding a sprite to the game involves 3 steps:

• Declare a global variable for the sprite.

• Load its spritesheet into memory in the preload() function.

• Add the sprite to the game in the create() function.

Use player as the name of the global variable for the sprite.

Use assets/images/spaceship.png for the spritesheet image. It contains 3 animation frames that are each 64 pixels in width and 64 pixels in height. Assign an asset key name to the spritesheet, such as ship.

Add the player sprite to the center of the game world, and set the sprite's anchor to its center.

For help with the code for sprites, you can refer back to Step 4 of Practice 1 (or look at your Practice 1 game code).

Refresh your HTML preview to verify that the player sprite appears in the center of the game.

Step 2: Add Player Input

This game will played using keyboard inputs. Most keyboard-based games use either the WASD keys or the arrow keys to move the player's character.

Your game will use the following keys to control the player's spaceship:

• left arrow key will rotate the ship counter-clockwise

• right arrow key will rotate the ship clockwise

• up arrow key will move the ship forward

• spacebar key will fire the ship's laser

Since it is common for games to use the arrow keys for input, Phaser has a command to add all four arrow keys as inputs (rather than having to add them individually). Phaser refers to the arrow keys as cursor keys (since many computer programs use the arrow keys to move the cursor).

Create a global variable named arrowKey.

Add this Phaser command in the create() function:

arrowKey = game.input.keyboard.createCursorKeys();

This command will make all 4 arrow keys (left, right, up, down) into inputs assigned to the arrowKey variable. The individual keys are identified using the properties left, right, up, and down. So in your game, these inputs will be:

• arrowKey.left (used to rotate ship counter-clockwise)

• arrowKey.right (used to rotate ship clockwise)

• arrowKey.up (used to move ship forward)

• arrowKey.down (not used in game)

Create a global variable named fireKey.

Add a Phaser command in the create() function to add the spacebar key as an input assigned to the fireKey variable.

For help with the code to add an individual key as input, you can refer back to Step 5 of Practice 1 (or look at your Practice 1 game code).

Step 3: Add Physics and Player Movement

Let's make the player's spaceship move in response to the player's inputs. For that, we're going to need to use physics.

Many games features simulated physics. Objects in the games can move and accelerate. The objects can be affected by gravity and friction. Objects can collide and bounce off each other — and will respond differently based on their masses.

The cool thing about simulated physics is that you can make the game world behave however you want: You can change gravity so that objects will "fall up" instead of falling down. You can selectively apply gravity only to certain objects — or eliminate gravity entirely. You get to decide which physics properties to use and how to use them.

Phaser has several physics systems to choose from. We're going to use the Arcade Physics system, which is a good choice for most games. Arcade Physics has lots of useful physics properties and methods, plus support for weapons (i.e., the ability to shoot or throw objects such as bullets, lasers, arrows, fireballs, etc.). It's more simplistic than the other physics systems, but it runs much faster.

First, you have to "start" the physics system by including a Phaser command at the beginning of your create() function. Then you have to "enable" physics for specific objects in your game. Not every object in the game actually needs to use physics, so you only enable it on the ones that do.

Start the Arcade Physics system by adding this Phaser command as the first line of code in the create() function:

game.physics.startSystem(Phaser.Physics.ARCADE);

Enable physics on the player sprite by adding this Phaser command in the create() function (after the command that set the anchor for the sprite):

game.physics.arcade.enable(player);

This will create an Arcade Physics body object associated with the player sprite. So let's add a couple of physics properties to the player.body.

Add this Phaser code in the create() function (after the "enable" physics command for the sprite):

    player.body.maxVelocity.set(400);
    player.body.drag.set(20);

• The first line simply sets a limit on the velocity (speed) of the sprite. In Phaser, velocity is measured in pixels per second.

• The second line adds a small amount of drag (friction) as the sprite moves. In reality, a spaceship in outer space would experience almost zero drag (because there is no air to cause drag), but since our game screen is relatively small, we'll add a small amount of drag so the spaceship doesn't drift off-screen with every forward movement.

Another thing to notice is that we did not set a gravity value for the player.body because our game is set in space far from any planets or stars that would create a strong gravity field. Instead, we just want the spaceship to float along, affected only by its engines (and the small amount of drag that we added). In your next practice game, we'll start using gravity.

Let's add code to rotate and move the player spaceship based on the arrow key inputs.

In Phaser, there are two properties for a sprite's rotation:

• angle can be used to get or set the angle of rotation of the sprite, measured in degrees

• rotation can be used to get or set the angle of rotation of the sprite, measured in radians (2π radians = 360°)

Both angle and rotation do the same thing — they just use different units of measurement. Either can be used to get the current value of the sprite's angle of rotation. Either can be used to set the sprite to a specific angle of rotation.

Add this Phaser command in the create() function (as part of the commands after adding the sprite):

    player.angle = -90;

Refresh your HTML preview to verify that the player sprite is now pointed up, instead of to the right.

Setting the angle to a negative value (up to -180) will rotate the sprite counter-clockwise from its original orientation. Setting the angle to a positive value (up to 180) will rotate it clockwise from its original orientation. However, it instantly switches the rotation to a specific angle.

Instead, what we want is to make the player sprite turn in a continuous motion, when the player presses the left or right arrow keys.

There are a couple of Arcade Physics properties that will allow you to turn (rotate) a sprite's body in a continuous motion:

• body.angularVelocity can be used to get or set the speed of sprite's rotation (measured in pixels per second) — negative values = counter-clockwise rotational speed, positive values = clockwise rotational speed

• body.angularAcceleration can be used to get or set the acceleration of the sprite's rotation (measured in pixels per second squared) — negative values = decrease the rotational speed, positive values = increase the rotational speed

We're going to use body.angularVelocity, so the spaceship will rotate at a constant speed:

• If the left arrow key is pressed, we'll turn the sprite counter-clockwise at a speed of 200 pixels per second.

• Otherwise, if the right arrow key is pressed, we'll turn the sprite clockwise at a speed of 200 pixels per second.

• Otherwise, if neither the left nor right arrow key is pressed, we'll stop turning the sprite by setting the speed to 0.

To move the player sprite forward, there is an Arcade Physics method (i.e., function) called accelerationFromRotation() that will allow us to accelerate a sprite's body in the direction of its current angle of rotation:

• If the up arrow key is pressed, we'll move the player sprite forward by accelerating the sprite at 200 pixels per second squared in the direction of its current rotation.

• Otherwise, if the up arrow key is not pressed, we'll stop accelerating the player sprite by setting the acceleration to 0. The sprite will stop speeding up, but it will continue to drift forward at its current speed — only being slowed down by the drag that we applied to the player sprite's body (or if the player turns the ship around and starts accelerating in the opposite direction).

Add this code in the update() function to check the inputs and move the spaceship:

    if (arrowKey.left.isDown) {
        // rotate player counter-clockwise (negative value)
        player.body.angularVelocity = -200;
    }
    else if (arrowKey.right.isDown) {
        // rotate player clockwise (positive value)
        player.body.angularVelocity = 200;
    }
    else {
        // stop rotating player
        player.body.angularVelocity = 0;
    }

    if (arrowKey.up.isDown) {
        // accelerate player forward
        game.physics.arcade.accelerationFromRotation(player.rotation, 200, player.body.acceleration);
    }
    else {
        // stop accelerating player
        player.body.acceleration.set(0);
    }

Refresh your HTML preview to verify that you can rotate and fly the spaceship using the arrow keys.

You probably discovered that you can actually fly the spaceship out of the game display. If you fly off-screen, you can turn around and fly back into the game display (but it can be a little tricky to do when you can't see where the ship is pointed).

We want to keep the spaceship within the game world boundaries.

Add this Phaser command in the create() function (to go along with your other player.body properties):

player.body.collideWorldBounds = true;

Refresh your HTML preview to verify that the spaceship will stay within the game world boundaries as you fly around.

Next let's add an animation and sound effect to the spaceship to make the flying feel more realistic.

Player Animation

Remember that the player spritesheet has 3 animation frames:

Add this Phaser command in the create() function (somewhere after adding the player sprite):

player.animations.add('moving', [0, 1, 2], 10, true);

As you can see, this command will add an animation for the player sprite. Let's examine the code inside the parentheses to understand how it works:

• 'moving' assigns a key name to the animation. It is similar to an asset key name or variable name. You decide what name to use, as long as it is a unique name.

• [0, 1, 2] is an array listing the spritesheet frame numbers to use (in order) for the animation. In our case, we're using all 3 frames (0-2). In other cases, a spritesheet might contain frames for different animations, so you only list the specific frames needed for each animation.

• 10 represents the frame rate that will be used for the animation, in frames per second. Depending on the animation, you might change this number to make it play faster or slower.

• true indicates that this animation should play repeatedly in a loop. If you didn't want the animation to loop, then you can list false.

Similar to how sounds work in Phaser, the animation won't actually play until you use a command telling it to start playing.

Add this Phaser command in the update() function, so that the animation will play when the up arrow key is pressed:

player.animations.play('moving');

Add this Phaser command in the update() function, so that the animation will stop when the up arrow key is not pressed:

player.animations.stop();
player.frame = 1;

This command stops the animation, and then sets the player sprite to display frame number 1 (the second frame), which has the smallest engine exhaust flames (to make it seem like the spaceship engine is "idling").

Refresh your HTML preview to verify that the animation plays as you move the spaceship forward and stops when you release the up arrow key.

Engine Sound Effect

Now let's add a sound effect for the spaceship's engines.

As a reminder, adding a sound to the game involves 3 steps:

• Declare a global variable for the sound.

• Load the sound into memory in the preload() function.

• Add the sound to the game in the create() function.

Use engineSound as the name of the global variable for the sound.

Use assets/sounds/engine.mp3 for the sound file. Assign a unique asset key name to the sound, such as engine.

Add engineSound to the game with a volume of 0.3. Also, set this sound to loop repeatedly when it plays.

Let's have engineSound play from the very beginning of the game. To do this, add the command to play the sound in the create() function (after setting the sound to loop).

For help with the code for sounds, you can refer back to Step 6 of Practice 1 (or look at your Practice 1 game code).

Add this Phaser command in the update() function to make the sound louder when the up arrow key is pressed:

engineSound.volume = 1;

Then add a similar command in the update() function to turn this sound back to normal (0.3) when the up arrow key is not pressed.

Refresh your HTML preview to verify that the engine sound plays continuously but gets louder when you move the spaceship forward.

Step 4: Add Tilesprite Background

Now that you've got a spaceship that can fly around realistically, let's add a realistic background.

Preview the image file called space-stars.jpg in your assets/images folder. This image is 800 pixels in width and 600 pixels in height, which is exactly the same size as your game display.

You can add an image as a static background for your game. In fact, you can add multiple images to build a more complex background for a game.

In this game, we're going to add this image as a special background called a tilesprite. A tilesprite is an image with a repeating texture or pattern. Phaser can move and wrap the tilesprite in the game display to simulate a scrolling background.

Adding a tilesprite to the game involves 3 steps:

• Declare a global variable for the tilesprite.

• Load the tilesprite's image into memory in the preload() function.

• Add the tilesprite to the game in the create() function.

Add a global variable named space for the tilesprite.

Add this Phaser command in your preload() function:

game.load.image('space', 'assets/images/space-stars.jpg');

As you can see, this is similar to commands for loading a spritesheet or sound:

• 'space' represents an asset key — again, you get to decide the name of the key, as long as each key has a unique name.

• 'assets/images/space-stars.jpg' represents the folder path and filename of the image to load.

Add this Phaser command in your create() function (before the command that adds the player sprite):

space = game.add.tileSprite(0, 0, 800, 600, 'space');

Let's explain what's inside the parentheses:

• 0, 0 represent (in order) the x and y pixel coordinates for positioning the tilesprite image. This represents the upper-left of the game. This is normally where you want to position background images.

• 800, 600 represent (in order) the width and height to use for the tilesprite (which is also the same width and height that we set for the game display — we want to fill up the entire background).

• 'space' is the asset key name of the image to use for the tilesprite.

Refresh your HTML preview to verify that the space background appears (but doesn't move yet).

ORDER MATTERS: As you create your game world, all the visual objects — such as images, sprites, text, etc. — are added to the game display in layers (meaning they can overlap other objects behind them). The order in which they are added in the create() function determines the stacking of these layers in the game world.

So if you have an image that is supposed to be a background for your game, then that image should be added first in the create() function, so it will be the farthest back layer. Each new visual object (image, sprite, etc.) that is added in the code will appear in front of the previous layers.

For example, if you add the player's sprite first and then add the tilesprite background, the player's sprite will be hidden behind the tilesprite. Try testing this out in your code.

Scroll Tilesprite

Now let's make the tilesprite scroll as the spaceship moves. In order to make the scrolling look realistic, we need to do two things: 1. Scroll the tilesprite in the opposite direction of the spaceship's movement. So if the spaceship is moving to the right, the space background should scroll to the left. 2. Scroll the tilesprite at a slower speed than the speed of the spaceship. Because the space background represents stars that are in the far distance, they should appear to move slower than the spaceship does.

Add this Phaser code in your update() function (after the if-else statements for the player movement):

    // scroll space tilesprite in opposite direction of player velocity
    space.tilePosition.x = space.tilePosition.x - player.body.velocity.x / 40;
    space.tilePosition.y = space.tilePosition.y - player.body.velocity.y / 40;

This code changes the position of the tilesprite. As you can see, the x-position and y-position are set independently. You can also see that Phaser breaks down the velocity (speed) of the player.body into x and y components.

• By subtracting the player's velocity (after dividing it by 40), we are moving the tilesprite's position in the opposite direction.

• By dividing the player's velocity by 40, we are making the change in the tilesprite position smaller (so the tilesprite moves slower than the spaceship). There's nothing magical about 40 — that number happens to produce results that feel right for this particular game when you fly the spaceship. If you don't divide by 40 (or change 40 to a small number), the background will scroll too fast. If you change 40 to a large number, the background will scroll too slowly.

Refresh your HTML preview to verify that the space background appears to scroll in the opposite direction of the spaceship's movement (which makes the flying seem more realistic).

However, you will notice that the tilesprite scrolling will stop when the spaceship collides with the game world boundaries. This is because the "collision" causes the spaceship's velocity to become zero (which then causes the tilesprite position to stop changing).

We want our game to feel like the spaceship can keep flying forever, so we want the tilesprite to keep scrolling even if the spaceship is at or near the edge.

Restrict Player Position to Allow Endless Tilesprite Scrolling

So to fix this, we're going to add some code to keep the spaceship within the game world without using a collision with the game world boundaries. We'll check the position of the spaceship to make sure it never gets any closer than 50 pixels to any boundary (left, right, top, or bottom). This will keep the spaceship on-screen but not actually change its velocity in the game's memory. (It's a bit of a trick because the spaceship will visually stop moving because we keep resetting its position, but the game will think the spaceship is still moving.)

This extra 50 pixels will also leave us some "blank" space along the edge of the game to add the game's user interface elements (such as the score, etc.).

Add this Phaser code in your update() function (right before the code that scrolls the tilesprite):

    // keep player onscreen (instead of collideWorldBounds)
    // will allow space tilesprite to keep scrolling
    if (player.left <= 50) player.left = 50;
    else if (player.right >= game.world.width - 50) player.right = game.world.width - 50;

    if (player.top <= 50) player.top = 50;
    else if (player.bottom >= game.world.height - 50) player.bottom = game.world.height - 50;

As you can see, Phaser has properties to represent the x-position of a sprite's left and right edges, as well as the y-position of a sprite's top and bottom edges. We can get or set these properties to check and/or change the sprite's position.

Refresh your HTML preview to verify that the spaceship will stay within the game world (inset a bit from the edge) and the space background will keep scrolling if the ship still has forward velocity.

As the spaceship's speed and direction change (due to your flying maneuvers and the ship's drag), the scrolling of the space background should appear to speed up or slow down accordingly.

Step 5: Add Asteroids Group

Now it's time to add some asteroids to your game.

Phaser allows you to create a Group of game objects, such as sprites, images, text, etc. The objects that you add as members of a group are usually related in some way, such as a group of enemy sprites, a group of platforms or walls, etc.

Typically, the members of a group have many similarities — but they can also have some differences. For example, a group of enemy sprites might use the same spritesheet and move at the same speed, but each enemy sprite is probably in a different location and might be moving in a different direction.

One advantage of using a group is that is makes it easier to perform checks or actions on each member of the group. For example, one line of code could be used to set a property for every member in a group, such as setting the gravity value for each group member. Your code could also quickly loop through each member in a group to check a condition and decide what action to take for each individual member, such as deciding whether each enemy sprite in a group is close enough to the player sprite to fire at it.

Another advantage of using a group is that your code can "recycle" objects in the group (which helps save memory and make your game run faster). For example, if you have a group of enemy sprites and one of the enemy sprites is "killed", your game can reuse that sprite later to create another enemy elsewhere in the game.

Add Group

You're going to create a group of 10 asteroid sprites for your game.

Adding a group to the game usually involves 4 steps:

• Declare a global variable for the group.

• If the group members will use an image or spritesheet, load the image or spritesheet into memory in the preload() function.

• Add the group to the game in the create() function.

• Add individual members to the group — usually done in the create() function (but can also be done in the update() function).

You can even use different images or spritesheets for the members in a group. For example, you could load and use different spritesheets for different types of enemies in a group. (You could also create separate groups for each type of enemy — it just depends on your game's design and what makes more sense for coding it.)

Add a global variable named asteroidGroup for the asteroid sprites.

Each asteroid in the group will use the same spritesheet. Preload assets/images/asteroid.png for the spritesheet image. It contains 16 animation frames that are each 40 pixels in width and 40 pixels in height. When these frames are played, it will make the asteroid look like it is spinning. Assign an asset key name to the spritesheet, such as asteroid.

Add this Phaser command in your create() function (after the code related to the player):

asteroidGroup = game.add.group();

Similar to what we did for the player sprite, we will need to enable physics on every asteroid sprite that we add to the group. Rather than needing to do this for each individual asteroid, we can use a single line of code to enable physics for the entire group (even before we add any members to the group).

Add this Phaser command in the create() function (after the command that added the group):

asteroidGroup.enableBody = true;

Add Members to Group

Now we can start adding members to the group. There are several ways to do this:

• Add each member using separate lines of code for each member.

• Use a for loop to quickly add multiple members using the same lines of code.

• Do both: use a for loop to add a set of members, and then use separate code to individually add certain members that have very unique properties.

We're going to use a for loop to quickly add each of the 10 asteroids to the group. In our game, we want each asteroid to start at a random location at the start of the game. Then we'll also make each asteroid move at a random speed in a random direction.

Add this code in the create() function (after the command that added the group):

    // add asteroids to group
    for (var i = 0; i < 10; i++) {
        // create individual asteroid in group
        var asteroid = asteroidGroup.create(game.world.randomX, game.world.randomY, 'asteroid');
        asteroid.anchor.set(0.5, 0.5);

    }

RESOURCE: W3Schools has a JavaScript tutorial on For Loops