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

Hayden Betts
Sep 5, 2018 · 2 min read
This player is… not very good.

Recently, Zahaan, Ed, Sam, and I collaborated to build a minimal clone of Temple Run for a hackathon project.

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

    Hayden Betts

    Written by

    Aspiring Web Dev | Ex-Technical Writer @Yardi | @haydenbetts

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade