-
Notifications
You must be signed in to change notification settings - Fork 0
/
blitz.html
144 lines (140 loc) · 4.83 KB
/
blitz.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
<html>
<head>
<title>Blitz Drop</title>
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<meta
property="og:image"
content="https://user-images.githubusercontent.com/1131494/156868819-573c8853-ad4b-4c30-8594-cb80e9eb1a91.jpg"
/>
<link rel="stylesheet" href="./main.css" />
<script defer="true" src="./dictionary.js"></script>
<script defer="true" src="./keyboard.js"></script>
<script defer="true" src="./logger.js"></script>
<script defer="true" src="./timer.js"></script>
<script defer="true" src="./highscore.js"></script>
<script defer="true" src="./instructions.js"></script>
<script defer="true" src="./blitz.js"></script>
<!-- favicon stuff below here -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="./favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./favicons/favicon-16x16.png"
/>
<link rel="manifest" href="./favicons/site.webmanifest" />
<link
rel="mask-icon"
href="./favicons/safari-pinned-tab.svg"
color="#5bbad5"
/>
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#222222" />
<!-- end of favicon stuff -->
</head>
<body>
<div id="score-wrapper">
<div id="title">
<span class="squircle-tiny">D</span>
<span class="squircle-tiny">R</span>
<span class="squircle-tiny">O</span>
<span class="squircle-tiny">P</span>
<span class="squircle-tiny">W</span>
<span class="squircle-tiny">O</span>
<span class="squircle-tiny">R</span>
<span class="squircle-tiny">D</span>
</div>
<div id="mode">BLITZ MODE</div>
<div id="timer"></div>
<div id="score">0</div>
<div id="score-add">+0</div>
</div>
<div id="letter-grid"></div>
<div id="word-input-wrapper"></div>
<div id="keyboard"></div>
<div id="links">
<a id="mode-link" href="./index.html">Daily Puzzle</a>
<a id="mode-link" href="./endless.html">Endless Mode</a>
</div>
<footer>
Drop Word made by Ethan Jurman,
<a href="https://github.com/ethanjurman/drop-word">github</a>
</footer>
<div id="instructions">
<div class="instructions-title">
<span class="squircle-icon">D</span>
<span class="squircle-icon">R</span>
<span class="squircle-icon">O</span>
<span class="squircle-icon">P</span>
<span class="spacer-icon"></span>
<span class="squircle-icon">W</span>
<span class="squircle-icon">O</span>
<span class="squircle-icon">R</span>
<span class="squircle-icon">D</span>
</div>
<div class="subtitle">Blitz Mode</div>
<div class="instruction-paragraphs">
<p>Get the highest score in 90 seconds!</p>
<p>
Use the <span class="word-icon">Shuffle</span> to re-arrange letters
on the board!
</p>
<p>The timer starts after the first word is entered.</p>
</div>
<div style="font-weight: normal">
Click <span class="mock-instruction-button"></span> in game to view this
screen again!
</div>
<div style="font-weight: normal">
Click <span class="mock-logger-button"></span> in game to open up the
score breakdown!
</div>
<div>
Click <span class="mock-close-button"></span> at the top to close these
instructions and get started!
</div>
<div class="instruction-paragraphs">
<div>
Try the <a class="word-icon" href="./index.html">Daily Puzzle</a> and
<a class="word-icon" href="./endless.html">Endless Mode</a> too!
</div>
</div>
<div class="instruction-paragraphs">
<div>How to play</div>
</div>
<div class="how-to-play-gifs">
<div class="how-to-play-gif-item">
Make words in multiple places, either by typing or clicking letters on
the board!
<img src="gifs/drop-word-gif-1.gif" width="100%" />
</div>
<div class="how-to-play-gif-item">
Longer words means more points!
<img src="gifs/drop-word-gif-2.gif" width="100%" />
</div>
<div class="how-to-play-gif-item">
The same word used in different paths can give a lot of points! Use it
to your advantage!
<img src="gifs/drop-word-gif-3.gif" width="100%" />
</div>
<div class="how-to-play-gif-item">
Make sure to use the shuffle to re-arrange the board letters!
<img src="gifs/drop-word-gif-4.gif" width="100%" />
</div>
</div>
</div>
</body>
</html>