index.html

<!-- 1. Created boilerplate HTML with ! enter  -->
<!DOCTYPE html>
<html>

    <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">
        <title>🌈Snake</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>        
        <h1><a href="https://www.fontspace.com/category/3d"><img src="https://see.fontimg.com/api/renderfont4/2O6xe/eyJyIjoiZnMiLCJoIjo2NiwidyI6MjAwMCwiZnMiOjMzLCJmZ2MiOiIjNERFMjE1IiwiYmdjIjoiI0ZGRkZGRiIsInQiOjF9/cmFpbmJvdyBzbmFrZQ/organical-personal-use-bold-italic.png" alt="3D fonts"></a></h1>        

        <div id = "score">
            <p>Player 1 🍎 : <span id="score-span-one"> 0</span></p>
            <p>Player 2 🍎 : <span id="score-span-two"> 0</span></p>
        </div>
        <h6>👉 PRESS ANY KEY OR CLICK START | USE ⬅⬆⬇➡ KEYS TO MOVE SNAKE | RESET FOR NEW GAME 👈</h6>

        <div id = "gameContainer">
            <div class = "buttons">
                <!-- start button  -->
                <div id = "start-screen" class = "screen" style = "display: block;">
                    <button id = "startBtn" onclick = "start()">START</button>
                </div>
            </div>
            <div id="gameboard">
                <!-- This div will later be multiplied 144 times in JS to create the gameboard
                for snake to scrawl around in -->
                <div></div> 

                <div id="game-over">
                    <h1>GAME OVER</h1> 
                </div>
            </div>
        
                <!-- reset button  -->
                <button id ="resetBtn">RESET</button>
    
            </div>

        </div>

    <script type="text/javascript" src="script.js"></script>
    </body>

</html>
    