SnakeGame-JS-Canvas/index.html at main · BOAScripts/SnakeGame-JS-Canvas · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500&display=swap">
   <link rel="stylesheet" href="./src/normalize.css">
   <link rel="stylesheet" href="./src/styles.css">

   <title>Snake Game Canvas</title>
</head>
<body>
   <header>
      <a href="https://github.com/BOAScripts/SnakeGame-JS-Canvas" target= "_blank" id="ghBanner">View on GitHub</a>
      <h1>Welcome to my snake game</h1>
   </header>
   <div id="scores">
      <p class="scoreTxt">Score : <span id="score">0</span></p>
      <p class="scoreTxt">Highest : <span id="highest">0</span></p>
   </div>
   <main id ="wrapper">
      <div id="startScreen">
         <div id="scContent">
            <div id="scLeft">
               <p class="grHeader">Select game size</p>
               <img src="./src/img/snake_preview_M.png" id="gamePreview">
               <div id='gameSize'>
                  <input type="radio" name="switchGameSize" id="smallGrid" value="smallGrid">
                  <label for="smallGrid">15x10</label>
                  <input type="radio" name="switchGameSize" id="mediumGrid" value="mediumGrid" checked>
                  <label for="mediumGrid">20x15</label>
                  <input type="radio" name="switchGameSize" id="bigGrid" value="bigGrid">
                  <label for="bigGrid">30x20</label>
               </div>
            </div>
            <div id="scRight">
               <p class="grHeader">Controls</p>
               <img src="./src/img/buttons.png" id="controlsImg">
               <p class="list">WASD and Arrow keys</p>
               <div id="gameRules">
                  <p class="grHeader">Game rules</p>
                  <p class="list">Get (+1) to increase score</p>
                  <p class="list">Borders are deadly</p>
                  <p class="list">Snake body is deadly</p>
               </div>
            </div>
         </div>
         <button id="play">PLAY</button>
      </div>

      <canvas class="hidden" id="grid"></canvas>
      <div class="hidden" id="endScreen">
         <p>DEAD: Replay ?</p>
         <button id="reset">Try again!</button>
      </div>
   </main>
   <footer>
      <a href="https://www.flaticon.com/free-icons/keyboard" target= "_blank" title="keyboard icons">Control icons created by Freepik - Flaticon</a>
   </footer>
   <script src="./src/script.js"></script>
</body>
</html>