Interactive Website Showcasing Over 30 Years of Mario GamesArticles October 10, 2013
Childhood for most of us would not be complete if we haven’t tried playing a Mario game. For decades ago, Mario has become one of the most popular game characters of all time spanning many stages of evolution in gaming technology.
To pay tribute to the beloved game, IGN, the popular gaming network in cooperation with Intel’s HTML5 Hub have created “The Museum of Mario“, an interactive website showcasing the journey of Mario games throughout the years. The Museum of Mario highlights the evolution of the game from its rich history as an 8-bit arcade game to its 3D versions in recent years.
The web experience was created using HTML5 presenting a modern way of displaying content online. The smooth scrolling and interactivity of the page will make every user enjoy the whole web experience. The project can be viewed on multiple devices to easily reach all Mario fans across multiple platforms.
Kyle Simpson, Developer of the project has this to say about creating The Museum of Mario:
I think anyone that’s played a Mario game has built an emotional attachment to that character. So having the opportunity to use web technology to build an interactive anthology around Mario has been a blast. I think we’ve achieved a modern method of viewing content.
I spent quite a bit of time working on the architecture of the site. We wanted to do something unique with the way the user navigates the site. Rather than having a standard vertically scrolling experience, we’ve incorporated what I call “paged scrolling”. Once you scroll past a certain threshold it switches to the next page. I also brought in several libraries that I’ve worked on in the open source community, including a templating engine called grips and a dynamic script loader called lab.js. Other technologies we used include WebGL, three.js, socket.io, a custom audio/video manager using soundjs, and even Adobe Edge.
See The Museum of Mario in action here and share your #MarioMemories on Twitter or via the comment box below!