chrome dino game

by Nicholas Berlette

HTML

<html dir="ltr" lang="en" >
  <head>
    <meta charset="utf-8" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#fff" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,
                                 maximum-scale=1.0, user-scalable=no"
    />
    <title>chrome://dino/</title>
  </head>
  <body
    class="neterror"
    style="font-family: system-ui, sans-serif; font-size: 75%"
    jstcache="0"
  >
    <div id="main-frame-error" class="interstitial-wrapper" jstcache="0">
      <div id="main-content" jstcache="0">
        <div
          class="icon icon-offline"
          jstcache="0"
          style="visibility: hidden"
        ></div>
        <div id="main-message" jstcache="0">
          <h1 jstcache="0">
            <span jsselect="heading" jsvalues=".innerHTML:msg" jstcache="9"
              >Press space to play</span
            >
            <a
              id="error-information-button"
              class="hidden"
              onclick="toggleErrorInformationPopup();"
              jstcache="0"
            ></a>
          </h1>
          <p
            jsselect="summary"
            jsvalues=".innerHTML:msg"
            jstcache="1"
            style="display: none"
          ></p>
          <!--The suggestion list and error code are normally presented inline,
          in which case error-information-popup-* divs have no effect. When
          error-information-popup-container has the use-popup-container class, this
          information is provided in a popup instead.-->
          <div id="error-information-popup-container" jstcache="0">
            <div id="error-information-popup" jstcache="0">
              <div id="error-information-popup-box" jstcache="0">
                <div id="error-information-popup-content" jstcache="0">
                  <div
                    id="suggestions-list"
                    style="display: none"
                   ...

CSS

/* Copyright 2017 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

a {
  color: var(--link-color);
}

body {
  --background-color: #fff;
  --error-code-color: var(--google-gray-700);
  --google-blue-50: rgb(232, 240, 254);
  --google-blue-100: rgb(210, 227, 252);
  --google-blue-300: rgb(138, 180, 248);
  --google-blue-600: rgb(26, 115, 232);
  --google-blue-700: rgb(25, 103, 210);
  --google-gray-100: rgb(241, 243, 244);
  --google-gray-300: rgb(218, 220, 224);
  --google-gray-500: rgb(154, 160, 166);
  --google-gray-50: rgb(248, 249, 250);
  --google-gray-600: rgb(128, 134, 139);
  --google-gray-700: rgb(95, 99, 104);
  --google-gray-800: rgb(60, 64, 67);
  --google-gray-900: rgb(32, 33, 36);
  --heading-color: var(--google-gray-900);
  --link-color: rgb(88, 88, 88);
  --popup-container-background-color: rgba(0, 0, 0, 0.65);
  --primary-button-fill-color-active: var(--google-blue-700);
  --primary-button-fill-color: var(--google-blue-600);
  --primary-button-text-color: #fff;
  --quiet-background-color: rgb(247, 247, 247);
  --secondary-button-border-color: var(--google-gray-500);
  --secondary-button-fill-color: #fff;
  --secondary-button-hover-border-color: var(--google-gray-600);
  --secondary-button-hover-fill-color: var(--google-gray-50);
  --secondary-button-text-color: var(--google-gray-700);
  --small-link-color: var(--google-gray-700);
  --text-color: var(--google-gray-700);
  background: var(--background-color);
  color: var(--text-color);
  word-wrap: break-word;
}

.nav-wrapper .secondary-button {
  background: var(--secondary-button-fill-color);
  border: 1px solid var(--secondary-button-border-color);
  color: var(--secondary-button-text-color);
  float: none;
  margin: 0;
  padding: 8px 16px;
}

.hidden {
  display: none;
}

html {
  -webkit-text-size-adjust: 100%;
  font-size: 125%;
}

.icon {
  background-repeat: no-repeat;
  background-size: 100%;
}

@media...

JavaScript

// deno-lint-ignore-file

// Copyright 2017 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

const HIDDEN_CLASS$1 = "hidden";
let mobileNav = false;

var loadTimeDataRaw = {
  dinoGameA11yAriaLabel: "Dino game, press space to play",
  dinoGameA11yDescription:
    "Dino game. A pixelated dinosaur dodges cacti and pterodactyls as it runs across a desolate landscape. When you hear an audio cue, press space to jump over obstacles.",
  dinoGameA11yGameOver: "Game over, your score is $1.",
  dinoGameA11yHighScore: "Your highest score is $1.",
  dinoGameA11yJump: "Jump!",
  dinoGameA11ySpeedToggle: "Start slower",
  dinoGameA11yStartGame: "Game started.",
  errorCode: "",
  fontfamily: "system-ui, sans-serif",
  fontfamilyMd: "system-ui, sans-serif",
  fontsize: "75%",
  heading: { hostName: "dino", msg: "Press space to play" },
  iconClass: "icon-offline",
  language: "en",
  textdirection: "ltr",
  title: "chrome://dino/",
};

window.loadTimeDataRaw = loadTimeDataRaw;

//******************************************************************************
const HIDDEN_CLASS = "hidden";

/**
 * Collision box object.
 * @param {number} x X position.
 * @param {number} y Y Position.
 * @param {number} w Width.
 * @param {number} h Height.
 * @constructor
 */
class CollisionBox {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
  }
}

/**
 * T-Rex runner sprite definitions.
 */
const spriteDefinitionByType = {
  original: {
    LDPI: {
      BACKGROUND_EL: { x: 86, y: 2 },
      CACTUS_LARGE: { x: 332, y: 2 },
      CACTUS_SMALL: { x: 228, y: 2 },
      OBSTACLE_2: { x: 332, y: 2 },
      OBSTACLE: { x: 228, y: 2 },
      CLOUD: { x: 86, y: 2 },
      HORIZON: { x: 2, y: 54 },
      MOON: { x: 484, y: 2 },
      PTERODACTYL: { x: 134, y: 2 },
      RESTART: { x: 2, y: 68 },
      TEXT_SPRITE: { x: 655, y: 2 },
      TREX: { x: 848, y: 2 },
      STAR:...