-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathindex.html
261 lines (246 loc) · 12 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
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<meta charset="utf-8" />
<title>Tritris</title>
</head>
<body>
<script src="utility.js"></script>
<script src="sketch.js"></script>
<script src="grid.js"></script>
<script src="piece.js"></script>
<script src="game.js"></script>
<div id="title" class="box">
<h1>Tritris</h1>
<p style="font-size: 12pt">
Welcome to Tritris!
<br />
Use the pieces to fill as many lines as possible before the game
gets too fast and you top out!
<br />
<br />
Click <button id="openTutorial" class="darkButton">How to Play</button> for strategies.
<br />
Click <button id="openSettings" class="darkButton">Settings</button> to change controls.
<br />
Click <button id="saveGame" onclick="saveGame()" class="darkButton">Save Game</button> to save this game.
Replay it <a href="https://goel25.github.io/tritris/replay" style="color: black"><b>here</b></a>!
<br />
<br />
<a href="https://discord.gg/NUKWP6UCHF" style="color: black">
<b>Join the Discord!</b>
<img height="30" src="assets/discordLogo.png" />
</a>
<br />
<a href="https://youtu.be/HMkfj1OJ08Q" style="color: black">
<b>Watch the video!</b>
<img height="25" src="assets/youtubeLogo.png" />
</a>
<br />
<a href="https://github.com/Goel25/tritris" style="color: black">
<b>Contribute!</b>
<img height="25" src="assets/githubLogo.png" />
</a>
<br />
<a id="openChangelog" style="color: black; text-decoration: underline; cursor: pointer">
<b>View Changelog</b>
</a>
<br />
<br />
<label for="volume">Volume</label>
<input type="range" id="volume" min="0" max="100" value="75" step="1" />
<br />
<label for="musicVolume">Music Volume</label>
<input type="range" id="musicVolume" min="0" max="100" value="75" step="1" />
<br />
Songs:
<a href="https://www.reddit.com/r/GarageBand/comments/onzbjd/i_based_this_34_version_of_the_tetris_theme_on_a/" style="color:black"><b>Magicomerv</b></a>,
<a href="https://www.youtube.com/channel/UCSZXFhRIx6b0dFX3xS8L1yQ" style="color:black"><b>"EDM Detection Mode" Kevin MacLeod</b></a>,
<b>Baconknight_Productions</b>
</p>
</div>
<div id="records" class="box">
<h1>High Scores</h1>
<h3 id="pointsHigh">Points: 0</h3>
<h3 id="linesHigh">Lines: 0</h3>
</div>
<div id="play" class="box" style="position: absolute">
<h1>Tritris</h1>
<label for="level">Level: </label>
<input id="level" type="number" value="0" min="0" max="29" />
<br />
<button id="newGame">New Game</button>
<button id="practiceGame">Practice Game</button>
</div>
<div id="tutorial" class="box" style="visibility: hidden">
<h1>How to Play</h1>
<hr />
<h3>Controls</h3>
<p>
Use the arrow keys to move left and right. Press down to soft
drop. Use Z and X to rotate. Press Z and X simultaneously to rotate 180 degrees.
Press enter to pause/unpause. Press escape to quick reset.
You can edit the controls in the settings.
</p>
<hr />
<h3>Pieces</h3>
<p>
There are 7 pieces total. There are 6 pieces made out of every
possible configuration of 3 triangles, and 1 piece made out of a
single triangle, which will always spawn in groups of 3.
<img
style="display: block; margin-left: auto; margin-right: auto; width: 700px"
src="assets/allPieces.png"
/>
</p>
<hr />
<h3>Mechanics</h3>
<p>
The mechanics are very similar to NES Tetris. It uses the same
DAS, entry delay, and level speed timings.<br />
All of the pieces are made out of 3 connected right triangles.
There is also a white, single triangle piece which can be used
to fix holes in your stack. It will always come out 3 at a time.
The single triangle is also special, lines will only be cleared
once they have all been placed. This allows you to fill 3 lines
to score a Tritris!
</p>
<hr />
<h3>Phasing</h3>
<p>
<b>IMPORTANT - Since the release of the Youtube video, phasing
has become easier. There are no longer any frame-perfect
tricks. Instead, all phases can be performed by holding each
key (rotate can now be held to become "charged").</b>
<br>
One of the most unique mechanics of Tritris is phasing. A piece
will always move to the next location as long as the next
location is valid (no intersecting triangles). By moving a piece
in multiple ways at the same time, pieces are able to do many
types of tucks and spins. Below are a few examples.
</p>
<div class="grid">
<div class="gifContainer">
<img class="gif" src="assets/down.gif" />
<p>
The pieces are able to easily move down into an empty
space.
</p>
</div>
<div class="gifContainer">
<img class="gif" src="assets/downRotate.gif" />
<p>
For the bottom right triangle, X (rotate) is held once
above the desired position.
<b>Due to the phasing update, down does not need to be pressed.</b>
Once all 3 triangles are placed, the line clears.
</p>
</div>
<div class="gifContainer">
<img class="gif" src="assets/downMove.gif" />
<p>
Left or right are held when the piece is above the
desired position, and when the piece moves down, it also
moves horizontally.
</p>
</div>
<div class="gifContainer">
<img class="gif" src="assets/multiple.gif" />
<p>Here are a few examples of some phases!</p>
</div>
</div>
<br />
<hr />
<h3>Scoring</h3>
<div style="overflow: hidden">
<div style="float: right; padding-right: 10px; padding-left: 10px;" class="gifContainer">
<img class="gif" src="assets/tritris.gif" />
<p>A Tritris is scored!</p>
</div>
<p>
In Tritris, clearing 4 lines at a time is not possible, so
the highest score value is obtained from 3 lines at a time,
a Tritris. This can only be achieved by settings up 3 rows,
each missing only one triangle, then placing a single
triangle in each row. Once all triangles are placed, the
rows clear and a Tritris is scored!
<br />
A triple is equivalent to a Tetris in NES Tetris, a double
is equivalent to a triple, and a single is equivalent to a
double.
</p>
</div>
<hr />
<br />
<button id="closeTutorial">Close</button>
</div>
<div id="changelog" class="box" style="visibility: hidden">
<h1>Changelog</h1>
<b>View all changes on <a href="https://github.com/Goel25/tritris/commits/main" style="color: black">
Github
</a> </b>
<br />
<div style="text-align: left; padding-left: 15px">
<p><b>12/15/21: </b>Added background music</p>
<p><b>4/5/21: </b>Added replay mode</p>
<p><b>2/20/21: </b>Added new graphics! (Thanks to Miz for creating them)</p>
<p><b>2/5/21: </b>Changed next box to show how many Ninjas are next</p>
<p><b>1/23/21: </b>Added Z and X to rotate 180</p>
<p><b>1/22/21: </b>Added practice mode</p>
<p><b>1/8/21: </b>Added 7-bag RNG</p>
<p><b>1/3/21: </b>Added rotation charge. Z and X can now be held during phases, eliminating the need for frame-perfect key presses</p>
<p><b>1/3/21: </b>Made yellow and blue pieces rotate around a center</p>
<p><b>1/2/21: </b>Set new soft drop speed</p>
<p><b>1/2/21: </b>Made yellow and red pieces spawn in a different orientation</p>
</div>
<br>
<button id="closeChangelog">Close</button>
</div>
<div id="settings" class="box" style="visibility: hidden">
<h1>Settings</h1>
<hr />
<h3>Controls</h3>
<b>Click the button for each control, then press the key you would like to use</b>
<div style="text-align: left; padding-left: 15px; line-height: 8px;">
<p>Rotate Counter-Clockwise: <button id="counterClock" class="control">Z</button></p>
<p>Rotate Clockwise: <button id="clock" class="control">X</button></p>
<p>Left: <button id="left" class="control">LEFT</button></p>
<p>Right: <button id="right" class="control">RIGHT</button></p>
<p>Down: <button id="down" class="control">DOWN</button></p>
<br>
<p>Start/Pause/Unpause: <button id="start" class="control">ENTER</button></p>
<p>Quick Restart: <button id="restart" class="control">ESCAPE</button></p>
</div>
<button id="defaultControls">Revert to Default Controls</button>
<hr />
<h3>Visual Settings</h3>
<label for="oldGraphics">Use old graphics</label>
<input type="checkbox" id="oldGraphics" />
<br>
<label for="showGridLines">Show Grid Lines</label>
<input type="checkbox" id="showGridLines" />
<br>
<label for="showKeys">Show Key Presses</label>
<input type="checkbox" id="showKeys" />
<br>
<label for="showStats">Show statistics</label>
<input type="checkbox" id="showStats" />
<br>
<label for="showFlash">Show Flash</label>
<input type="checkbox" id="showFlash" />
<br>
<label for="use4Piece">Quadtris (Pieces with 4 triangles)</label>
<input type="checkbox" id="use4Piece" />
<br>
<label for="pauseOnBlur">Pause game when focus is lost</label>
<input type="checkbox" id="pauseOnBlur" />
<hr />
<br>
<button id="closeSettings">Close</button>
</div>
</body>
</html>