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).