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:
- 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.
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:
This is the HTML code in “index.html”:
These are the sprite and background PNG images: