-
Notifications
You must be signed in to change notification settings - Fork 0
/
docs.html
157 lines (157 loc) · 6.11 KB
/
docs.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clicliclick guide</title>
<link rel="stylesheet" href="style.css">
<style>
th {
max-width: 250px;
max-height: 200px;
}
</style>
</head>
<body style="font-family: QuickSand">
<img src="ui/exit_red.png" style="position: fixed; top: 20px; left: 20px; width: 50px; height: 50px; cursor: pointer" onclick="self.close()" alt="Exit">
<center>
<h1 style="font-size: 250%">Guide:<br>How to play and create levels in</h1><br>
<img src="logo.png"><br>
<h3>To skip, just click one of these:<br><a href="#play">How to play</a> <a href="#create">How to create your own levels?</a></h3><br>
<b style="font-size: 1000%"> </b><br>
<h1 id="play">How to play</h1>
<h2>Basic menu buttons</h2>
<table border="1">
<tr>
<th><img src="docs_images/play.png"></th>
<th><p>Opens list of the levels.</p></th>
</tr>
<tr>
<th><img src="docs_images/open.png"></th>
<th><p>Adds a file to "PLAY" menu.</p></th>
</tr>
<tr>
<th><img src="docs_images/edit.png"></th>
<th><p>Opens the <a href="#create">editor</a>.</p></th>
</tr>
<tr>
<th><img src="docs_images/erase.png"></th>
<th><p>Resets the "PLAY" menu.</p></th>
</tr>
<tr>
<th><img src="docs_images/skins.png"></th>
<th><p>Changes your crosshair.</p></th>
</tr>
</table>
<p>When you open "PLAY" menu, you can see the list of the levels. There are some levels by default and you can add yours.</p>
<p>It looks like this:</p>
<img src="docs_images/list.png">
<p>If you <b>left-click</b> a level you will play this. If you <b>right-click</b> a level you can read its description.</p>
<p>When you play a level, different kinds of cards will appear on the screen. The faster you react, the more you gain points. Also, you gain 1 point every second.</p>
<table border="1">
<tr>
<th><div style="background-color: cyan; width: 100px; height: 100px;"></div></th>
<th><b>Left</b>-click it.</th>
</tr>
<tr>
<th><div style="background-color: orange; width: 100px; height: 100px;"></div></th>
<th><b>Right</b>-click it.</th>
</tr>
<tr>
<th><div style="background-color: yellow; width: 100px; height: 100px;"></div></th>
<th><b>Middle</b>-click it.</th>
</tr>
<tr>
<th><div style="background-color: red; width: 100px; height: 100px;"></div></th>
<th><b>Double</b>-click it.</th>
</tr>
<tr>
<th><div style="background-color: lime; width: 100px; height: 100px;"></div></th>
<th><b>Scroll</b> it.</th>
</tr>
</table>
<p>There are rankings. The better you play, the higher you get ranked.</p>
<table border="1">
<tr>
<th>Skipped none of the squares and got the max score.</th>
<th>S+</th>
</tr>
<tr>
<th>Skipped none of the squares.</th>
<th>S</th>
</tr>
<tr>
<th>Skipped 1 square.</th>
<th>A</th>
</tr>
<tr>
<th>Skipped 2 squares.</th>
<th>B</th>
</tr>
<tr>
<th>Skipped 3 squares.</th>
<th>C</th>
</tr>
<tr>
<th>Skipped 4 squares.</th>
<th>D</th>
</tr>
<tr>
<th>Skipped 5 squares.</th>
<th>E</th>
</tr>
<tr>
<th>Skipped 6 squares.</th>
<th>F</th>
</tr>
</table>
<p>A-a-a-and that's all!</p>
<h1 id="create">How to create levels?</h1>
<p>If you know programming, this will be easy for you to remember.</p>
<h2>Basics</h2>
<p>Hotkeys:</p>
<table border="1">
<tr>
<th>Ctrl + R</th>
<th>Reload text style</th>
</tr>
<tr>
<th>Ctrl + O</th>
<th>Open a file</th>
</tr>
<tr>
<th>Ctrl + S</th>
<th>Save the file</th>
</tr>
</table>
<p>Fields:</p>
<img src="docs_images/editorss.png" width="50%">
<p>Every line contains an instruction. Every instruction has arguments.</p>
<h2>Instructions "red", "orange", "yellow", "lime", "cyan"</h2>
<p>These have 5 arguments. But first you need to provide the color and the appear time (in ms). Example:</p>
<console><text style="color: red">red</text> <text style="color: lightgoldenrodyellow">1000</console>
<p>Then you need to set the position of the top left corner of the square. You can make it using two numbers from 0 to 100. Example:</p>
<console><text style="color: red">red</text> <text style="color: lightgoldenrodyellow">1000 25 35</text></console>
<p>And the last - you need to set the size with two numbers. Examples:</p>
<console><text style="color: red">red</text> <text style="color: lightgoldenrodyellow">1000 25 35 10 15</text></console>
<console><text style="color: cyan">cyan</text> <text style="color: lightgoldenrodyellow">2505 95 0 5 48</text></console>
<console><text style="color: yellow">yellow</text> <text style="color: lightgoldenrodyellow">1337 69 69 13 13</text></console>
<h2>Instruction "text"</h2>
<p>It's similar to the previous instructions, but you provide the text, set the position of the center and you don't provide size. Example:</p>
<console><i>text</i> <text style="color: lightgoldenrodyellow">1000 25 35 Text example. Cool, right?</text></console>
<h2>Instruction "shakebg"</h2>
<p>Shakes the background. You provide the appear time, strength, repeat times and interval between repeats. Example:</p>
<console><text style="color: magenta"><b>shakebg</b></text><text style="color: lightgoldenrodyellow"> 3000 30 30 30</text></console>
<h2>Instruction "blurbg"</h2>
<p>Sets the blurriness of the background. You provide the appear time and blur strength. Example:</p>
<console><text style="color: magenta"><b>blurbg</b></text><text style="color: lightgoldenrodyellow"> 3000 0</text></console>
<h2>Instruction "flashbg"</h2>
<p>Flashes the background. You provide only the appear time. Example:</p>
<console><text style="color: magenta"><b>shakebg</b></text><text style="color: lightgoldenrodyellow"> 3000</text></console>
<h2>"r"</h2>
<p>"r" can replace the color, a position number or a scale number.</p>
</center>
</body>
<script>
document.addEventListener("keydown", function(event){ if(event.which == 27) self.close(); });
</script>
</html>