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">
    <title>The TSL Snake Game</title>
   <style>
       body{
           margin: 0px;
           padding: 0px;
           display: flex;
            flex-direction: column; 
            justify-content: center;
            align-items: center;
       }
   </style>
</head>
<body>
    <h1>Snake Synthesis</h1>
    <div>
        <button type="submit" style ="background-color:red; border-color:red; font-size:16px; color:white" onclick="drawGame()"">Play</button>
        <button type="submit" style ="background-color:blue; border-color:blue; font-size:16px; color:white" onclick="restart()"">Restart</button>
    </div>
    <p>play a game of Snake that was synthesized using TSL!</p>
    <br> 
    <br>
    <canvas id="game" width="400" height="400"/>
    <script src="functions.js"></script>
    <script src="system.js"></script>
    <script src="index.js"></script>
</body>
</html>