1-6 Phaser Practice 2: Top-Down Game
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 Asteroids. 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.
PREVIEW VIDEO: Demo of Asteroids 2084
PREP STEPS
Prepare a new Phaser Game Template. Be sure to place a copy of phaser.min.js into the same folder that has your HTML, CSS, and JS files.
Download this assets.zip file, and extract the file contents, which will be a folder named assets that has two subfolders containing 12 images and 7 sounds. (To extract the file on a Windows computer, right-click on the downloaded zip file, and select Extract All. On a Mac, double-click on the downloaded zip file.)
Place the assets folder into your game template folder.
Test your Phaser game template by previewing the HTML file online. If everything's ready to go, you should see a solid black box (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)
Last updated
