-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
169 lines (160 loc) · 9.88 KB
/
index.html
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Snake</title>
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">-->
<link href="https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- jquery color
<script src="./jquery-color/jquery.color.js"></script>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
-->
<!-- select2 (for styling selections) -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<!-- main js (generated by webkit -- requires game functionality files) -->
<script src="./dist/main.js"></script>
<!-- main stylesheet -->
<link rel="stylesheet" type="text/css" href="./css/snake.css">
<!-- icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a63b3398b9.js" crossorigin="anonymous"></script>
</head>
<body>
<h1 class = 'game-title'>Snake</h1>
<header class= 'header'>
<!-- button above game display to control: pause/play/replay (*left-side)-->
<div class = 'header-buttons header-play-buttons'>
<!-- switch type of button depending on game state ( paused = show play, playing = show pause, game-over = show-replay) -->
<div class = 'header-btn pause-btn hidden noSelect'>
<button class="btn pause noSelect"><i class="fas fa-pause pause-icon"></i></button>
</div>
<div class = 'header-btn unpause-btn hidden noSelect'>
<button class="btn play noSelect"><i class="fas fa-play play-icon"></i></button>
</div>
<div class = 'header-btn replay-btn noSelect'>
<button class="btn replay noSelect"><i class="fas fa-redo-alt"></i></button>
</div>
</div>
<!-- counters above game display to show: highscore and current # of apples eaten (*centered)-->
<div class = 'counters'>
<div class = 'header-display high-score-display'>
<i class="fas fa-solid fa-trophy trophy-icon"></i>
<h4 class = 'high-score-counter'>0</h4>
</div>
<div class = 'header-display apples-counter-display'>
<i class="fas fa-apple-alt"></i>
<h4 class = 'apples-counter'>0</h4>
</div>
</div>
<!-- button above game to display settings/options menu (*right-side)-->
<div class = 'header-buttons header-options-button'>
<div class = 'header-btn options-btn noSelect'>
<button class="btn options noSelect"><i class="fas fa-cog"></i></button>
</div>
</div>
</header>
<!-- main game display (contains snake game, main menu w/ config options, help (instructions/controls) pop up menu, and game-over display) -->
<div class = 'game-display'>
<!-- game: -->
<figure class = 'snake-game'>
<!-- use jquery (in view.js) to fill this with a grid layout for game-play -->
</figure>
<!-- main menu (with game configuration options): -->
<div class = 'menu centered-popup'>
<div class ='menu-buttons'>
<button class="menu-btn exit-btn"><div class = 'exit-btn-div hidden'><i class="fas fa-times-circle exit-icon"></i></div></button>
<button class="menu-btn help-btn"><i class="fas fa-info-circle help-icon"></i></button>
</div>
<div class = 'menu-title-wrapper'><h3 class = 'menu-title'>Options</h3></div>
<label for="speed">Speed</label>
<div class = 'speed-choices' id='speed'>
<div class = 'speed-choice slow-speed-choice' data-speed ='Slow'><i class="fas fa-caret-right"></i></div>
<div class = 'speed-choice normal-speed-choice chosen-speed' data-speed ='Normal'><i class="fas fa-caret-right"></i><i class="fas fa-caret-right"></i></div>
<div class = 'speed-choice fast-speed-choice' data-speed ='Fast'><i class="fas fa-caret-right"></i><i class="fas fa-caret-right"></i><i class="fas fa-caret-right"></i></div>
</div>
<label for="grid-size">Grid Size</label>
<div class="grid-sizes-choices" id = 'grid-size'>
<button class="btn small-btn grid-size-choice chosen-size" data-size = 'Small'>
<!-- <i class="fas fa-expand-arrows-alt"></i> -->
<i class="fas fa-th-large"></i>
</button>
<button class="btn large-btn grid-size-choice" data-size = 'Large'>
<!-- <i class="fas fa-compress-arrows-alt"></i> -->
<i class="fas fa-th"></i>
</button>
</div>
<label for="num-apples">Number of Apples</label>
<div class = 'num-apples-selection' id = 'num-apples'>
<i class="fas fa-apple-alt apples-selection selected-apple" id = 'apple-1' data-apple="1"></i>
<i class="fas fa-apple-alt apples-selection" id= 'apple-2' data-apple="2"></i>
<i class="fas fa-apple-alt apples-selection" id = 'apple-3' data-apple="3"></i>
<i class="fas fa-apple-alt apples-selection" id = 'apple-4' data-apple="4"></i>
<i class="fas fa-apple-alt apples-selection" id = 'apple-5' data-apple="5"></i>
</div>
<div class = 'play-game-display'>
<!-- switch type of button depending on game state -->
<button class="btn menu-play-game-btn noSelect"><i class="fas fa-play play-icon"></i></button>
<button class="btn menu-replay-btn noSelect hidden"><i class="fas fa-redo-alt"></i></button>
</div>
</div>
<!-- help display/menu (instructions on how to play + controls) -->
<div class = 'help-display centered-popup hidden'>
<div class ='help-buttons'>
<button class="help-menu-btn back-btn"><i class="fas fa-arrow-left exit-back"></i></button>
</div>
<div class = 'help-title'>
<span class="material-icons material-icons-outlined">help</span>
<h3 class = 'instructions-title'>Instructions</h3>
<span class="material-icons material-icons-outlined">help</span>
</div>
<ul class = 'instructions-list'>
<li>Move the <div class = 'snake-text'>snake</div> over <div class = 'apples-text'>apples</div> to eat them and grow larger</li>
<li>If you hit a wall or let the snake collide with any part of its body the game ends</li>
</ul>
<div class = 'help-title'>
<span class="material-icons material-icons-outlined">keyboard</span>
<h3 class = 'controls-title'>Keyboard Controls</h3>
<span class="material-icons material-icons-outlined">keyboard</span>
</div>
<div class = 'control-icons'>
<div class = 'arrow-control-icons'>
<div class = 'upper-key-arrow-icons'>
<span class="material-icons material-icons-outlined">keyboard_arrow_up</span>
</div>
<div class = 'lower-key-arrow-icons'>
<span class="material-icons material-icons-outlined">keyboard_arrow_left</span>
<span class="material-icons material-icons-outlined">keyboard_arrow_down</span>
<span class="material-icons material-icons-outlined">keyboard_arrow_right</span>
</div>
</div>
<p>Move the snake with the arrows on your keyboard</p>
<div class = 'pause-control-icon'>
<div class = 'space-icon'>
<span class="material-icons material-icons-outlined">space_bar</span>
</div>
</div>
<p>Press the space-bar to Pause/Play</p>
<div class = 'keyboard'> M </div>
<p>Press M on your keyboard show/hide settings options </p>
<div class = 'keyboard'> R </div>
<p>Press R on your keyboard to restart the game <br>
*Any settings that were changed will be applied</p>
</div>
</div>
<!-- pop up to display 'game over' -->
<div class = 'game-over centered-popup hidden'>
<h2 class = 'game-over-text'>Game Over!</h2>
</div>
</div>
</body>
</html>