Proof-of-concept rhythm action game using HTML5 video and Safari/WebKit CSS3 3D transforms

Score: 0
Streak: 0
Debug messages appear here
Please rotate your device to landscape orientation i.e. so that the screen is wider than it is tall

Before you go any further...

This is a technical experiment/proof-of-concept - it is not intended to be a proper game, nor a polished demo. (Lots of rough edges, placeholder art, the note chart sucks, weak game mechanics, etc.)

As this app uses a few web technologies which are not available on all browsers or hardware platforms, your experience will vary, as follows:

  1. Best: iPad - although in iOS 4.2 you'll have to manually hit play on the video to start, Apple no longer allow JavaScript to initiate video/audio playback.
  2. Good: Safari - the keyboard is not as nice as a touchscreen, and the fonts haven't been optimally defined
  3. OK: Chrome - doesn't support the CSS3 3D transforms, so graphically it looks really clunky, but the core game should be as per Safari
  4. No good: everything else, due to a combination of:
    • Lack of support for CSS3 animation
    • Lack of support for HTML5 video (NB: currently I only have an h264 file available; will try to get OGM and WebM versions as well)

It's likely that the code could be made to work on other browsers, but I've concentrated on targetting the iPad so far.

The video and tune are from the Windows 4k demo Elevated by RGBA and TBC, which (unsurprisingly) won its category at Breakpoint in 2009. There's a tech presentation about it here - I hasten to add, I don't have any connection with the geniuses who made that.

How to play

When the notes reach the yellow bar at the bottom of the screen, hit them, either by pressing on the touchscreen or using the keys C,V,B,N or M.