-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
241 lines (232 loc) · 16.1 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='og:viewport' content='width=device-width,initial-scale=1'>
<meta name="og:description" content="Play the world's most innovative Pacman for free!">
<meta property="og:image" content="https://skparab1.github.io/pacman/about/pacman.png">
<title>PacMan</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/utility.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="icon" type="image/x-icon" href="pacman-favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Finlandica&display=swap" rel="stylesheet">
</head>
<body>
<div id="notif" style="width: 80%; height: 50px; padding: 0px; float: left; z-index: 2; background: rgb(199, 3, 3); display: none"></div>
<div>
<nav>
<ul class="nav-items" id="nav">
<li><a id='header1' href="https://skparab1.github.io">Home</a></li>
<li><a id='header2' href="https://skparab1.github.io/wordle/random">Wordle</a></li>
<li><a id='header3' href="https://skparab1.github.io/snake">Snake</a></li>
<li><a class='ee' id='header4' href="https://skparab1.github.io/pacman?funnymode">fastmode</a></li>
<li><a class='ee' style='position: absolute; left: 95%' id='header5' href="https://skparab1.github.io/pacman?tmode">ngmode</a></li>
</ul>
</nav>
</div>
<h1 id="title" style="z-index: -1">Pacman</h1>
<div id='box' class="box">
<div class="panel" id="left-panel">
<h1 id="settings">Settings</h1>
<div class="horiz-container">
<h2 id="theme">Theme:</h2>
<label class="switch">
<input type="checkbox" onclick="toggleTheme()">
<span class="slider round"></span>
</label>
</div>
<button id='rulesbtn' class="action" onclick="toggleRules()"><h3 id="rules">Settings/Rules</h3></button>
<select id='mode' class="action" onchange="changemode();">
<option value="hard">Hard</option>
<option value="normal">Normal</option>
<option value="easy">Easy</option>
<option value="very easy">Very easy</option>
<option value="OG">Original 3 life</option>
</select>
<button id='contributersbtn' class="action" onclick="toggleContributors()"><h3 id="contributers">Credits</h3></button>
<button id='leaderboardbtn' class="action"><a href="leaderboard/leaderboard.html"><h3 id="leaderboard">Leaderboard</h3></a></button>
<h1 id="audio">Audio</h1>
<div id="volume">
<input type="range" class="range" min="1" max="100" value="100" id="volume-control">
</div>
<button id='audiobtn' class="action" onclick="toggleMusic()"><h3 id="audio-toggle">Pause Music</h3></button>
<div class="horiz-container" style="width: 400px; padding-top: 0.5rem">
<h2 id='sf' style="position: absolute; left: 1.25rem">sfx</h2>
<label class="switch">
<input type="checkbox" onclick="togglesfx()">
<span class="slidersmall" style="width: 50px; position: absolute; left: 6.5rem"></span>
</label>
<h2 id='es' style="position: absolute; left: 8.5rem">Eat sound</h2>
<label class="switch">
<input type="checkbox" onclick="toggleeatsfx()">
<span class="slidersmall" style="width: 50px; position: absolute; left: 9.25rem"></span>
</label>
</div>
</div>
<div class="panel" id="right-panel">
<h1 id="info">Info</h1>
<div id="info-content">
<h2 id='name'>Name: </h2>
<h2 id="score">Score: 0</h2>
<h2 id="best">Best: </h2>
<h2 id="time">Time: 0 sec</h2>
<h2 id="display">Press any key to start</h2>
</div>
<h1 id="game-controls">Game Controls</h1>
<div id="button-controls">
<button class="move-button-ctr" id="up" onclick="up()">↑</button>
<button class="move-button-ctr" id="down" onclick="down()">↓</button>
<button class="move-button-ctr" id="left" onclick="left()">←</button>
<button class="move-button-ctr" id="right" onclick="right()">→</button>
</div>
<h1 style="text-align: center" id="oth">Other</h1>
<div style="padding-left:6%">
<div style="width:40%; float: left;">
<button id='contributersbtn1' class="action" onclick="togglefeedback()" style="height:5%; width: 100%; border-width: 2px;"><h3 id="cb1">Give Feedback</h3></button>
</div>
<div style="width:18%; float: center;">
<a href="https://github.com/skparab1/pacman/issues">
<button id='contributersbtn2' class="action" style="width:31%; border-width: 2px; height:auto; position: absolute;"><h4 id="cb2">Report bug</h4></button>
</a>
</div>
<div style="width:27%; float: right;">
<a href="https://github.com/skparab1/pacman">
<button id='contributersbtn3' class="action" style="height:40%; border-width: 2px;"><h4 id="cb3">Github</h4></button>
</a>
</div>
</div>
</div>
<div class="modal hidden" id="rules-modal">
<h1 class="modal-header">Welcome to Pacman!</h1>
<button class="exit-modal nohover" onclick="toggleRules()">×</button>
<h2>How to play:</h2>
<h3>The player is a circle with a sector cut out. The size of the cut out increases and decreases, making
it look like a mouth. A mouth needs to eat something, so there are tiny dots around the map, which
can be eaten by moving over them. Additionally, there are four large Java crackers which give the
player a super ability. More about it later. However, the game isn't as simple as eating. Or maybe it
is, because four ghost enemies are also trying to eat you. They sometimes chase you and sometimes
mingle, but touching them will cause you to lose. The Java crackers turn the tables, allowing you to
eat the ghosts instead, but only for a short period of time.</h3>
<h2>Enter your name:</h2>
<input id='name-input' class="text-input" type="text">
<button class="ok" onclick="toggleRules()">Ok</button>
</div>
<div class="modal hidden" id="contributors-modal">
<h1 class="modal-header">Contributors</h1>
<button class="exit-modal nohover" onclick="toggleContributors()">×</button>
<h2>Developers: Shubham Parab, Ritam Chakraborty, Anish Lakkapragada, Agastya Pawate, Patrick Huang</h2>
<h2>Design: Ritam Chakraborty, Manav Choudhary, Advaita Guruprasad, Shubham Parab, Anindit Pati, Abhinav Pala</h2>
<h2>Music/Sound: Advaita Guruprasad</h2>
</div>
<div class="modal hidden" id="feedback-modal" style="height: 75%; overflow-y: scroll; z-index: 8;">
<h1 class="modal-header">Feedback</h1>
<button class="exit-modal nohover" onclick="togglefeedback()">×</button>
<h2>As developers of this game, we want it to be the best it can be! Please take a few minutes to answer a few questions and help us improve it.</h2>
<h3>How would you rate the overall game graphics quality?</h3>
<div class="form-holder">
<button class="form-button" id='1,1' style="top: 32%; left: 1%" onclick="selectbtn(1,1);">Excellent</button>
<button class="form-button" id='1,2' style="top: 32%; left: 20.8%" onclick="selectbtn(1,2);">Good</button>
<button class="form-button" id='1,3' style="top: 32%; left: 40.6%" onclick="selectbtn(1,3);">Mediocre</button>
<button class="form-button" id='1,4' style="top: 32%; left: 60.4%" onclick="selectbtn(1,4);">Poor</button>
<button class="form-button" id='1,5' style="top: 32%; left: 80.2%" onclick="selectbtn(1,5);">Very poor</button>
</div>
<h3 style="position: absolute; top:47%">How would you rate the game difficulty (normal mode)?</h3>
<div class="form-holder">
<button class="form-button" id='2,1'style="top: 57%; left: 1%" onclick="selectbtn(2,1);">Too hard</button>
<button class="form-button" id='2,2'style="top: 57%; left: 20.8%" onclick="selectbtn(2,2);">Slightly hard</button>
<button class="form-button" id='2,3'style="top: 57%; left: 40.6%" onclick="selectbtn(2,3);">Perfect</button>
<button class="form-button" id='2,4'style="top: 57%; left: 60.4%" onclick="selectbtn(2,4);">Slightly easy</button>
<button class="form-button" id='2,5'style="top: 57%; left: 80.2%" onclick="selectbtn(2,5);">Too easy</button>
</div>
<h3 style="position: absolute; top:73%">How would you rate the ease of use of the game ui?</h3>
<div class="form-holder">
<button class="form-button" id='3,1'style="top: 82%; left: 1%" onclick="selectbtn(3,1);">Excellent</button>
<button class="form-button" id='3,2'style="top: 82%; left: 20.8%" onclick="selectbtn(3,2);">Good</button>
<button class="form-button" id='3,3'style="top: 82%; left: 40.6%" onclick="selectbtn(3,3);">Mediocre</button>
<button class="form-button" id='3,4'style="top: 82%; left: 60.4%" onclick="selectbtn(3,4);">Poor</button>
<button class="form-button" id='3,5'style="top: 82%; left: 80.2%" onclick="selectbtn(3,5);">Very poor</button>
</div>
<h3 style="position: absolute; top:98%">How would you rate the usability of game settings?</h3>
<div class="form-holder">
<button class="form-button" id='4,1'style="top: 107%; left: 1%" onclick="selectbtn(4,1);">Excellent</button>
<button class="form-button" id='4,2'style="top: 107%; left: 20.8%" onclick="selectbtn(4,2);">Good</button>
<button class="form-button" id='4,3'style="top: 107%; left: 40.6%" onclick="selectbtn(4,3);">Mediocre</button>
<button class="form-button" id='4,4'style="top: 107%; left: 60.4%" onclick="selectbtn(4,4);">Poor</button>
<button class="form-button" id='4,5'style="top: 107%; left: 80.2%" onclick="selectbtn(4,5);">Very poor</button>
</div>
<h3 style="position: absolute; top:123%">How would you rate the game map? (more maps coming soon btw)</h3>
<div class="form-holder">
<button class="form-button" id='5,1'style="top: 132%; left: 1%" onclick="selectbtn(5,1);">Excellent</button>
<button class="form-button" id='5,2'style="top: 132%; left: 20.8%" onclick="selectbtn(5,2);">Good</button>
<button class="form-button" id='5,3'style="top: 132%; left: 40.6%" onclick="selectbtn(5,3);">Mediocre</button>
<button class="form-button" id='5,4'style="top: 132%; left: 60.4%" onclick="selectbtn(5,4);">Boring</button>
<button class="form-button" id='5,5'style="top: 132%; left: 80.2%" onclick="selectbtn(5,5);">Terrible</button>
</div>
<h3 style="position: absolute; top:148%">How would you rate the game overall?</h3>
<div class="form-holder">
<button class="form-button" id='6,1'style="top: 157%; left: 1%" onclick="selectbtn(6,1);">5 Stars</button>
<button class="form-button" id='6,2'style="top: 157%; left: 20.8%" onclick="selectbtn(6,2);">4 Stars</button>
<button class="form-button" id='6,3'style="top: 157%; left: 40.6%" onclick="selectbtn(6,3);">3 Stars</button>
<button class="form-button" id='6,4'style="top: 157%; left: 60.4%" onclick="selectbtn(6,4);">2 Stars</button>
<button class="form-button" id='6,5'style="top: 157%; left: 80.2%" onclick="selectbtn(6,5);">1 Star</button>
</div>
<h3 style="position: absolute; top:173%">What is your age? (dont worry, we wont use this data for anything other than knowing who our audience is, so that we can improve our game. This data is not linked to your username.)</h3>
<div class="form-holder">
<button class="form-button" id='7,1'style="top: 187%; left: 1%" onclick="selectbtn(7,1);">Less than 14</button>
<button class="form-button" id='7,2'style="top: 187%; left: 20.8%" onclick="selectbtn(7,2);">14-18</button>
<button class="form-button" id='7,3'style="top: 187%; left: 40.6%" onclick="selectbtn(7,3);">18-65</button>
<button class="form-button" id='7,4'style="top: 187%; left: 60.4%" onclick="selectbtn(7,4);">Greater than 65</button>
<button class="form-button" id='7,5'style="top: 187%; left: 80.2%" onclick="selectbtn(7,5);">Prefer not to answer</button>
</div>
<h3 style="position: absolute; top:203%">How did you find out about this game?</h3>
<div class="form-holder">
<button class="form-button" id='8,1'style="top: 212%; left: 1%" onclick="selectbtn(8,1);">Discord</button>
<button class="form-button" id='8,2'style="top: 212%; left: 20.8%" onclick="selectbtn(8,2);">Github</button>
<button class="form-button" id='8,3'style="top: 212%; left: 40.6%" onclick="selectbtn(8,3);">Youtube</button>
<button class="form-button" id='8,4'style="top: 212%; left: 60.4%" onclick="selectbtn(8,4);">Itch</button>
<button class="form-button" id='8,5'style="top: 212%; left: 80.2%" onclick="selectbtn(8,5);">Other</button>
</div>
<h3 style="position: absolute; top:227%">Any other feedback?</h3>
<div class="form-holder">
<input type="text" id="fb" style="position: absolute; top: 236%; left: 12.5%; text-align: center; width: 75%;" ><br><br>
</div>
<h3 style="position: absolute; top:242%">Thank you very much for filling out this form! It will help us improve in the future.</h3>
<div class="form-holder">
<button class="form-button" id='submitter' style="top: 252%; left: 30.8%; height: 10%;" onclick="submitform();">Submit</button>
<button class="form-button" style="top: 252%; left: 50.4%; height: 10%;" onclick="togglefeedback();">Close</button>
</div>
<h3 id='timesn' style="position: absolute; top:262%; display: block"></h3>
</div>
<div class="hidden" id="overlay"></div>
<div id='canvas-container' style="float: left; position: absolute; z-index: -1">
<canvas class="myCanvas">
<p>Rip ur browser doesnt support canvas :(( u shud switch to a better browser...</p>
<canvas id="the-canvas" width="320" height="240" style="position:relative; right:300px;"></canvas>
</canvas>
</div>
</div>
<img id="gameover" src="gameover.png" style="position: absolute; left: 100px; top: -200px; width: 200px; z-index: 3">
<img id="ggwin" src="ggwin.png" style="position: absolute; left: 100px; top: -400px; z-index: 3">
<div id="gameover-cover" style="position: absolute; width: 100%; height: 0%; left: 0%; top:100px; background-color: rgba(0,0,0,0); z-index: 2;">
<h1></h1>
</div>
<h1 id="plus10" style="position: absolute; left: 100px; top: -400px; font-size: 100px; z-index: 3;">+ 10</h1>
<button class="end-button" id="playagain" style="top: -200px;" onclick="window.location.reload();">Play again</button>
<a href="https://skparab1.github.io/pacman/leaderboard/leaderboard.html" >
<button class="end-button" id="leaderboard-btn" style="top: -200px;">Leaderboard</button>
</a>
<h1 class="end-notif" id="endscore">Score</h1>
<h1 class="end-notif" id="endtime">Time</h1>
<h1 class="end-notif-glow" id="endscoreglower">Score</h1>
<h1 class="end-notif-glow" id="endtimeglower">Time</h1>
<div id="playagain-glow" style="position: absolute; top: -200px; z-index: 3; border-radius: 25px;"></div>
<div id="leaderboard-glow" style="position: absolute; top: -200px; z-index: 3; border-radius: 25px;"></div>
<button class="end-button" id="srcurl" style="top: -200px; height: 60; font-size: 40px; border-width: 2px;">get screenshot</button>
<button class="end-button" id="animurl" style="top: -200px; height: 60; font-size: 40px; border-width: 2px;">get replay (beta)</button>
<script type="module" src="sender.js">import { Octokit } from "https://cdn.skypack.dev/@octokit/core";</script>
<script src="canvas-controller.js"></script>
<script src="html-controller.js"></script>
</body>
</html>