T-Rex Runner

The T-Rex minigame from Google Chrome is one of the most well-known Easter eggs, being accessible through the offline error screen (or by entering chrome://dino or chrome://network-error/-106).

Unused Sprite#

Unused	Used

An unused version of the "game over" dino sprite with white borders, much like the rest of the sprites. The used version lacks the border, probably so there isn't an odd gap between the dino and whatever you collided with.

Debugging Features#

Collision Boxes#

The function checkForCollision() can accept the canvas context as an optional third parameter. This adds colored collision boxes around the dino and the next obstacle.

Unused Debugging Function#

There's a function updateConfigSetting(setting, value) used only for debugging purposes that allowed to easily change some game variables while playing.

The settings this function can change are: GRAVITY, MIN_JUMP_HEIGHT, SPEED_DROP_COEFFICIENT, INITIAL_JUMP_VELOCITY, and SPEED.

The code for this function is the following:

        /**
         * Setting individual settings for debugging.
         * @param {string} setting
         * @param {*} value
         */
        updateConfigSetting: function (setting, value) {
            if (setting in this.config && value != undefined) {
                this.config[setting] = value;

                switch (setting) {
                    case 'GRAVITY':
                    case 'MIN_JUMP_HEIGHT':
                    case 'SPEED_DROP_COEFFICIENT':
                        this.tRex.config[setting] = value;
                        break;
                    case 'INITIAL_JUMP_VELOCITY':
                        this.tRex.setJumpVelocity(value);
                        break;
                    case 'SPEED':
                        this.setSpeed(value);
                        break;
                }
            }
        },

Author Comments#

T-Rex Runner was developed in HTML5, making its source code accessible. This source code is fully commented.

ASCII Art Collision Details#

The collision-related code has commented ASCII art explaining how it works.

    // Make collision box adjustments,
    // Central box is adjusted to the size as one box.
    //      ____        ______        ________
    //    _|   |-|    _|     |-|    _|       |-|
    //   | |<->| |   | |<--->| |   | |<----->| |
    //   | | 1 | |   | |  2  | |   | |   3   | |
    //   |_|___|_|   |_|_____|_|   |_|_______|_|
    //

Hidden Buttons#

At the bottom of the offline page, there's a hidden button container with three hidden buttons without separation. The top of this hidden container has a degraded effect for the error message upside. These three buttons were intended to be a download button, a reload button, and a show saved copy button. The download button is the only button with content, having an icon. Pressing the download button just disables the button, changing its color, and pressing the two last buttons will reload the page.

Revisional Differences#

2015#

• Pterodactyls were added.

September 2018#

• The game was updated for some time to include cake to celebrate Chrome's 10 aniversery.

November 2018#

• Highscores were added.

Unknown (post November 2018)#

• Alt text was added.
• The try again button now has an animation where it transforms from a chrome logo.
• A slightly different version can be accessed by clicking.
  • After clicking, there is a toggle for starting slower. Toggling it on makes the initial running speed (what else) slower, giving the T-Rex higher and floatier jumps. Toggling it off results in a similar play experience to the earlier version, but the over-time acceleration was made faster.
  • The game gets zoomed in to cover most of the screen.
  • The sound gets generated by playing notes instead of using Base 64-encoded audio files.
  • A sound for footsteps gets added.
  • Pterodactyls show up earlier than before. Originaly appearing around the 450 mark, now appearing as low as 30.