Contre Jour - A Touch Demo Game For IE10?
Written by Lucy Black   
Tuesday, 30 October 2012

Contre Jour is a touch-based game that has been developed to show off IE10. The only problem is that, as it uses mostly HTML5 standards-based technologies, it shows off how good other browsers are as well!

The whole idea of a demonstration app is a little strange when you are trying to differentiate your browser while at the same time claiming to be standards based.

Even so Contre Jour is worth a few minutes of your attention in that it is fun to play and very impressive as a touch-enabled JavaScript program.

Watch the video to see what the game is all about:

 

 

The touch API was introduced in iOS 2, but Android and IE10 have more-or-less caught up and there is now a W3C draft standard for it. What this means is that  you can now write a touch-enabled web app that has a good chance of working fine on the major browsers. I've tried Contre Jour on IE10, Chrome and Firefox (both desktop and mobile) and it works fine. It can be a little slow on a mobile device but is still playable.

It also works on browsers running in non-touch devices when the user interaction falls back to mouse control. One interesting observation is that the game is much harder to play with mouse control, which really does point out the advantages of touch interaction.

When running on IE10, the game makes use of multi-touch input, which is one area where Microsoft has pushed ahead of the standards-based API using ms prefixes on additional API methods. However, the code is written so as to use whichever level of input support is available - multi-touch, touch or mouse.

Contre Jour was first popular on iOS and now it has been ported to full HTML5/JavaScript. The project took six months and converted over 80,000 lines of Objective C to JavaScript. The conversion was manual and no automatic tools were used - it was more a re-implementation of the basic idea than a port.

The basic game physics uses a modified version of Box2D, which was also used in the iOS version. The ground, which can be molded using touch or mouse, is a collection of Box2D objects which makes simulation and rendering an expensive task.

The following video gives you a view behind the scenes:

 

Overall the impression of the game is good. It shows that the web app approach is certainly viable for 2D physics-based games of this sort and, if you have the time, you can polish it to the point that it looks like a native app.

 

contjourpet

 

If you are inspired, there is a starter framework you can download and use to build HTML5 games. The sample provided uses the pattern for the Contre Jour game loop.

Of course, when it comes to games in HTML5 the big split is between the 3D games based on WebGL that Chrome and Firefox support and the 2D-only games that IE supports. Currently not supporting WebGL is costing IE a lot of ground in the browser wars and they don't even seem to have an alternative 3D graphic system on the horizon.

 

More Information

www.contrejour.ie

starter framework

Related Articles

Getting Started with Box2D in JavaScript

Cirque du Soleil Breaks New Ground With Chrome Experiment

New Chrome 21 Can See & Hear

Doom in a web page

 

espbook

 

Comments




or email your comment to: comments@i-programmer.info

 

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.

 

Banner


DuckDB And Hydra Partner To Get DuckDB Into PostgreSQL
11/11/2024

The offspring of that partnership is pg_duckdb, an extension that embeds the DuckDB engine into the PostgreSQL database, allowing it to handle analytical workloads.



It Matters What Language AI Thinks In
23/10/2024

We are currently polarized in how we think about Large Language Models. Some say that they are just overgrown autocompletes and some say that they have captured some aspects of intelligence. How well  [ ... ]


More News

 

Last Updated ( Tuesday, 30 October 2012 )