Side project · Playground · Live

Catch the Signal

A tiny game for when the internet is down: tap the Wi-Fi signal before it jumps. Built step by step in plain JavaScript, one idea per commit.

HTML
CSS
JavaScript

Edit the code and the game updates as you type. Reset brings back the original.

catch-the-signal

GitHub

Loading editor…<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Catch the signal</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="game">
      <h1>Catch the signal 📶</h1>

      <!-- The scoreboard: the numbers sit in their own spans so JavaScript can change them -->
      <p class="board">
        Score: <span id="score">0</span>
        <span class="divider">·</span>
        Time: <span id="time">30</span>
        <span class="divider">·</span>
        Best: <span id="best">0</span>
      </p>

      <button id="start" class="start" type="button">Start</button>

      <!-- Nine squares. Buttons can be clicked, tapped and reached with the keyboard for free -->
      <div id="grid" class="grid">
        <button type="button" class="cell" aria-label="Square 1"></button>
        <button type="button" class="cell" aria-label="Square 2"></button>
        <button type="button" class="cell" aria-label="Square 3"></button>
        <button type="button" class="cell" aria-label="Square 4"></button>
        <button type="button" class="cell" aria-label="Square 5"></button>
        <button type="button" class="cell" aria-label="Square 6"></button>
        <button type="button" class="cell" aria-label="Square 7"></button>
        <button type="button" class="cell" aria-label="Square 8"></button>
        <button type="button" class="cell" aria-label="Square 9"></button>
      </div>

      <!-- Messages like "Time's up!"; aria-live makes screen readers announce them -->
      <p id="status" class="status" aria-live="polite"></p>
    </main>
    <script src="game.js"></script>
  </body>
</html>

localhost/catch-the-signal

Console

Output from console.log shows up here.

HTMLRuns in your browser · nothing is hostedTab indents · Esc then Tab leaves the editorAuto-run

Loading editor…<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Catch the signal</title> <link rel="stylesheet" href="style.css" /> </head> <body> <main class="game"> <h1>Catch the signal 📶</h1>  <p class="board"> Score: <span id="score">0</span> <span class="divider">·</span> Time: <span id="time">30</span> <span class="divider">·</span> Best: <span id="best">0</span> </p> <button id="start" class="start" type="button">Start</button>  <div id="grid" class="grid"> <button type="button" class="cell" aria-label="Square 1"></button> <button type="button" class="cell" aria-label="Square 2"></button> <button type="button" class="cell" aria-label="Square 3"></button> <button type="button" class="cell" aria-label="Square 4"></button> <button type="button" class="cell" aria-label="Square 5"></button> <button type="button" class="cell" aria-label="Square 6"></button> <button type="button" class="cell" aria-label="Square 7"></button> <button type="button" class="cell" aria-label="Square 8"></button> <button type="button" class="cell" aria-label="Square 9"></button> </div>  <p id="status" class="status" aria-live="polite"></p> </main> <script src="game.js"></script> </body> </html>