Project Background

Issued by communication agency IN10, De Monsters created a marble game inspired by Plinko for Boursin. The Marble Game is part of a Dutch campaign which focuses on the human senses. Using a action code that can be found on all Boursin products, users can play the game and win a price that is connected to one of the senses.

The game is based on the classic Plinko game that everyone probably played with at their grandma's. You drop a marble at the top of the board, watch how it bounces of the several small nails until it finally falls into one of the squares at the bottom. If it falls in the square you picked beforehand, you win a price! Don't have a action code? No worries, just share on facebook and you get one marble for free!

Game Plan

Make sure everyone can play the Boursin Marble game on their platform of choice

Wincode

During the action peroiod, you can find a sticker with a wincode and link to the Marble Game On every Boursin product in Dutch grocery stores.

Game

If you fill in the code on the action site you get 6 chances in the marble game. If you drop the marble in the box you picked you win a prize!

Cross Platform

You can play this game on any modern platform of your choice. Whether it is a browser on your computer, smartphone or Facebook, the game simply works withou the need of any plugins.

Game

The entire website and game are built using HTML, JavaScript and CSS. Using this basis we could ensure that it would run on all major browsers, iPhone, iPad, Android and Windows Mobile.

Facebook App

With Facebook being an obvious dominant factor in todays marketing reach, we made sure that the app would run on Facebook within the design constraints that Facebook offers. The changes are created purely using CSS.

Mobile

It is very probable that the first encounter you may have with the Boursin campaign is when you buy one of the products in a store. We wanted to make sure that you would be able to use the site at that exact moment with the device that you probably have on you at that moment: your mobile phone.

A lot of mobile websites strip most interactivity to tackle slow mobile connections and small screens, thankfully we did not have to do this. We made a few changes to the flow and layout to make sure that only those elements you need at that time ar visible. The Marble Game itself stayed intact and fully functional.

Under the hood

We used a JavaScript version of the well know Box2D Physics engine

Everything we do is affected by the laws of physics. Because we are confronted with physics all the time, natural physics are key for most games as they make it feel right or wrong. To establish a good physics feel there are several physics engines you can use, one of the most popular is Box2D.

With Box2D we were able to build a virtual version of the Plinko board. By adding gravity, friction and elasticity we emulated the falling marbles as if you would let them drop in an actual Plinko board. We made some customizations to the Box2D implementation so it would run smoothly in all major browsers, but also on mobile devices.

The result is one Plinko game module that is used in all different versions of the game, the only differences are visual and those are done using standard Stylesheets.