game-time/index.html at master · tdberg21/game-time · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Snake</title>
  <link href="./game.css" rel="stylesheet" type="text/css" />
  <link rel="icon" type="image/png" href="./lib/images/slytherin-logo.png">
  <!-- <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet"> -->
  <link href="https://fonts.googleapis.com/css?family=Paprika" rel="stylesheet">
</head>
<body>
  <section class="header-container">
    <h1>
      <img class="snake-s" src="./lib/images/slytherin-logo.png" alt="Snake shaped like an s">lytherin
      <img class="snake-s" src="./lib/images/slytherin-logo.png" alt="Snake shaped like an s">nake
    </h1>
  </section>
  <section class="main">
    <article class="instructions-container">
      <h2>Instructions</h2>
      <p>Move the Slytherin Snake to steal
        <span class="color-gold">the golden snitches</span>, if you hit the wall or your self you lose a life!</p>
      <p>You have three lives.</p>
      <p>Press S to start.</p>
      <p>Press P to Pause.</p>
      <p>Press the arrow keys to move up, down, left, right.</p>
    </article>
    <canvas id="canvas" height="600" width="600"></canvas>
    <article class="score-container">
      <p class="score">Lives:
        <span id="lives-number">3</span>
      </p>
      <p class="score">Score:
        <span id="score-number">0</span>
      </p>
      <p class="score">Beat the last score:
        <span id="high-number">137</span>
      </p>
    </article>
  </section>
  <section class="game-over-container game-over-display">
    <h3 class="game-over ">GAME OVER!!</h3>
    <p class="reset-game-paragraph ">Press R to reset the game.</p>
    <img src="https://media.giphy.com/media/lPU85ItA6KGYw/giphy.gif" alt="snape gif" class="game-over-image "
      title="Voldemort sad gif">
  </section>
  <audio loop id="theme-song">
    <source src="./lib/audio/harry-potter-theme.mp3" type="audio/ogg">
  </audio>
  <script src="main.bundle.js"></script>
</body>
</html>