Made of little things.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stick Runner</title>
    <meta name="description" content="Help Rog the stickman parkour across city rooftops through 10 levels, each harder than the last. Jump the pits, dodge spikes, saws and a fire-breathing dragon, slide on ice and bounce on springs, then go down the stairs and beat the giant spider boss! Pick Easy, Normal or Hard, and press M to switch between 2D, first person and third person!" />
  </head>
  <body>
    <main id="app" class="app">
      <div id="stage" class="stage">
        <div id="screen" class="screen">
          <canvas
            id="game"
            class="game"
            tabindex="0"
            aria-label="Stick Runner. Help Rog the stickman run across the rooftops to the finish flag and jump over the pits."
          ></canvas>
          <canvas id="game3d" class="game" hidden aria-hidden="true"></canvas>
          <canvas id="hud" class="hud" aria-hidden="true"></canvas>
          <div id="no3d" class="no3d" hidden>Stick Runner is 3D, but this browser can't show 3D graphics.</div>
          <button id="menuButton" class="menu-button" type="button" title="Menu (Esc)">☰ Menu</button>
          <button id="viewButton" class="menu-button view-button" type="button" title="Switch view (M)">👁 View</button>
        </div>

        <div id="touch" class="touch" hidden>
          <div class="touch-group">
            <button id="touchLeft" type="button" aria-label="Run left">◀</button>
            <button id="touchRight" type="button" aria-label="Run right">▶</button>
          </div>
          <div class="touch-group">
            <button id="touchPunch" class="touch-jump touch-punch" type="button" aria-label="Punch" hidden>PUNCH</button>
            <button id="touchJump" class="touch-jump" type="button" aria-label="Jump">JUMP</button>
          </div>
        </div>

        <div id="menu" class="menu" role="dialog" aria-modal="true" aria-labelledby="menuTitle">
          <div class="menu-card">
            <div id="menuTitle" class="menu-title">STICK RUNNER</div>
            <div id="menuResult" class="menu-result" hidden></div>
            <div class="how">
              <p>You are <b>Rog</b> the stickman<span id="eyes">, and you see everything <b>through his eyes</b></span>. Help Rog run from roof to roof through <b>10 levels</b>, each harder than the last, then go down the stairs at the end of <b>Level 10</b> and beat the <b>giant spider boss</b>!</p>
              <p>The gaps between roofs are <b class="pit-word">the pit</b>. Watch out for spikes, saws and a fire-breathing dragon too! What happens when Rog falls or gets hurt depends on the <b>difficulty</b> you pick below.</p>
              <p>Some gaps are too wide to jump, but there's <b>ice</b> before them: slide on it and fly across!</p>
              <p>Some pits are too wide to jump, but there's a <b>clothesline</b> across them. Land on it and jump again fast: it snaps after half a second!</p>
              <p>Some gaps are too wide to jump, but there's a <b>spring</b> before them. Tap jump to hop right on top of it and BOING, it throws you across!</p>
              <ul class="keys">
                <li><kbd>←</kbd> <kbd>→</kbd> or <kbd>A</kbd> <kbd>D</kbd> run</li>
                <li><kbd>Space</kbd> jump (hold to jump higher). In 2D, <kbd>↑</kbd> or <kbd>W</kbd> jump too</li>
                <li>In first and third person: <kbd>↑</kbd> or <kbd>W</kbd> run forward, <kbd>↓</kbd> or <kbd>S</kbd> run back, <kbd>Space</kbd> jump</li>
                <li><kbd>M</kbd> switch view: 2D, first person, third person</li>
                <li>In the boss fight: <kbd>Space</kbd> or <kbd>Shift</kbd> punch, <kbd>1</kbd> jump. In 2D, <kbd>←</kbd> <kbd>→</kbd> move and <kbd>↑</kbd> jumps too; in first and third person, <kbd>↑</kbd> goes towards the spider and <kbd>↓</kbd> away. Jump up to punch the boss!</li>
                <li><kbd>Esc</kbd> open this menu</li>
                <li>Controller: stick or D-pad run, <kbd>A</kbd> jump, <kbd>X</kbd> punch, <kbd>Y</kbd> switch view, <kbd>Start</kbd> open this menu</li>
              </ul>
              <p class="touch-keys">Hold <b>◀</b> <b>▶</b> to run and tap <b>JUMP</b> to jump (hold it to jump higher). In first and third person the run buttons become <b>▲</b> forward and <b>▼</b> back. Tap <b>👁 View</b> to switch between 2D, first person and third person, and <b>☰ Menu</b> to come back here.</p>
            </div>
            <div id="difficulty" class="difficulty" role="radiogroup" aria-label="Difficulty">
              <span class="difficulty-label">Difficulty:</span>
              <button type="button" role="radio" data-difficulty="easy" aria-checked="false">Easy</button>
              <button type="button" role="radio" data-difficulty="normal" aria-checked="true">Normal</button>
              <button type="button" role="radio" data-difficulty="hard" aria-checked="false">Hard</button>
              <div id="difficultyHelp" class="difficulty-help"></div>
            </div>
            <div class="menu-actions">
              <button id="playButton" class="primary" type="button">Play</button>
              <button id="restartButton" type="button" hidden>Restart from Level 1</button>
            </div>
          </div>
        </div>

        <div id="tooSmall" class="too-small" hidden>Make the window bigger to run!</div>
      </div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>