1-7 Phaser Practice 3: Side-Scrolling Game

In this third practice, you're going to create a side-scrolling game that follows the player's character as it moves through an extended game world. The instructions will help you make a partial game, which you'll need to finish designing and creating yourself. You'll also create some of your own custom assets (sound effects and an animated sprite) to add to your game. This practice will allow you to apply your existing knowledge of Phaser, plus show you a few more new features.

PREVIEW VIDEO: Demo of Totally Awesome Untitled Game

PREP STEPS

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

2. Download this assets.zip file, and extract the file contents, which will be a folder named assets that has two subfolders containing 30 images and 2 sounds. Place the assets folder into your game template folder. (For this game, you won't necessarily use all the provided images. It will be up to you to decide whether to use some of them.)

3. 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. (If you don't get the solid black box, consult the Troubleshooting tips at the end of the Phaser Game Template page.)

CODING STEPS

This third practice game will be coded in 15 steps. Most of the steps will involve coding that's similar to things you did previously. However, some of the steps will 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 and Physics

Step 2: Add Player Input and Movement

Step 3: Resize Game World and Add Background

Step 4: Add Platforms and Walls

Step 5: Add Coins and Score

Step 6: Add Enemy and Health Bar

Step 7: Add Power-Up with Timer

Step 8: Add Countdown Timer for Game Over

Step 9: Create Your Own Design for Rest of Level

Step 10: Add Rest of Platforms and Walls

Step 11: Add Obstacle to Hinder Player

Step 12: Add Resource to Help Player

Step 13: Create and Add Sound Effects

Step 14: Create and Add Animated Sprite

Step 15: Playtest and Improve Your Game