-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlevel63.html
More file actions
308 lines (279 loc) · 15.8 KB
/
level63.html
File metadata and controls
308 lines (279 loc) · 15.8 KB
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
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!DOCTYPE html>
<html>
<head>
<title>How to Play Sardines</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="images/icon.png"/>
</head>
<style>
body{
background-color: rgb(47, 79, 79);
font-family: Andale Mono, monospace;
color: rgb(212, 175, 55);
padding: 10px;
cursor: url("hook.png") pointer;
}
.header
{
font-size: 20px;
}
.instructions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.grid-item
{
font-family: Andale Mono, monospace;
background-color: rgb(212, 175, 55);
color: rgb(47, 79, 79);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 10px;
border: 1px solid #000000;
border-radius: 15px; /* Adjust the radius as needed */
overflow: hidden; /* Ensure content doesn't overflow rounded corners */
position: relative;
}
.instruction-text{
line-height: 1.5;
font-size: medium;
}
.grid-image{
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s ease;
/* opacity: 0; */
width: 100%;
height: 100%;
z-index: 1;
}
.grid-text{
transition: opacity 0.3s ease;
}
.grid-item:hover .grid-image{
opacity: 0;
}
.grid-item:hover .grid-text{
opacity: 1;
}
@media all and (max-width: 950px){
/* shrink to two */
.instructions{
display: grid;
flex-wrap: nowrap;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
}
.header{
display: flex;
flex-direction: column;
flex-wrap: wrap;
font-size: 30;
}
}
@media all and (min-width: 1200px){
.instructions{
display: grid;
flex-wrap: nowrap;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.header{
display: flex;
flex-direction: column;
flex-wrap: wrap;
font-size: 20;
}
}
</style>
<body>
<div class="header">
<h1>How to Play Sardines</h1>
<marquee direction="right" style="position: fixed; opacity: 0.5; font-size: 50px; color: #d7d7d7;"> ><> ><> </marquee>
<b>Co-authored by wikiHow Staff</b>
<br>
<i>Last Updated: May 10, 2023 Approved</i>
<br>
<br>
<p>This game is "Hide and Seek" backward. Only one player hides while all the other players go hunting individually. Then, when a hunter finds the hiding player, instead of announcing it, that player gets into the hiding place with them. Though it can be played with 3-5 people, it's best played with groups of 10-20. This way, as the players settle into the original hiding place, they become packed, just like sardines.</p>
<marquee scrollamount="10" style="position: fixed; opacity: 0.5; font-size: 34px ; color: #d7d7d7;"> <>< <>< <>< </marquee>
<br>
<marquee scrollamount="13" style="position: fixed; opacity: 0.5; font-size: 25px; color: #d7d7d7;"> <>< <>< <>< </marquee>
<h2>Part 1 Starting the Game </h2>
<div class="instructions">
<div class="grid-item" onmouseover="changeContent(this)" onmouseout="resetContent(this)">
<img src="images/matiz.png" class="grid-image" id="img1">
<span class="grid-text">
<i style="font-size: large">Set up boundaries for the game. </i>
<div class="instruction-text">
Since you can play this game either indoors or outdoors, it's important for every player to know where they can and can't go.
For example, if you are playing outside, you want to make sure that everyone understands they have to stay in the yard and not wander over to the neighbor's two doors down.
Of course, the size of the area depends on the number of players and how much space you want to use.
All that matters is that there are enough places to hide.
</div>
</span>
</div>
<div class="grid-item" onmouseover="changeContent(this)" onmouseout="resetContent(this)">
<img src="images/matiz_spicy.png" class="grid-image" id="img2">
<span class="grid-text">
<i style="font-size: large">Make the house as dark as possible.</i>
<div class="instruction-text">
If you are going to play indoors, you want to try and make the area you're using as dim as you can.
Turn out the lights, close the blinds/curtains, turn off TVs, computer monitors and any other sources of light.
Once you do this, your group can either go outside or start in a neutral area like a foyer.
If there are other people in the house while youre playing, you can either restrict your group to one area or simply do your best to work around them.
If you're afraid of getting hurt in a dark house everybody could have flashlights and when you find the person remember to turn your flashlight off and don't make a sound.
You can also play another version where all lights are on, and the hunted hides in plain sight, but in a tiny space.
</div>
</span>
</div>
<div class="grid-item" onmouseover="changeContent(this)" onmouseout="resetContent(this)">
<img src="images/matiz_lemon.png" class="grid-image" id="img3">
<span class="grid-text">
<i style="font-size: large">Choose one person to be “it.”</i>
<div class="instruction-text">
You can do this in a multitude of ways.
For example, if no one volunteers, try playing rock, paper, scissors or pulling names from a hat.
Once a person is chosen, have them go into the house and hide somewhere in the dark.
This person is the hider/hunted and everyone else is a seeker/hunter.
</div>
</span>
</div>
<div class="grid-item" onmouseover="changeContent(this)" onmouseout="resetContent(this)">
<img src="images/matiz.png" class="grid-image" id="img4">
<span class="grid-text">
<i style="font-size: large">Find a good place to hide. </i>
<div class="instruction-text">
The place you choose may depend on how many people you're playing with.
For example, if you are playing with 4 other people, you only have to fit 3 other people in with you.
On the other hand, if you're playing with 15 other people, then that's 14 people you need to fit in your hiding place beside yourself.
You can try hiding under a table or a bed, in a closet under piles of clothes, in a pantry, a spacious cupboard, even in a doghouse if you find one.
Just keep in mind the other people who will be forced to hide with you.
If you're the hider/hunted and don't like your hiding place you are free to move. However, be aware that you have to be very fast and sneaky if you hear footsteps.
</div>
</span>
</div>
<div class="grid-item" onmouseover="changeContent(this)" onmouseout="resetContent(this)">
<img src="images/matiz.png" class="grid-image" id="img5">
<span class="grid-text">
<i style="font-size: large">Count to 50 or 100. </i>
<div class="instruction-text">
While the chosen person hides inside, the people left outside count to 50 or 100. T
hey should do this slowly to give the person hiding some time to find and get into a spot.
If you have a larger playing area, like a big house or yard, you will want to give the person hiding more time.
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</span>
</div>
<!-- <div class="grid-item" onmouseover="changeContent(this)" onmouseout="resetContent(this)">
</div> -->
</div>
<br>
<br>
<div>
<h2>Part 2 Finding the “Sardine”</h2>
<div class="instructions">
<div class="grid-item" onmouseover="changeContent(this)" onmouseout="resetContent(this)">
<img src="images/matiz.png" class="grid-image" id="img6">
<span class="grid-text">
<i style="font-size: large">Go find the person hiding. </i>
<div class="instruction-text">
When the people outside or the hunters are done counting, they shout, "Ready or not, here I come!" and can split up and start looking for the person that is hiding.
When you're playing in a house, the darkness should help make finding the player more difficult.
However, if you're playing outside during the day, you will probably have to rely on playing in a large area to make it more difficult.[3]
Make sure that everyone looking works as individuals, there are no teams in this game.
When trying to find the hiding person/group feel your way through the house with your hands since you can't see.
Or, if you are worried about breakable objects or bones, give each participant a small flashlight to help them find their way. The flashlight should be used only if necessary and turned off again after overcoming any obstacles.
</div>
</span>
</div>
<div class="grid-item" onmouseover="changeContent(this)" onmouseout="resetContent(this)">
<img src="images/matiz.png" class="grid-image" id="img7">
<span class="grid-text">
<i style="font-size: large">Ask, "Are you the sardine?” to the person hiding. </i>
<div class="instruction-text" style="line-height: 1;">
If that person is “it,” they must answer, "Yes, I am the sardine."
At this point, you become a sardine, too.
That is to say, you must hide in the same spot and stay quiet.
You don't want anyone else to find you, so make sure to look around before you hide.
</div>
</span>
</div>
<div class="grid-item" onmouseover="changeContent(this)" onmouseout="resetContent(this)">
<img src="images/matiz.png" class="grid-image" id="img8">
<span class="grid-text">
<i style="font-size: large">Continue hiding until one person is left. </i>
<div class="instruction-text" style="line-height: .75;">
As everyone discovers the original hider, they have to hide with them.
This continues until there is only one person left. Whoever is last becomes the next hider or sardine.
Depending on the number of people playing, packing everyone into one space can be both difficult and amusing.
If you're the last person to find the original hider and everyone else, you become it for the next game.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
</span>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>Community Q&A</h2>
<div class="instructions">
<div class="grid-item">
<i>Question</i> If there is one seeker left, does everyone come out of the hiding spot, or does the seeker have to find everyone?
<br><br>
<b>GlitterGirl01</b> <i>Community Answer</i> The seeker must find everyone; he/she then becomes 'It' for the next round.
<br><br>
<i>Helpful</i> 64 <i>Not Helpful</i> 19
</div>
<div class="grid-item">
<i>Question</i> How many players are needed?
<br> <br>
<i>Community Answer</i> You can play with however many you want. If you have a lot of players, you can play in groups of two or three.
<br><br>
<i>Helpful</i> 56 <i>Not Helpful</i> 22
</div>
<div class="grid-item">
<i>Question</i> What if the people can't find me and give up?
<br><br>
<i>Community Answer</i> You can set up an exact amount of time for the game. Plan a spot where you'll all meet up if the time runs out and no one has found you.
<br><br>
<i>Helpful</i> 72 <i>Not Helpful</i> 26
</div>
</div>
</div>
<div>
<!-- return to home -->
<a href="project1.html"><img src=toys/fish.png style ="width: 10%; position: sticky; bottom: 10px; z-index: 5;"></a>
</div>
</body>
<script>
function changeContent(item){
item.querySelector('.grid-image').style.opacity = '0';
item.querySelector('.grid-text').style.opacity = '1';
}
function resetContent(item){
item.querySelector('.grid-image').style.opacity = '1';
item.querySelector('.grid-text').style.opacity = '0';
}
var imgSources = [
"images/matiz_spicy.png",
"images/matiz.png",
"images/matiz_lemon.png"
];
var randomIndex = Math.floor(Math.random() * 3);
document.getElementById('img1').src = imgSources[randomIndex];
document.getElementById('img8').src = imgSources[randomIndex];
document.getElementById('img3').src = imgSources[randomIndex];
randomIndex = Math.floor(Math.random() * 3);
document.getElementById('img2').src = imgSources[randomIndex];
document.getElementById('img5').src = imgSources[randomIndex];
document.getElementById('img6').src = imgSources[randomIndex];
randomIndex = Math.floor(Math.random() * 3);
document.getElementById('img7').src = imgSources[randomIndex];
document.getElementById('img4').src = imgSources[randomIndex];
</script>
</html>