CxD Archive
Video Game Project
Video Game Project
  • Project Introduction
  • Project Challenge
  • Project Outline
    • 1-1 Determine Gamer Motivation Profile
    • 1-2 Analyze External Motivations in Games
    • 1-3 Analyze Internal Motivations in Games
    • 1-4 Analyze Game Design Elements
    • 1-5 Phaser Practice 1: Matching Game
      • P1: Steps 1-5
      • P1: Steps 6-10
    • 1-6 Phaser Practice 2: Top-Down Game
      • P2: Steps 1-5
      • P2: Steps 6-10
      • P2: Steps 11-15
    • 1-7 Phaser Practice 3: Side-Scrolling Game
      • P3: Steps 1-5
      • P3: Steps 6-10
      • P3: Steps 11-15
    • 2-1 Form Project Teams
    • 2-2 Create Persona for Target Players
    • 2-3 Generate Game Ideas
    • 2-4 Refine Ideas to Create Game Treatments
    • 2-5 Evaluate Game Treatments
    • 3-1 Draft Game Design Document
    • 3-2 Create Paper Prototype of Game
    • 3-3 Playtest Paper Prototype
    • 3-4 Present Game Proposal
    • 4-1 Create Development Plan
    • 4-2 Code Game in Iterative Stages
    • 4-3 Create Art and Sound for Game
    • 4-4 Create Marketing Website
    • 5-1 Evaluate Game With Playtesters
    • 5-2 Evaluate Marketing Website
    • 5-3 Analyze Evaluation Data to Improve Solution
    • 6-1 Create Project Poster
    • 6-2 Present Project to Public
    • 6-3 Write Personal Reflection
  • Project References
    • Phaser Introduction
    • Phaser Game Template
    • Visual Assets
    • Audio Assets
    • Phaser Coding
      • Game Display
      • Game World
      • Game Camera
      • Text
      • Images
      • Sprites, Animations, and Health
      • Group of Sprites
      • Tilesprite Scrolling
      • Audio
      • Input
      • Physics and Collisions
      • Weapon
      • Particles
      • Tweens
      • Timers
      • Random Numbers
      • Enemy Behavior
      • Misc Game Features
  • Notes for Teachers
Powered by GitBook
On this page
  • PREP STEPS
  • CODING STEPS
  • 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)
Export as PDF
  1. Project Outline

1-6 Phaser Practice 2: Top-Down Game

PreviousP1: Steps 6-10NextP2: Steps 1-5

Last updated 7 years ago

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)

PREVIEW VIDEO:

Prepare a new . Be sure to place a copy of phaser.min.js into the same folder that has your HTML, CSS, and JS files.

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

Demo of Asteroids 2084
Phaser Game Template
assets.zip
Asteroids