HTML Site Gallery
Contre Jour

Description:

"Contre Jour" is a video game that is "blurring the lines between interactive art and games". Made popular on iOS, and created by Maksym (Max) Hryniv, Contre Jour is known world-wide for its innovative gameplay, charming art style, and captivating soundtrack. With the debut of Internet Explorer 10, Microsoft was looking for an opportunity to demonstrate the updated JavaScript engine and advanced multi-touch features they had packed into their new browser.

HTML5 usage:

HTML5
Objective-C to Javascript. One of our key challenges early on was migrating the deep object hierarchy of Contre Jour from the original iOS code into JavaScript. To help with this we leaned on John Resig's "Simple JavaScript Inheritance" pattern in several places where we needed inheritance.

This allowed us to use a lot of code from Contre Jour's Open-C architecture, more than we anticipated. Components in the game that shared common base behaviors, such as the particle systems, were easier to implement because we had an "inheritance" hierarchy that allowed us to avoid writing everything from the ground up each time. Without a pattern like this, it would have been very difficult, if not impossible, to bring the game to HTML5. We would have ended up having to re-write most of the game. Thankfully, using Simple JavaScript Inheritance pattern saved us a lot of time and resources.

CSS3
CSS animations and transitions played a big part in the development of the menus and non-gameplay elements of the game. Most of these CSS transitions occur during screen transitions or game events, such as showing/hiding the pause menu, transitioning between levels, or transitioning between a level and the level picker. In browsers like Internet Explorer 10, every pixel on the screen is hardware accelerated. What does that mean? It means that without any extra code you have the power to create high fidelity, high performance effects. This helped us offload some of the rendering work from the already abused canvas to the DOM and CSS layout engine.

Check out the full Behind the Scene Details of Contre Jour right here.

Technology Used:

HTML5 CSS3

HTML5 Browser Optimized for:

Device Optimized for:

Desktop,Tablet,Phone,Touch,Largescreen

Categories:

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •