The Surprise: Find the Easter Egg !

Image Title

posted by admin
on Nov 04, 2015

As a product of the ’80s, I have witnessed most of the big strides in tech and game development. I remember the days of C64 Magazine with the latest cassette tape demos sellotaped (Scotch-taped for my American friends) to the front (yes, that’s right – I said cassette tape). I can easily recall coming home from school and starting up the Commodore 64, throwing a game cassette in there and listening to the screeches as it loaded. Only my mum calling me down for dinner and unplugging the C64 from the wall at night could keep me away. Well, that and the other 50% of the time when there was a crash during loading. At that point, I’d have to ask myself, Was it worth trying the load again? Could I wait another 45 minutes? Would it be safer to try another game?

These were the big issues I faced as a kid, but I loved it. I was addicted, spending hours completing as many games as I could get my hands on, then going back through to find any Easter eggs the game developers might have hidden for me.

In recent weeks, I had the opportunity to re-develop the NIFTIT website. Aside from turning the creative team’s designs into reality, I was asked by the company CTO, Dom, to add an Easter egg to the site. Almost exploding with excitement, I fell into an idea frenzy; I wanted this new hidden egg to be relevant to web development, interactive with the website, and awesome fun to play with. With this in mind, I decided to build the Nifty Style Bot, an arcade-style action game to interact with the CSS rules on the page. 

Screen Shot 2015-10-29 at 10.26.39 AM

The Build

Browsers have become amazingly powerful with the adoption of HTML5 and CSS3. The Canvas API is a very interesting addition to HTML5.

“Added in HTML5, the HTML [canvas] element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.” — MDN

Canvas was initially developed by Apple for its WebKit in 2004 when it was used to power Dashboard Widgets and the Safari browser. It was then adopted by other major browsers in 2005 and standardized by the Web Hypertext Application Technology Working Group (WHATWG).

This was an obvious choice for developing the Nifty Style Bot, but I didn’t want to spend time amassing all of the lower-level functionality for the game if someone else had done the work already. I needed a framework, and after one quick Google search I came across Phaser.

“A fast, free and fun open source framework for Canvas and WebGL powered browser games.” — phaser.io

The Phaser documentation is very easy to use (check it out here: http://phaser.io/docs). It’s thorough and well-maintained, but if you want to see code snippets in action, go here (http://phaser.io/examples) for an amazing examples section. As you will note while investigating, Phaser includes support for everything from tile maps and physics, to mobile touch input and particles – and it is only improving with time.

The functionality Phaser provides was just what I was looking for to help me build my Easter egg, but while I was confident in its power, I did have some concerns about manipulating the DOM elements and creating collisions. I found that Phaser works in states, which are functions called in a specific order to add your custom game code. It made sense that I would have to get the DOM element positions and sizes into Phaser in order to test for any collisions and make the relevant DOM manipulations. My solution was to use the “Create” function, to essentially build an array of DOM element objects for use in the game code. Simple!

With the help of some great tools, I was able to create something fun that reflects the good-natured attitude of the NIFTIT team. It was a great opportunity to make my space within the internet a more interactive place – as well as to relive a bit of my childhood at the same time.

The Easter egg is accessible on each page, so have a good click around and see if you can find it. It’s time for you to go forth and complete our website!