HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<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">

<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" width="800" height="600"></canvas>

<script src="script.js"></script>

<div class="popup-container" id="popup-container">

<div class="popup">

<button id="play-button">Play Again</button>

</div>

</body>

</html>