100m Sprint (Sass / jQuery) Experiment


Am I available?

Maybe, who knows?
I should, so get in touch over at Contact .

Inspired by the Rio 2016 Olympics I started playing around in CodePen and ended up creating this little 100m Sprint simulation.

The experiment makes use of both Sass and jQuery random functions to generate a realist (kinda) run across the screen to the finish line – with each race ending in a different result. The race also provides a results feature which accurately captures the top three runners times (though it’s programmed they can’t beat Usain Bolt’s hallowed 9.58s world record).

In the future it would be great to program in a ‘button-bash’ feature to allow users to interact and drive the runners across the screen using key presses or screen tapping, but that’s for another time.

Have a play with the code below (it’s best to open it up in a full window).

See the Pen Sass / jQuery – 100m Sprint Simulator by Stephen Fairbanks (@thathurtabit) on CodePen.

Visit CodePen


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Don't Be Shy