-
Notifications
You must be signed in to change notification settings - Fork 0
/
endless.html
144 lines (140 loc) · 4.81 KB
/
endless.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>Endless 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="./highscore.js"></script>
<script defer="true" src="./instructions.js"></script>
<script defer="true" src="./endless.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">ENDLESS MODE</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="./blitz.html">Blitz 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">Endless Mode</div>
<div class="instruction-paragraphs">
<p>Letters drop from the top as you clear words on the board!</p>
<p>
Use the <span class="word-icon">Shuffle</span> to re-arrange letters
on the board!
</p>
<p>
More points for longer words and words cleared with multiple paths
</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="./blitz.html">Blitz 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>