Set Phasers to Pong: From Nothing to My First HTML5 Game

_Can't be bothered to read through the post and just want to play the game? Here you go!_

I like sharing my projects and games with Julie, but she uses a Mac and I use Windows and Linux, which has caused minor problems in the past when her computer hasn't handled things the way I expected it to. Also, I've been wanting to learn HTML5 programming for years and years. Recently it occurred to me that this would also serve as a solution to my cross-platform woes! So I had a look at some of the different HTML5 game frameworks available, and decided to try making a little game using Phaser.

The Game

I decided to make a Pong clone (of sorts). It's a simple but classic game format which can be easily tweaked to make interesting variants, and I've used Pong as a first project for learning languages before, so it felt like a relatively safe decision.

To make it a bit more interesting, I decided to set the game in a curved arena. Specifically, I decided to make the outer edge of the board be the outer edges of two interlocking circled (like a Venn diagram). This also gave me an excuse to do some very basic geometry on the fold-out whiteboard I was given for Christmas!

-> !Whiteboard <-


I found HTML5 with Phaser surprisingly easy to get going with. It's very easy to load images and set up sprites, and I had some little shapes moving about the canvas in no time. I was especially pleased with how easy it was to get input working nicely (and cross-platform!). The framework has its own capabilities for supporting the physics and collision detection of the system, which I also used to help get the bones of the game functional very quickly.

I ran into difficulties when things started to get a bit more complicated. Whilst Phaser is a very nice framework and comes with a tonne of helpful (and impressive!) examples, it's pretty young. The official documentation isn't great, and it's not yet been widely-used enough for me to find answers through google. After running into a few frustrating issues where I couldn't understand why it wasn't working the way it should have been working, I started to wonder whether it might have been better to use a better-established framework for my first foray into HTML5.

However, I ploughed on and got it to the point where the paddles move along the edge of the circles and the simple AI doesn't win or lose every time. It's not quite complete (at time of blog writing!), but it's definitely playable!

-> ![Pong]({{ site.url }}/projects/img/pong_small.jpg) <-

What I learned and conclusions

The main thing I learned is that HMTL5 programming is not nearly as scary as I was expecting it to be -- I wish I'd started with it years ago! Whether I make the most of my hours getting to grips with Phaser or branch out and try some of the other frameworks out there (or get familiar with the basics a bit better by coding something up from scratch), I'm definitely planning on doing some more HTML5 in the near future.

It was also very satisfying to have the game running so easily in a browser, instantly cross-platform and accessible to people I wanted to show it to without having to get them to download it and make sure their version of Java was up to date or whatever else. I even tried it in Chrome on my Android phone and, although it didn't really fit on the screen (something I might try to improve in my next try), it did actually work and was playable, which was very cool to see!

Try the game here and let me know what you think!