forked from leognon/tritris
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (161 loc) · 7.01 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
<!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.sound.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="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 the <b>"How to Play"</b> button for controls and
strategies. <br />
<br />
<a href="https://youtu.be/HMkfj1OJ08Q" style="color: black">
<b>Watch the video!</b>
<img width="30" src="assets/youtubeLogo.png" />
</a>
<br />
<br />
<label>Sound</label>
<input type="checkbox" id="sound" checked />
</p>
</div>
<div id="records" class="box">
<h1>High Score</h1>
<h3 id="pointsHigh">Points: 0</h3>
<h3 id="linesHigh">Lines: 0</h3>
</div>
<div id="settings" class="box" style="position: absolute">
<h1>Tritris</h1>
<label>Level: </label>
<input id="level" type="number" value="0" min="0" max="29" />
<br />
<button id="newGame">New Game</button>
<button id="openTutorial">How to Play</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 enter to pause/unpause. Press
escape to quick reset.
</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;"
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>
</body>
</html>