Using the Konami Code on our site – Why and How we did it.

Here at Fluid we love retro and the fading look of long lost glamour; from the boss proudly demonstrating his brand new iPad to Wayne complaining about his slightly ageing iMac,  regardless of its nature, if its retro its cool.

The term retro for myself conjours images of 80’s arcade games, and as far as I’m concerned a game is only worth playing if there is a cheat available for giving you a complete set of powers, infinite gold and as many optional extras as can fit on a screen. The result of this as you can probably guess, is that I don’t play games very often.

Probably the most famous cheat code ever incorporated into a game is the Konami code or “up up down down left right left right b a” which was written in 1985 by Kazuhisa Hashimoto, a games developer who was trying to port the arcade game “Gradius” to the NES.

Over the years the code has been ported for use on the web and today around 120 sites are known to implement it (or have used it in the past).

My idea of using it stemmed from April fools day where I wrote a set of scripts to turn the blog upside down as both a technical exercise and a practical joke. Not wanting to lose this code I stored it until such a time I could find a way of re-incorporating it in a less intrusive manner.

The problem with the original scripts was always flash. On a blog which references youtube and vimeo, how do you make these appear upside down natively in the browser without creating extra work? The answer, as it appeared was CSS3.

CSS3, for all you non-techies is an emerging technology for the internet which describes the styling of web pages. The latest incarnation (version 3) which is still in development allows for some pretty cool stuff including animation, rotation, drop shadows and much much more, all completely native to the browser.

Amongst the properties available in CSS3 is the transform property which can be used to rotate, scale, skew or distort any element on the page. Setting this to rotate: 180deg produces pixel perfect rotation to the entire document. Coupling this with a short script to capture the cheat sequence hidden somewhere in the website code means that at least as long as this version of our site exists, it will be browsable upside down.

Why not check it out now: “up up down down left right left right b a”

fluidcreativity
  • Written by on 5th July 2010 at 10:41
  • “Fluid Creativity is an award-winning, multi-service digital agency based in Manchester.”
  • Google+
  • http://matthewleak.co.uk Matthew Leak

    This is extremely dope.

    It seems that there’s an endless list of things that are achievable with CSS3. I’ve seen so many cool uses – this is way up at the top of the list..

  • http://matthewleak.co.uk Matthew Leak

    This is extremely dope.

    It seems that there's an endless list of things that are achievable with CSS3. I've seen so many cool uses – this is way up at the top of the list..