wdi-project-one/index.html at master · alexfrancisdev/wdi-project-one · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Snake</title>
  <link rel="stylesheet" href="./style.css">
  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,700,700i" rel="stylesheet">
</head>
<body>
  <section class="startScreen" style="background-color: black;">
    <h1 class="vectro">
      <span class="vectro-body">SNAKE</span>
      <span class="vectro-red">I</span>
      <span class="vectro-green">I</span>
      <span class="vectro-blue">I</span>
    </h1>
    <div class="buttonContainer">
      <div class="button" id="p1-menu">1 Player</div>
      <div class="button" id="p2-menu">2 Player</div>
    </div>
    <div class="bottom"></div>
  </section>
  <section class="p1Start">
    <h1 class="vectro">
      <span class="vectro-body">SNAKE</span>
      <span class="vectro-red">I</span>
      <span class="vectro-green">I</span>
      <span class="vectro-blue">I</span>
    </h1>
    <div class="player-container">
      <div class="left">
        <h2>Player 1</h2>
        <h3>Pick Snake Color</h3>
        <p>(Use the arrow keys to control your snake)</p>
        <input id="color" type="color" value="#28bf31">
      </div>
    </div>
    <div class="buttonContainer" style="display: flex; flex-direction: row; margin: 10px">
      <div class="button" id="p1-start">Start</div>
      <div class="button" id="return-to-start1">Return</div>
    </div>
  </section>
  <section class="p2Start">
    <h1 class="vectro">
      <span class="vectro-body">SNAKE</span>
      <span class="vectro-red">I</span>
      <span class="vectro-green">I</span>
      <span class="vectro-blue">I</span>
    </h1>
    <div class="player-container">
      <div class="left">
        <h2>Player 1</h2>
        <p>(Use the arrow keys to control your snake)</p>
        <h3>Pick Snake Color</h3>
        <input id="pl1Color" type="color" value="#28bf31">
      </div>
      <div class="right">
        <h2>Player 2</h2>
        <p>(Use the WASD keys to control your snake)</p>
        <h3>Pick Snake Color</h3>
        <input id="pl2Color" type="color" value="#2a28bf">
      </div>
    </div>
    <div>
      <div class="buttonContainer" style="display: flex; flex-direction: row; margin: 10px">
        <div class="button" id="p2-start">Start</div>
        <div class="return button" id="return-to-start2">Return</div>
      </div>
    </div>
  </div>
</section>
<section class="main">
  <div class="players">
    <h2>Player 1</h2>
    <div class="name">
      <!-- <p class="display-p1-name">Name</p> -->
      <p class="p1score">Score</p>
    </div>
    <br>
    <div class="p2info">
      <h2>Player 2</h2>
      <div class="name">
        <!-- <p class="display-p2-name">Name</p> -->
        <p class="p2score">Score</p>
      </div>
    </div>
  </div>
  <div class="grid-container">
    <div id='grid'></div>
  </div>
  <div class='highscore'>
    <h2>Highscores</h2>
  </div>
  <div class="splashContainer">
    <div class="oversplash">
      <h2 id="gameover">Game Over!</h2>
      <p id="splashMsg">Oh no! You crashed!</p>
      <div>
        <div class="button" id="playAgain">Play Again</div>
        <div class="button" id="p1exit">Exit</div>
      </div>
    </div>
  </div>
</section>
<section class="gameover">
  <h1>Game Over!</h1>
  <div class="button" id="mainmenu">Main Menu</div>
</section>
<footer>Made with <img src="pixel-heart.png" height="25"> by Alex</footer>
<audio id="introSound" src="intro.wav"></audio>
<audio id="menuSound" src="menu.mp3"></audio>
<audio id="returnSound" src="return.wav"></audio>
<audio id="deathSound" src="die-sound.mp3"></audio>
<audio id="startSound" src="gamestart.ogg"></audio>
<audio id="bananaSound" src="banana.wav"></audio>
<audio id="eatingSound" src="eating.wav"></audio>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script src="./app.js" charset="utf-8"></script>
</body>
</html>