.
The 100 meter scroll is, as the name suggests, an actual 100 meter long scrollable website. It’s a 100 meter race competition, exactly like the Olympic discipline.

At its core is a competitive game with a natural shareability. As you challenge your friends and can show off your time. The design and sounds are kept very simple and friendly to match the gameplay.

We have deliberately kept everything as straightforward and simple as possible. It is literally start, scroll and share. 
 

The 100 meter scroll is a HTML5 based game. It’s built to be responsive and to work on smartphones, tablets and all modern browsers. It’s a simple game focused on speed, usability and a flexible layout. Everything unnecessary has been kept out. We wanted it to be as easy, straightforward and funny as possible. 

One of the first challenges in developing the game was to figure out the actual amount of pixels to fill up 100 physical meters! Since you cannot read an exact DPI from the browser, rely on CSS units or "window.devicePixelRatio", we decided a fixed height, based on an average display. 

We wanted the game to run well on all platforms, so we experimented with javascript, canvas, hardware acceleration/CSS3 tricks etc. and ended up with a solution that uses a little of everything:

- The animated finish line and a few graphics are rendered on canvas elements (just like the Graphics class in Actionscript 3).

- The trees and bushes are html div elements with CSS3 rounded corners and dropshadows.

- The field movement is done with TweenMax, in order to work perfect in all browsers. We tried with the CSS3 "translateY" property, but this didn't perform better and had some issues between browsers.

- We used JQuery, TweenMax (for the animations), and Buzz (for audio). 

Another challenge was managing scroll delta (the amount scrolled by the mouse). This is different between mice, browsers (and browser versions) and system settings. Some people have spent hours completing the game, whereas others scrolled through in 2 seconds!

Unfortunately we haven’t managed to keep a doping control, but when someone completed the game in 0.0 seconds we suspected a use of something more than a mouse and banned the record.    

It's impossible to control perfectly from javascript, but we made some small adjustments, to make the gameplay fair and fun for everyone. For touch screens this is obviously different, but here we made a simple 1:1 relation, so when you scroll 1px the field moves 1px - this is actually the best way to compete against others. 

Since we launched the 100 meter scroll has travelled 178 countries, more than 360.000 computers and received global press coverage. It’s been hacked more times than we care to count. It’s been called everything from “a complete waste of time” to “best thing after Mario” and still Usain Bolt hasn’t tried.  

So, if there’s anything else you want to know, or if you just want to yell at us because excessive scrolling broke your mouse wheel please contact us at both@momlookwhatimade.com  

For more technical questions please contact Michael Vestergaard at yes@iliketoplay.dk
Links

hr







All rights reserved © 2000 - 2014 Favourite Website Awards (FWA) -  Terms & Conditions -  Privacy statement -  Advertise -  About FWA -  Contact