forked from DemoninCG/dergoris99k
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
287 lines (279 loc) · 19.5 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
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="Dergoris 99k" property="og:title" />
<meta content="The ultimate legally distinct block stacking game" property="og:description" />
<meta content="https://demonin.com/games/dergoris99k/" property="og:url" />
<meta content="https://demonin.com/games/dergoris99k/img/icon2.png" property="og:image" />
<meta content="#005a00" data-react-helmet="true" name="theme-color" />
<meta name="color-scheme" content="light only">
<title>Dergoris 99k</title>
<link rel="stylesheet" href="style.css?v104=1">
<link rel="icon" href="img/icon2.png">
<!--Preload board-->
<img src="img/modeInfo.png" style="display: none">
<img src="img/menuBar.png" style="display: none">
<img src="img/menuBar2.png" style="display: none">
<img src="img/overallGrades.png" style="display: none">
<img src="img/main/background1.png" style="display: none">
<img src="img/main/board.png" style="display: none">
<img src="img/main/board2.png" style="display: none">
<img src="img/main/board3.png" style="display: none">
<img src="img/main/boardBack.png" style="display: none">
<img src="img/main/tiles.png" style="display: none">
<img src="img/main/ghostTiles.png" style="display: none">
<img src="img/main/sideInfo.png" style="display: none">
<img src="img/main/digits.png" style="display: none">
<img src="img/main/digitsSmall.png" style="display: none">
<img src="img/main/gradesClassic.png" style="display: none">
<img src="img/main/gradesMaster.png" style="display: none">
<img src="img/main/gradesDragon.png" style="display: none">
<img src="img/main/readyGo.png" style="display: none">
<img src="img/main/explosionEffect.png" style="display: none">
<img src="img/main/finish.png" style="display: none">
<img src="img/gb/boardSmall.png" style="display: none">
<img src="img/gb/tiles.png" style="display: none">
<img src="img/gb/hardDropTile.png" style="display: none">
<img src="img/gb/sideInfo.png" style="display: none">
<img src="img/nes/boardSmall.png" style="display: none">
<img src="img/nes/tiles.png" style="display: none">
<img src="img/nes/hardDropTile.png" style="display: none">
<img src="img/nes/sideInfo.png" style="display: none">
<img src="img/nes/linesBoxSmall.png" style="display: none">
<img src="img/nes/statistics.png" style="display: none">
<img src="img/nes/statPieces.png" style="display: none">
<img src="img/dx/boardSmall.png" style="display: none">
<img src="img/dx/tiles.png" style="display: none">
<img src="img/dx/hardDropTile.png" style="display: none">
<img src="img/dx/sideInfo.png" style="display: none">
<img src="img/sega/backgrounds.png" style="display: none">
<img src="img/sega/board.png" style="display: none">
<img src="img/sega/tiles.png" style="display: none">
<img src="img/sega/hardDropTile.png" style="display: none">
<img src="img/sega/sideInfo.png" style="display: none">
<img src="img/sega/tileVanish.png" style="display: none">
<img src="img/sega/digits.png" style="display: none">
<img src="img/tgm/backgrounds.png" style="display: none">
<img src="img/tgm/backgroundsDark.png" style="display: none">
<img src="img/tgm/board.png" style="display: none">
<img src="img/tgm/tiles.png" style="display: none">
<img src="img/tgm/ghostTiles.png" style="display: none">
<img src="img/tgm/sideInfo.png" style="display: none">
<img src="img/tgm/levelBars.png" style="display: none">
<img src="img/tgm/digits.png" style="display: none">
<img src="img/tgm/readyGo.png" style="display: none">
<img src="img/tgm/timeDigits.png" style="display: none">
<img src="img/tgm/grades.png" style="display: none">
</head>
<body>
<canvas id="backgroundCanvas"></canvas>
<canvas id="gameCanvas" style="display: none"></canvas>
<div class="container" style="padding: 40px;">
<img src="img/title.png" style="height: 66px;"><br><p style="margin-top: 4px; color: #ddd; font-size: 16px; margin-bottom: 40px">V1.0.4</p>
<button class="menuButton" onmouseover="playSound('buttonHover');" onclick="playSound('buttonClick'); switchToTab(2); displayModeInfo(currentMenuMode)">CAMPAIGN</button><br>
<button class="menuButton" onmouseover="playSound('buttonHover');" onclick="playSound('buttonClick'); switchToTab(3)">CUSTOM GAME</button><br>
<button class="menuButton" onmouseover="playSound('buttonHover');" onclick="playSound('buttonClick'); showKeybinds()">KEYBINDS</button><br>
<button class="menuButton" onmouseover="playSound('buttonHover');" onclick="playSound('buttonClick'); showSettings()">SETTINGS</button><br>
<button class="menuButton" onmouseover="playSound('buttonHover');" onclick="playSound('buttonClick'); switchToTab(4)">CREDITS</button><br>
</div>
<div class="container" style="left: 100vw; padding: 40px;">
<button class="menuButton" onmouseover="playSound('buttonHover');" onclick="playSound('buttonClick'); switchToTab(1)">BACK</button>
<canvas id="overallGradeCanvas" width="140px" height="40px"></canvas>
<div id="modeSelectContainer">
<img class="menuMode" src="img/style1.png" onclick="playSound('buttonClick'); selectMenuMode(1)">
<img class="menuMode" src="img/style2.png" onclick="playSound('buttonClick'); selectMenuMode(2)">
<img class="menuMode" src="img/style3.png" onclick="playSound('buttonClick'); selectMenuMode(3)">
<!--<img class="menuMode" src="img/style4.png" onclick="selectMenuMode(4)">-->
<img class="menuArrow" src="img/menuArrowUp.png" onclick="playSound('buttonClick'); selectMenuMode(Math.max(1,currentMenuMode-1))">
<img class="menuArrow" src="img/menuArrowDown.png" onclick="playSound('buttonClick'); selectMenuMode(Math.min(3,currentMenuMode+1))">
</div>
<div id="modeStatsContainer">
<canvas id="modeStatsCanvas" width="130px" height="160px"></canvas><br>
</div>
<div id="modeInfoContainer">
<img id="modeInfoImage" src="img/style1.png" style="width: 400px; max-width: 100%; margin-left: auto; margin-right: auto; display: block;">
<hr style="height: 4px; background-color: #eaeaff">
<p id="modeInfo"></p>
<img src="img/play.png" id="playButton" onclick="showBlackCover(); playSound('buttonClick'); fadeOutSound('menuMusic', 500); setTimeout(startGame, 1000)">
</div>
</div>
<div class="container" style="left: 100vw">
<div id="settings" style="overflow: auto; max-height: 98vh;">
<button class="menuButton" onmouseover="playSound('buttonHover');" onclick="playSound('buttonClick'); switchToTab(1)">BACK</button><br><br>
<button onclick="showBlackCover(); playSound('buttonClick'); fadeOutSound('menuMusic', 500); setTimeout(startGame, 1000)">START GAME</button><br><br>
<label for="presetsSetting" style="color: #bdf">PRESETS - </label>
<select id="presetsSetting" onchange="setPreset()">
<option value="classicStyle" selected>Classic Style</option>
<option value="masterStyle">Master Style</option>
<option value="dragonStyle">Dragon Style</option>
<option value="gb">Game Boy</option>
<option value="nes">NES</option>
<option value="dx">Tetris DX</option>
<option value="sega">Sega (arcade)</option>
<option value="tgm">The Grand Master</option>
</select><br><br>
<label for="startingLevelSetting">STARTING LEVEL - </label>
<input type="number" id="startingLevelSetting" value="0" min="0" max="999" onchange="setStartingLevel()"><br><br>
<label for="boardWidthSetting" style="display: none">BOARD WIDTH - </label>
<input type="number" id="boardWidthSetting" value="10" min="4" max="20" step="2" onchange="setBoardWidth()" style="display: none">
<label for="boardHeightsetting" style="display: none">BOARD HEIGHT - </label>
<input type="number" id="boardHeightSetting" value="20" min="4" max="25" onchange="setBoardHeight()" style="display: none">
<label for="visualsSetting">VISUALS - </label>
<select id="visualsSetting" onchange="setVisuals()">
<option value="classicStyle" selected>Classic Style</option>
<option value="masterStyle">Master Style</option>
<option value="dragonStyle">Dragon Style</option>
<option value="gb">Game Boy</option>
<option value="nes">NES</option>
<option value="dx">Tetris DX</option>
<option value="sega">Sega (arcade)</option>
<option value="tgm">The Grand Master</option>
</select><br>
<label for="gameMechanicsSetting">GAME MECHANICS - </label>
<select id="gameMechanicsSetting" onchange="setGameMechanics()">
<option value="classicStyle" selected>Classic Style</option>
<option value="masterStyle">Master Style</option>
<option value="dragonStyle">Dragon Style</option>
<option value="gb">Game Boy</option>
<option value="nes">NES</option>
<option value="dx">Tetris DX</option>
<option value="sega">Sega (arcade)</option>
<option value="tgm">The Grand Master</option>
</select><br>
<p>MAIN GAME MECHANICS. INCLDUES DROP SPEED, ARE AND SCORING SYSTEM.</p><br>
<label for="segaDifficultySetting">SEGA DIFFICULTY - </label>
<select id="segaDifficultySetting" onchange="setSegaDifficulty()" disabled>
<option value="easy">Easy</option>
<option value="normal" selected>Normal</option>
<option value="hard">Hard</option>
<option value="hardest">Hardest</option>
</select><br>
<label for="randomizerSetting">RANDOMIZER - </label>
<select id="randomizerSetting" onchange="setRandomizer()">
<option value="random">Random</option>
<option value="gb">Game Boy</option>
<option value="nes">NES</option>
<option value="dx">Tetris DX</option>
<option value="dxintended">Tetris DX bugfixed</option>
<option value="tgm" selected>The Grand Master</option>
</select><br>
<p>HOW PIECES ARE CHOSEN.</p><br>
<label for="pieceColouringSetting">PIECE COLOURING - </label>
<select id="pieceColouringSetting" onchange="setPieceColouring()">
<option value="regular" selected>Regular</option>
<option value="monotoneFixed">Monotone (fixed)</option>
<option value="monotoneAll">Monotone (all)</option>
<option value="border">Border only</option>
</select><br>
<p>HOW PIECES ARE COLOURED.<br>REGULAR = COLOURS BASED ON PIECE.<br>MONOTONE (FIXED) = FIXED BLOCKS ARE MONOTONE.<br>MONOTONE (ALL) = ALL BLOCKS ARE MONOTONE</p>
<label for="invisibleSetting">INVISIBLE BOARD</label>
<input type="checkbox" id="invisibleSetting" onchange="setInvisible()" /><br><br>
<label for="softDropSetting">SOFT DROP</label>
<input type="checkbox" id="softDropSetting" onchange="setSoftDrop()" checked /><br>
<label for="softDropSpeedSetting">SOFT DROP SPEED - </label>
<input type="number" id="softDropSpeedSetting" value="2" min="1" max="20" onchange="setSoftDropSpeed()"><br>
<label for="hardDropSetting">HARD DROP</label>
<input type="checkbox" id="hardDropSetting" onchange="setHardDrop()" checked /><br>
<label for="sonicDropSetting">SONIC DROP</label>
<input type="checkbox" id="sonicDropSetting" onchange="setSonicDrop()" /><br>
<p>OVERRIDES HARD DROP</p><br>
<label for="rotationSystemSetting">ROTATION SYSTEM - </label>
<select id="rotationSystemSetting" onchange="setRotationSystem()">
<option value="nintendo-l">Nintendo Rotation (Left-handed)</option>
<option value="nintendo-r">Nintendo Rotation (Right-handed)</option>
<option value="dx">DX Rotation</option>
<option value="sega">Sega Rotation</option>
<option value="ars" selected>Arika Rotation</option>
</select><br>
<label for="IRSSetting">IRS</label>
<input type="checkbox" id="IRSSetting" onchange="setIRS()" checked /><br><br>
<label for="twentyGSetting">20G MODE</label>
<input type="checkbox" id="twentyGSetting" onchange="setTwentyGOverride()" /><br><br>
<label for="levelLockSetting">LEVEL LOCK</label>
<input type="checkbox" id="levelLockSetting" onchange="setLevelLock()" /><br>
<p>PREVENTS THE LEVEL FROM INCREASING FOR TGM-LIKE GAMES. GOOD FOR PRACTICE.</p><br>
<label for="overrideGameARESetting">OVERRIDE GAME-SPECIFIC ARE</label>
<input type="checkbox" id="overrideGameARESetting" onchange="setOverrideGameARE()" /><br>
<label for="ARESetting">ARE - NORMAL - </label>
<input type="number" id="ARESetting" value="0" min="0" max="200" onchange="setARE()"><br>
<label for="ARELineClearSetting">ARE - LINE CLEAR - </label>
<input type="number" id="ARELineClearSetting" value="0" min="0" max="200" onchange="setARELineClear()"><br><br>
<label for="DASInitialSetting">DAS - INITIAL - </label>
<input type="number" id="DASInitialSetting" value="16" min="1" max="60" onchange="setDASInitial()"><br>
<label for="DASSetting">DAS - REPEAT - </label>
<input type="number" id="DASSetting" value="6" min="1" max="60" onchange="setDAS()"><br>
<label for="lockDelaySetting">LOCK DELAY - </label>
<input type="number" id="lockDelaySetting" value="0" min="0" max="9999" onchange="setLockDelay()"><br>
<p>SET TO 0 TO DISABLE.</p><br>
<label for="lockResetSetting">LOCK DELAY RESET - </label>
<select id="lockResetSetting" onchange="setLockReset()">
<option value="move">Move</option>
<option value="step" selected>Step</option>
</select><br>
<p>MOVE = RESET LOCK DELAY WHEN PIECE MOVES.<br>STEP = RESET LOCK DELAY WHEN PIECE MOVES DOWN.</p>
</div>
</div>
<div class="container" style="top: 100vh; padding: 40px; box-sizing: border-box; overflow-y: auto;">
<button class="menuButton" onmouseover="playSound('buttonHover');" onclick="playSound('buttonClick'); switchToTab(1)">BACK</button><br><br>
<img src="img/azzy.png" style="position: absolute; bottom: 25px; right: 25px; height: 500px; image-rendering: auto;">
<p style="font-size: 48px; font-weight: bold; font-family: 'Courier New', monospace">Credits</p><br>
<p style="font-size: 24px; font-family: 'Courier New', monospace; width: 800px;">Created by Demonin<br>Additional coding by NOT_A_ROBOT and Zaphod77
<br>---------<br><b>Menu music:</b> Rooftop level 3 - From the <i>Jackie Chan Stuntmaster</i> soundtrack
<br><b>Classic style music:</b> Wireframe - Aural Imbalance, Tensor - Jamie Myerson
<br><b>Master style music:</b> Night Stream - From the <i>Ridge Racer (PSP)</i> soundtrack, Pearl Blue Soul - From the <i>Ridge Racer Type 4</i> soundtrack
<br><b>Dragon style music:</b> Vanishing Horizon - From the <i>Ridge Racer (PSP)</i> soundtrack, Tek Trek - From the <i>Ridge Racer (PSP)</i> soundtrack
<br>---------<br>Some main sprites taken/modified from the <i>Tetris: The Grand Master</i> series by Arika<br>Retro game sprites belong to Nintendo, Sega, and Arika<br>Background shaders created by Xor and greenbird10 on Shadertoy
<br>---------<br>Thank you to all the patrons, testers, and those in the TAP discord server who helped make this game what it is!</p>
</div>
<div id="keybindsContainer">
<p class="keybindsText"><b>Keybinds</b></p><br><br>
<p class="keybindsText">Move left - <span class="keybind">ArrowLeft</span></p>
<button class="keybindButton" onclick="changeKeybind(1)">CHANGE</button><br>
<p class="keybindsText">Move right - <span class="keybind">ArrowRight</span></p>
<button class="keybindButton" onclick="changeKeybind(2)">CHANGE</button><br>
<p class="keybindsText">Hard drop - <span class="keybind">ArrowUp</span></p>
<button class="keybindButton" onclick="changeKeybind(3)">CHANGE</button><br>
<p class="keybindsText">Soft drop - <span class="keybind">ArrowDown</span></p>
<button class="keybindButton" onclick="changeKeybind(4)">CHANGE</button><br>
<p class="keybindsText">Rotate clockwise - <span class="keybind">s</span></p>
<button class="keybindButton" onclick="changeKeybind(5)">CHANGE</button><br>
<p class="keybindsText">Rotate clockwise Alt - <span class="keybind">x</span></p>
<button class="keybindButton" onclick="changeKeybind(6)">CHANGE</button><br>
<p class="keybindsText">Rotate anticlockwise - <span class="keybind">a</span></p>
<button class="keybindButton" onclick="changeKeybind(7)">CHANGE</button><br>
<p class="keybindsText">Rotate anticlockwise Alt - <span class="keybind">z</span></p>
<button class="keybindButton" onclick="changeKeybind(8)">CHANGE</button><br>
<button onclick="hideKeybinds()">CLOSE</button>
</div>
<div id="settingsContainer">
<label for="volumeSetting">OVERALL VOLUME</label>
<input type="range" id="volumeSetting" min="0" max="100" value="50" onchange="setVolume()"><br><br>
<label for="musicVolumeSetting">MUSIC VOLUME</label>
<input type="range" id="musicVolumeSetting" min="0" max="100" value="100" onchange="setMusicVolume()"><br><br>
<label for="boardBumpSetting">BOARD BUMP VISUALS</label>
<input type="checkbox" id="boardBumpSetting" onchange="setBoardBump()" checked/><br><br>
<button onclick="exportGame()">EXPORT GAME</button><br>
<button onclick="importGame()">IMPORT GAME</button><br>
<button onclick="hardReset()" style="background-color: #fcc">RESET DATA</button><br><br>
<button onclick="hideSettings()">CLOSE</button>
</div>
<canvas id="game" width="320" height="240"></canvas>
<div id="textOverlay"></div>
<canvas id="effectOverlay" width="320" height="240"></canvas>
<div id="blackCoverLeft" style="left: 0"></div>
<div id="blackCoverRight" style="right: 0"></div>
<button class="startingButton" style="top: calc(50% - 40px)" onclick="hideBlackCover(); playSound('menuMusic')">PLAY WITH SOUND</button>
<button class="startingButton" style="top: calc(50% + 40px)" onclick="soundEnabled=false; hideBlackCover()">PLAY WITHOUT SOUND</button>
<script src="howler.js"></script>
<script src="constants.js?v104=1"></script>
<script src="background.js?v104=1"></script>
<script src="menuBackground.js?v104=1"></script>
<script src="script.js?v104=1"></script>
<script src="sound.js?v104=1"></script>
<script src="settings.js?v104=1"></script>
<script src="menu.js?v104=1"></script>
<script defer>document.getElementsByClassName("startingButton")[0].style.display = "block"; document.getElementsByClassName("startingButton")[1].style.display = "block";</script>
</body>
</html>