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!):
The game basically consists of just a few files:
- 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.
- 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.
- background.png – This is the background wallpaper used in the game world.
- teapot.png – This is the PNG image used for the flapping teapot sprite.
- 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:
http://127.0.0.1:8000
By the way, this is the Inkscape SVG file that I created to make the PNGs for the teapot sprite and background:
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 -->
<html>
<head>
<title>Flappy Words</title>
<style>
#flappy-words {
width: 800px;
margin: auto;
margin-top: 10px;
}
</style>
<script type="text/javascript" src="phaser.min.js"></script>
<script type="text/javascript" src="game.js"></script>
</head>
<body>
<h1 style="text-align: center;">Flappy Words</h1>
<div id="flappy-words"></div>
</body>
</html>
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(game.world.centerX, game.world.centerY, 'teapot');
teapot.inputEnabled = true;
teapot.events.onInputDown.add(flap, this);
teapot.scale.x = 0.4;
teapot.scale.y = 0.4;
game.physics.enable(teapot, Phaser.Physics.ARCADE);
teapot.anchor.setTo(0.5,0.5);
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;
}
else
{
text.fill = '#ffffff';
teapot.body.angularAcceleration = -50.0 * teapot.angle - 5.0 * teapot.body.angularVelocity;
}
}
function flap() {
teapot.body.velocity.y = -200;
counter++;
text.text = "You flapped " + counter + " times!";
}
These are the sprite and background PNG images:
-
- Background wallpaper PNG for game world
-
- Teapot sprite PNG image
ad hocumentation • n. fast documentation of ideas and solutions. 
