HTML 5 Asteroids on the iPad

I’ve added touch controls to the HTML 5 Asteroids game that will only appear when you’re running it on an iPad.  The game will expand to fill the whole screen for maximum asteroid blasting action.  Orient your iPad in landscape fashion!

Play It!

 

There are a couple caveats (warning some nerdy content ahead):

Tunneling Effect

On the iPad the game runs at around 22 frames per second at its peak, not nearly as good as around 40 on a laptop, though it is enough for gameplay even if it can get choppy at times when there’s a lot of stuff whizzing around.

Unfortunately I’m only testing for collisions when the objects are rendered so it’s quite possible with lower framerates to have a bullet flying out of your ship first get rendered on one side of the asteroid you’re trying to pulverize and in the next frame get rendered on the other side letting it sail undamaged into your ship.  This is called the tunneling effect.  This is not a problem on a laptop or desktop because the framerates are high.  Since we’re sampling less per second (~22 verses ~40) a moving object is drawn less times though it’s traveling the same distance.  In other words if an asteroid travels from the top of the screen to the bottom of the screen in one second, on your computer it will most likely get drawn 40 times during that trip and on an iPad it will get drawn only 22 times leaving larger gaps between the drawings.  These larger gaps leave more of a chance for things to slip through and not collide when your eyes say they should have.

I’m considering augmenting the collision detection to remove the tunneling effect but it will need extra math which means slower framerates, at least initially.  It might be a better use of my time to pump framerates up.

Buggy Touch Events

There’s a bug with the iPad’s implementation of touch events in Javascript: if you have two fingers on the screen and raise one of them, a “touchend” event gets fired containing a reference to both fingers even though the second one hasn’t been raised.  If you then raise the second one, a “touchend” event is not fired.

It drove me nuts trying to figure this out and I haven’t been able to work around it.

What this means for the game is that using two fingers at the same time will get frustrating fast as the control you’re holding down will stop working periodically.  I suggest tapping for the best experience instead of holding.

Oh, this does not happen on the iPhone in case you were wondering, it works as expected! I have sent a bug report to apple (with a sample html page) and hopefully they already have a fix that’s not available yet or they will fix it for a future release.

On a side note, why aren’t Apple’s bug lists searchable by the public?  They must get reams of dupes.

In any case, let me know how it works!

This entry was posted in Coding, Games, Javascript, Projects and tagged , , , , , . Bookmark the permalink.

2 Responses to HTML 5 Asteroids on the iPad

  1. Steve says:

    Hi Doug,

    Have you done any more development on the iPad version of Asteroids. I think a true replication of the original would sell well.
    I checked out the other iPad implementations and didn’t find one ‘worthy’. I liked the look and feel of yours.
    Will you go on to add scoring, hyperspace, etc??

    Thanks
    Steve

  2. Doug says:

    I’ve made a couple tweaks for performance but not much beyond that. I still have to update the version here with the changes.
    I doubt I could sell it since Atari owns the rights to original Asteroids game :) Check out Atari’s Greatest Hits for the iPad, it came out recently and has Asteroids. I’ve been playing tons of Centipede.
    Currently I’m working on a more ambitious HTML 5 game (probably too ambitious) so watch this space for that when it gets nearer to completion.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>