075-breakout game/index.html

<!-- References: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API -->
<!-- https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Breakout!</title>
  </head>
  <body>
    <h1>Breakout!</h1>
    <button id="rules-btn" class="btn rules-btn">Show Rules</button>
    <div id="rules" class="rules">
      <h2>How To Play:</h2>
      <p>
        Use your right and left keys to move the paddle to bounce the ball up
        and break the blocks.
      </p>
      <p>If you miss the ball, your score and the blocks will reset.</p>
      <button id="close-btn" class="btn">Close</button>
    </div>
    <canvas id="canvas"></canvas>
    <script src="script.js"></script>
  </body>
</html>