T-Rex Runner

T-Rex Runner
Also known as: Google Chrome T-Rex, Dino Game Developer: Google Publisher: Google Platform: HTML5 Released internationally: 2014 This game has unused code. This game has hidden development-related text. This game has unused graphics. This game has debugging material.

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

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.