Simple Phaser Framework example – Flappy Words

I spent some time this week playing Aoife Crowley’s Flappy Bod game (my top score = 8). I was really impressed by the simplicity of the Phaser Framework which it runs on, so I decided to try it out for myself. Phaser is an open source framework for 2-D web game development. It’s really easy to get started with and I was able to get a few sprites moving around on the screen and responding to user input within minutes.

Of course, I still have to decide exactly how my own Flappy Words game is going to work, but the basic idea is to facilitate text communication (i.e. spelling messages out) using a single switch (the space bar), in something like the style of Flappy Bird. I suppose I’m picturing a cross between Flappy Bird and Dasher. The exact details remain to be worked out, but I thought I might as well document my program as it currently stands, which is a very basic indeed – no spelling at all yet; just one flying teapot.

Click on the screenshot below to see what this example does so far (not a lot!):
Flappy Words Screenshot - 03222014 - 01:53:13 AM

The game basically consists of just a few files:

  1. index.html – This is the main HTML file that you actually point the browser at. It doesn’t contain much apart from a div with the same id (“flappy-words”) as that specified when the game object is created in the game.js JavaScript File. The contents of this file are shown below.
  2. game.js – This is the file that contains all my JavaScript code for the game so far. The contents of this file are shown below.
  3. background.png – This is the background wallpaper used in the game world.
  4. teapot.png – This is the PNG image used for the flapping teapot sprite.
  5. phaser.min.js – This file contains the entire Phaser Framework. This one is version 2.0 and it’s exactly as I downloaded it from the Phaser github repo.

While developing with Phaser, of course you need to be able to test the program repeatedly in a browser. For security reasons, browsers will not generally allow javascript code to access the local filesystem, so to test the game while you’re writing it you need to set up a web server and make the web browser access the files through it. The easiest way to do this is to use the built in web server in the Python interpreter. I only discovered this brilliant feature yesterday in an article from the Linux Journal. Is there nothing Python can’t do?!

I store all my game files in the same folder and then start Python in that folder using the following command:

python -m SimpleHTTPServer

By default, the Python web server accepts connections on port 8000 (although you can specify a different port if necessary). I therefore test my game by pointing Firefox at the following URL:

By the way, this is the Inkscape SVG file that I created to make the PNGs for the teapot sprite and background:

  1. teapot.svg

This is the HTML code in “index.html”:

<!DOCTYPE html>

<!-- This is the main HTML file for Flappy Words -->
<!-- Written by Ted Burke, last updated 21-3-2014 -->


	<title>Flappy Words</title>
		#flappy-words {
			width: 800px;
			margin: auto;
			margin-top: 10px;
	<script type="text/javascript" src="phaser.min.js"></script>
	<script type="text/javascript" src="game.js"></script>

	<h1 style="text-align: center;">Flappy Words</h1>
	<div id="flappy-words"></div>


This is the JavaScript code in “game.js”:

// game.js - Main JavaScript file for Flappy Words
// Written by Ted Burke - last updated 21-3-2014

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

var teapot;
var text;
var counter = 0;

function preload () {
	game.load.image('teapot', 'teapot.png');
	game.load.image('background', 'background.png');

function create() {
	game.add.image(0, 0, 'background');
	teapot = game.add.sprite(,, 'teapot');
	teapot.inputEnabled = true;, this);
	teapot.scale.x = 0.4;
	teapot.scale.y = 0.4;
	game.physics.enable(teapot, Phaser.Physics.ARCADE);
	teapot.body.collideWorldBounds = true;
	teapot.body.gravity.y = 200;
	teapot.body.bounce.y = 0.4;
	teapot.body.maxAngular = 200;
	//teapot.body.angularDrag = 20;
	text = game.add.text(250, 16, 'Press SPACE to flap...', { fill: '#ffffff' });
	spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
	spaceKey.onDown.add(flap, this);

function update() {
	if (spaceKey.isDown)
		text.fill = '#000000';
		teapot.body.angularVelocity = 100;
		text.fill = '#ffffff';
		teapot.body.angularAcceleration = -50.0 * teapot.angle - 5.0 * teapot.body.angularVelocity;

function flap() {
	teapot.body.velocity.y = -200;
	text.text = "You flapped " + counter + " times!";

These are the sprite and background PNG images:

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s