Building a Temple Run clone in JS that runs in (some) Browser Consoles

Recently, Zahaan, Ed, Sam, and I collaborated to build a minimal clone of Temple Run for a hackathon project.
- Playable Version — JSBin
- Source — Github
Our game was heavily inspired by Jeff Schomay’s frogger clone.
Design
Animation in the console
The most fundamental mechanism for building a game that can run in the browser’s console is the Web API console.clear. console.clear allows us to print a lot of text to the console, and then quickly clear it all away.
In the context of attempting to animate something, then, we can think of console.clear as marking the location between frames of animation.
Here’s an stripped-down example to illustrate this basic mechanism:
When the two lines of of code in the section marked Frame 1 are executed, the console will look like this
"----------Z---------"
"----------Z---------"
"--------------------"
"----------Z---------"
"----------Z---------"Then, the console will be cleared, and Frame 2 printed
"---------Z----------"
"---------Z----------"
"--------------------"
"---------Z----------"
"---------Z----------"Then, the console will be cleared, and Frame 3 printed
"--------Z-----------"
"--------Z-----------"
"--------------------"
"--------Z-----------"
"--------Z-----------"When repeated very quickly (e.g. using setInterval or setTimeout), this process gives the impression of animation in the console!
NOTE: This method works to varying degrees in different consoles. We found our game to be very playable in JSBin’s console, but practically unplayable in Chrome’s Dev console. In the future, it would be useful to investigate exactly what causes these differences.
Drawing and Moving a Player Character on the Gameboard
After you have implemented basic animation, the next crucial step is figuring out how to draw a player on the gameboard, and move that player.
In this process came our second crucial design decision: use the DOM event listener Web API to accept user input. Since we decided to use EventListener, our game is only playable only in browser consoles rather than in all consoles.
Because JS is fundamentally synchronous, if we were to attempt to implement this game using pure JS (no web-apis), we would have to pause animation in order to accept input. This would make the game unplayable.
NOTE: Schomay suggests that some people have written games similar to his Frogger that are playable in node consoles. I’ll have to look into this…
So, the basic idea is to store the player position as an integer (0–4), and then change that player position based on user input in the DOM.
Another simplified example:
Accelerating Animation
