HTML5 Mobile App Spotlight: A Minimal Arcade Game Made with Phaser and PhoneGap

Welcome to the first post of the new HTML5 Mobile App Spotlight series. This series will bring attention to the the cool mobile applications developers are building with HTML5 technology.

I’m looking for well executed mobile applications that use any HTML5 mobile framework. Ideally these will be applications in production that are available on app stores. It doesn’t have to be exciting or novel, just a solid example of what your chosen framework can do. If you think your mobile application would be a good fit for this spotlight series, please contact me and tell me about your app.

Summary

Title I Hate Squares
Category Games
Price Free
Platforms iOS, Android (soon)
Technology Phaser, PhoneGap Build
Author Joshua Morony
Description You are the only quadrilateral on Quadra affected by gravity. You are also the only rectangle. The squares hate you because you're different, and they want to hurt you. You should avoid them. Tap anywhere on the screen to jump and use your exemplary maneuvering skills to avoid the red squares for as long as you can (oh and watch out for the purple squares too…). As frustrating and addicting as this can be, you'll also find yourself getting into a groove and relaxing to the chilled out music with a futuristic vibe.

Before we get started…

Usually I will be interviewing other people about their applications. Since I’m yet to reach out to people (or them to me) and I wanted to get this series underway I figured I’d, you know, interview myself…

Why did you create this mobile application?

I created this application as an example app for my new Web to Mobile Developer course. The course provides a complete walkthrough of building one business mobile application and one mobile game – I Hate Squares is that game. Originally I never intended to submit it to the App Stores but after play testing I and others seemed to love it so I added a few more features to it and shipped it.

People who download the course will receive a slightly simplified version of the game along with a tutorial and screencast of me building the game. If you do download the course you are free to use the code in your own projects however you see fit, I just ask that you don’t submit clones to the app store.

I Hate Squares Screenshot

Who is the app for and why should they download it?

Since it’s a game, it can be for just about anyone. I wanted to create a simple, minimalistic game that you can play for 30 seconds or 10 minutes whenever you’re bored. It is modeled after the Flappy Bird style of being difficult and frustrating but also addicting. So if you’re into addictive time wasters or like competing with your friends for the highest score then you will probably like this app. As frustrating as it is, it’s also quite relaxing once you get the hang of it.

How long did it take to create?

Total development time for the application was around 2-3 weeks but a lot of that was ideation and concept changes. It was originally called Circle Attack and was quite a different game (though still geometry themed clearly).

If I was to begin development with all the requirements in mind from the start I would expect it to take the better part of the day. HTML5 and the Phaser framework allow for extremely rapid game development.

Can you tell us a little bit about the technologies you chose and why you chose them?

I haven’t actually been developing games for very long at all – I chose Phaser because I’m a massive HTML5 fan and the idea of creating games with HTML5, I think, is awesome. The simplicity of the Phaser framework also really clicked with me.

I have spoken about this in the past, but the main reason I choose to go with PhoneGap Build is because it is practically the only way to build iOS apps on a windows computer. I’ve had great success with PhoneGap Build and PhoneGap in general for business style applications, and it seems to have worked well for this mobile game as well. I don’t think PhoneGap is the ideal solution for mobile HTML5 games just yet, a more complex game would probably struggle to run very well through the standard web view PhoneGap provides. Maybe once we can make use of the WKWebView (which will be soon hopefully) things will be different.

IHS Screenshot

What were the most challenging aspects of creating this application?

The development of this application was surprisingly smooth. I quite often run into challenging road blocks, often related to how to create a smooth user experience and especially with games, but I Hate Squares just seemed to flow nicely from inception to production. It’s been quite challenging for me in the past to teach new users what a game is and how to play it, but all my test users seemed to pick this up right away with very little instructions.

The biggest pain for me was definitely Game Center integration, I had a lot of trouble authenticating the player in a sandbox environment for testing. I’ve written another article about how to do that with PhoneGap Build to save others the trouble.

I’ve also had some trouble preparing the Android version. When building with PhoneGap the game does not run smoothly enough of Android so I’ve been investigating other options. Right now I’m looking at using the cross walk project to natively wrap the application instead. The cross walk project allows you to develop your applications to utilise the latest version of Google Chromium, instead of whatever web view the device actually uses.

Of course since I’ve been relying on a few iOS specific PhoneGap Plugins I will need to make some changes to account for the loss of those. I will likely end up making a slightly modified version for Google Play.

I’m looking to get the Android version out within the next few weeks.

Follow me on Twitter or subscribe to me on YouTube for more web development content.

Check out my latest videos: