-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (117 loc) · 5.72 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
<!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>Happy Anniversary My Love</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="img/head.webp">
<script src="files.js"></script>
<script src="questions.js"></script>
<script src="popup_logic.js" defer></script>
<script src="snake.js" defer></script>
</head>
<body>
<div id="start">
<a href='#' id="start-button">Launch Game</a>
<video id="end-video" style="display: none;" width="1280" height="720">
<source src="video/end_video.mp4" type="video/mp4">
</video>
</div>
<div id="game">
<div id="pop-up">
<table id="pop-up-content">
<tr id="row1">
<td colspan="4">
<p id="head-text"></p>
<img id="pop-up-image" style="margin-left: auto; margin-right: auto; height: 200px;">
</td>
</tr>
<tr id="row2">
<td colspan="4"><p id="pop-up-text"></p></td>
</tr>
<tr id="power-images">
<td id="half-speed-image"><img src="img/speed.webp" width="50px" height="auto"></td>
<td id="small-image"><img src="img/small.webp" width="50px" height="auto"></td>
<td id="bonus-image"><img src="img/points.webp" width="50px" height="auto"></td>
<td id="extra-image"><img src="img/extra.webp" width="50px" height="auto"><img src="img/golden_taco.webp" width="50px" height="auto"></td>
</tr>
<tr id="power-info">
<td id="half-speed-info"><p>Half Speed</p><br>Cuts speed in half for 15 seconds</td>
<td id="small-info"><p>-4 Length</p><br>Removes 4 tail pieces<br>(if possible)</td>
<td id="bonus-info"><p>Bonus Points</p><br>No explanation needed</td>
<td id="extra-info"><p>Golden Tacos</p><br>Left: Spawns 3 golden tacos<br>Right: +2 score & +1 tacos needed to level up</td>
</tr>
<tr id="row3">
<td id="a">
<button class="button-class">
<svg class="answer-circle-container">
<circle class="answer-circle" id="circle-a"></circle>
<text x="50%" y="50%" dy=".3em" id="a-circle-text"></text>
</svg>
</button>
</td>
<td id="b">
<button class="button-class">
<svg class="answer-circle-container">
<circle class="answer-circle" id="circle-b"></circle>
<text x="50%" y="50%" dy=".3em" id="b-circle-text"></text>
</svg>
</button>
</td>
<td id="c">
<button class="button-class">
<svg class="answer-circle-container">
<circle class="answer-circle" id="circle-c"></circle>
<text x="50%" y="50%" dy=".3em" id="c-circle-text"></text>
</svg>
</button>
</td>
<td id="d">
<button class="button-class">
<svg class="answer-circle-container">
<circle class="answer-circle" id="circle-d"></circle>
<text x="50%" y="50%" dy=".3em" id="d-circle-text"></text>
</svg>
</button>
</td>
</tr>
<tr id="row4">
<td id="a-answer"><p id="a-text"></p><p class="difficulty-info" id="power-a-info"></p></td>
<td id="b-answer"><p id="b-text"></p><p class="difficulty-info" id="power-b-info"></p></td>
<td id="c-answer"><p id="c-text"></p><p class="difficulty-info" id="power-c-info"></p></td>
<td id="d-answer"><p id="d-text"></p><p class="difficulty-info" id="power-d-info"></p></td>
</tr>
</table>
</div>
<canvas id="board" width="900" height="720"></canvas>
<canvas id="snake" width="900" height="720"></canvas>
<div id="score-area">
<div id="score-info">
<div id="score-number">0</div>
<div id="level-number">Level: <span id="number">1</span></div>
</div>
<div id="score-upgrade"><span id="upgrade-number">10</span> tacos until speed-up</div>
<div id="power-up">
<div id="power-up-image"></div>
<div id="timer"></div>
</div>
</div>
<div id="controllers">
<table id="sliders-table">
<tr>
<td>Music</td>
<td><input type="range" min="0" max="100" value="50" class="slider" id="music-slider"></td>
<td><img src="img/2-bar.webp" id="music-picture" style="height: 30px;"></td>
</tr>
<tr>
<td>Sound Effects</td>
<td><input type="range" min="0" max="100" value="50" class="slider" id="effect-slider"></td>
<td><img id="effects-picture" src="img/2-bar.webp" style="height: 30px;"></td>
</tr>
</table>
</div>
</div>
</body>
</html>