↑ All Courses

Short Link to This Page: bit.ly/db-jp

Student Qualifications

  • Grades 6–12 (Accelerated learners in earlier grades are welcome with instructor approval)
  • Logical thinking and math skills
  • Facility with computers

Class Description

In this class, we will write a graphical game that runs in a web browser, using JavaScript, the Phaser gaming library, HTML and CSS. Take a look at the Phaser website to get an idea of what you can do with it.

Some things we will learn:

  • Moving a character using the keyboard
  • Having enemy characters
  • Having multiple game levels
  • Detecting collisions between characters
  • Playing music and sound effects
  • Realistic motion according to laws of physics

Resources

Goals

  • Know what JavaScript and Phaser are
  • Understand and be able to modify some simple Phaser programs
  • Be able to create small games of your own design

Introduction

Your Teacher and Assistants

Getting to Know You

Let’s look at your names, ages, what grades you’re in, and your programming experience.

Class Format

Our classes consist of:

  • Instruction
  • Exercises, where you explore and modify programs
  • Low-key, interactive quizzes (not for a grade)
  • Creative project work, where you apply what you’ve learned in your own way
  • Show and tell, where you, the assistants and the instructor share interesting creations
  • A five-minute break near the middle

JavaScript

Take 60 seconds and skim the Wikipedia article at the link above to find out about it.

Phaser

Take 60 seconds and skim the Phaser web page to get a feel for what it is and what it can do.

Quick demo of “Platform” and “Classify or Lose”

These Phaser programs are examples of what we are working towards.

Using repl.it

Many of the following links take you to a software development site called repl.it. If you log in with Google or create an account you can save your work there. All of your “repls” are visible to the public (if they know where to look and care to). When you click on one of these links and then change any of the files, repl.it makes a copy of the repl (a “fork”), which then belongs to you.

Lectures and Exercises

Solutions videos

I demonstrate solutions in a YouTube playlist.

Hello, World

This short example shows the code required to run Phaser from an HTML page, and present the greeting, “Hello, World”. (Read about the tradition if you like.) Change:

  1. the greeting
  2. the text size and color
  3. the background color
Hello, World with a Sprite

Instead of using text to display “Hello, World”, this example displays a rotating sprite containing the text.

  1. Make the sprite rotate faster
  2. Reverse the rotation direction
Moving Character

This program has a pretty eagle flying in a blue sky. It’s programmed to move right when you press the right arrow.

  1. Make the character move in all four directions
  2. Change the movement speed
  3. Experiment with different drag values
Two Collect

This game is about a cat and a monkey that collect diamonds. Only the monkey moves in all four directions and shows a score.

  1. Let the cat move all four ways
  2. Have the cat play its sound when it collects a diamond
  3. Show the cat’s score
  4. (Optional) Have pieces of coal, or some other enemy sprite randomly appear and take points away when collected by one of the characters
Bounce

A tennis ball drops and bounces and rolls somewhat realistically, using the “Arcade” physics engine of Phaser.

  1. Experiment with different values for gravity, drag and bounce
  2. Replace the graphic with one that you draw or find, considering appropriate use
Multi-Bounce

Multiple tennis balls drop and interact with each other. Eventually, each one fades away and disappears.

  1. Change the ball-generation rate
  2. Change the ball spawn position
  3. Change the range of random X axis velocities
  4. Change the fade-out time (look for “alpha”)
  5. Change the number of balls that can exist
  6. Change the way the balls spin (angular velocity)
  7. Have the ball sizes be random
Platform

This game is adapted from a Phaser tutorial, and improved with modern JavaScript features and other changes. Collect the stars and avoid the bombs.

  1. Change how high the character jumps
  2. Add another platform
  3. Let the character leave the screen
  4. Allow jumping even when the character is not on a surface
Classify or Lose (aka Save the Animals)

This game, which has you save animals by classifying them as monkeys, birds or cats, is written in such a way that the theme can be changed by bringing in new graphics and sounds.

  1. Change the theme (to a happy one?)
Very Simple Animation

Here is a very simple animation example.

Accelerate with Drag

This program lets you play with acceleration, drag and velocity. And sound created with an oscillator.

Play Sound

Plays a sound. From this example, you should be able to add sounds to your own programs.

Make Your Own Game

You now have examples for doing many things with a Phaser game. Now it’s time to make your own game. Follow these steps, if you like.

  1. Think of a theme
  2. Add a background
  3. Make the player character
    1. Find an existing spritesheet or make your own (perhaps with Piskel [see above])
  4. Make your character appear in the game
  5. Have it move around with cursor or WASD keys, if you like
  6. Give it an animation (jumping, perhaps)