If you loved Angry Birds, my guess is that you’re gonna love Contre Jour, a puzzle game that’s been recently very popular on iOS.

 

 
The IE team  has cooked up with the developers of Contre Jour to bring the popular game to the Web with HTML5. The Web-based version of Contre Jour, available now at Contrejour.ie, includes the first three chapters of the game, or 30 levels. It offers the same look, feel, and performance of the native app, complete with 10 levels exclusively for modern browsers that support multi-touch, like Internet Explorer 10.

Contre Jour, which was named the 2011 iPad game of the year, is based on the French phrase “against daylight.” Set to an orchestrated soundtrack from composer David Ari Leon, the game challenges you to navigate and survive a dark and dangerous game world. Using your finger, you morph the landscape — by pulling, swiping, and tapping tendrils, air geysers, and pulleys — to complete clever puzzles and propel a mysterious creature named Petit to safety.

 

 

Ground Physics

A defining feature of Contre Jour is how the user interacts and manipulates the surrounding world rather than manipulating the game’s hero character. In Contre Jour, a player shapes the clay-like ground with their finger, which is one of the primary ways to move the game’s hero, named Petit, around the screen.

Coding the ground logic in JavaScript was a big challenge. Mimicking the way it moves and shapes as the user touches it as well as the way it interacts with the games hero required pages of physics soaked logic. To render Contre Jour’s clay-like ground we used a modified JavaScript port of Box2D, which is the same physics engine used in the iOS version. This gave us almost identical functionality for managing physics objects, creating joints, and handling collisions.

The ground is made up of many distinct individual Box2D bodies, and that’s what gives it the ability to be shaped. It appears so smooth when it’s drawn because a quadratic curve is drawn in-between each of its sub-bodies. This gives the ground its claylike feel, but also makes rendering it very expensive.

Read more about the behind the scenes of creating this awesome HTML5 Web Game here.

 

Related Posts