index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="icon"
            href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐍</text></svg>"
        />
        <link rel="stylesheet" href="style.css" />
        <script src="script.js" defer></script>
        <title>kang-piton</title>
    </head>
    <body>
        <div class="container">
            <div class="score-container">
                <p>SCORE : <b class="score">0</b></p>
                <p style="margin-left: auto">
                    HIGH SCORE : <b class="high-score">0</b>
                </p>
            </div>
            <canvas id="canvas" width="400" height="400"></canvas>
        </div>
        <div class="modal">
            <div class="modal-box">
                <h1 class="game-over">GAMEOVER</h1>
                <p>Your Score Is : <b class="last-score">0</b></p>
                <button style="cursor: pointer" class="play-again">
                    Play Again
                </button>
            </div>
        </div>
    </body>
</html>