-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path1st_floor_lounge.html
397 lines (318 loc) · 16.5 KB
/
1st_floor_lounge.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
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
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" type="text/css" href="./css/1st_floor_lounge.css">
<link rel="stylesheet" type="text/css" href="./css/loader.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+KR:400,700&display=swap&subset=korean" rel="stylesheet">
<script src="https://kit.fontawesome.com/296406b34b.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>1층 라운지 :: 센티멘탈 호텔</title>
</head>
<body>
<div class="fade-box"></div>
<div class="container">
<div class="dialogue-box"></div>
<div id="reset-bg" class="transparent-background"></div>
<div class="reset">
<i class="fas fa-redo-alt icon reset-icon gifhover"></i>
<div class="dialogue-box-reset">
<h1 class="name"> </h1>
<p class="line top-line first-line">게임을 재시작하시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines"><a id="reset" href="index.html"><span class="clicker clicker-reset-1">✔️ 예</span></a></p>
<p class="line bottom-line fast-no-line next-line"><span class="clicker clicker-reset-2">❌ 아니오</span></p>
</div>
</div>
<div class="items">
<div class="item map">
<img class="icon map-icon" src="image/icon/mapicon.png">
<div class="map-contents">
<div id="item-background" class="transparent-background"></div>
<img class="map-image" src="image/1st_floor_lobby/설명-맵.png">
<span class="close-x">✕</span>
</div>
</div>
</div>
<div class="scores">
<img class="scoreboard" src="image/icon/점수판.png">
<span class="score__text">점수</span>
<span class="score"></span>
</div>
<div class="arrows">
<img class="movingarrow movingarrow__bartender" src="image/icon/arrow.png">
<img class="movingarrow movingarrow__elevator" src="image/icon/arrow.png">
</div>
<!-- gifs -->
<div class="coffee-gif">
<img class="gif gifhover coffee" src="image/1st_floor_lounge/커피머신.png">
<audio id="coffee">
<source src="sound/1st_floor_lounge/coffeesound.mp3" type="audio/mpeg">
</audio>
</div>
<audio id="small-lamp">
<source src="sound/701/lamp-small.mp3" type="audio/mpeg">
</audio>
<div class="lightbulb-gif">
<img class="gif gifhover lightbulb lightbulb1" src="image/1st_floor_lounge/전구1.png">
<img class="gif gifhover lightbulb lightbulb2" src="image/1st_floor_lounge/전구2.png">
</div>
<div class="people-gif">
<img class="gif gifhover people people1" src="image/1st_floor_lounge/people1.png">
<img class="gif gifhover people people2" src="image/1st_floor_lounge/people2.png">
</div>
<div class="dialogue-box2 foundallgif">
<h1 class="name"> </h1>
<p class="line top-line first-line">모든 움직이는 요소를 찾았다! </p>
<p class="line bottom-line fast-yes-line"><span class="clicker clicker-100">(보너스 10점!)</span></p>
</div>
<div class="start">
<img class="gif gifhover big-hyun__gif" src="image/1st_floor_lounge/큰현.gif">
<img class="avatar big-hyun__avatar" src="image/1st_floor_lobby/큰현.png">
<div class="dialogue-box2 dialogue-0-1">
<h1 class="name">큰 현</h1>
<p class="line top-line first-line">오셨군요.</p>
<p class="line top-line second-line next-line">여기는 <strong>센티멘탈 호텔 라운지</strong>예요. 호텔 방문객 누구나 음료를 마시며 쉴 수 있죠.</p>
<p class="line top-line third-line next-line">환영의 의미로 <span class="player-name"></span> 씨를 위한 음료를 준비해 달라고 했으니, <strong>바텐더</strong>에게 가 보세요.</p>
<p class="line top-line fourth-line next-line">그럼 저는 일이 있어 2층으로 올라가 있을 테니, 라운지를 천천히 둘러본 후 올라와 주세요~</p>
<p class="line bottom-line fifth-line four-toplines">- <span class="clicker clicker-0-1">네 알겠습니다!</span></p>
</div>
</div>
<div class="bartender">
<img class="gif gifhover bartender__gif" src="image/1st_floor_lounge/바텐더.gif">
<div id="menu" class="dialogue-box2 menu">
<h1 class="name">바텐더</h1>
<p class="line top-line first-line">허허허, 어서 오세요 <span class="player-name"></span> 씨. 모든 음료를 한 번씩 맛보세요.</p>
<p class="line top-line next-line" style="animation: typing 0 0 linear backwards"> </p>
<p id="menu1" class="line top-line next-line" style="animation: typing 1.5s 1.5s linear backwards;">🍹 <span class="clicker clicker-1-1">애플 사이다</span></p>
<p id="menu2" class="line top-line next-line" style="animation: typing 1.5s 1.8s linear backwards;">🍵 <span class="clicker clicker-1-2">밀크티</span></p>
<p id="menu3" class="line top-line next-line" style="animation: typing 1.5s 2.1s linear backwards">☕ <span class="clicker clicker-1-3">아메리카노</span></p>
<p id="menu4" class="line top-line next-line" style="animation: typing 1.5s 2.4s linear backwards;">🍸 <span class="clicker clicker-1-4">섹스 온 더 비치</span></p>
<p class="line top-line next-line" style="animation: typing 0 0 linear backwards"> </p>
<p class="line top-line next-line" style="animation: typing 1.5s 2.7s linear backwards;"><span class="clicker clicker-1-5">대화 그만하기</span></p>
</div>
<div class="dialogue-box2 applecidar">
<h1 class="name"><span class="player-name"></span></h1>
<p class="line top-line first-line">음...</p>
<p class="line top-line second-line next-line">신선한 사과와 톡 쏘는 탄산의 조합이...</p>
<p class="line top-line third-line next-line">나의 갈증을 해소시켰다...</p>
<p class="line bottom-line fourth-line three-toplines">갈증이 해소되어 보너스 점수 <strong>5점</strong>을 얻었다! <span class="clicker clicker-2-1">(오예!)</span></p>
</div>
<div class="dialogue-box2 milktea">
<h1 class="name"><span class="player-name"></span></h1>
<p class="line top-line first-line">음...</p>
<p class="line top-line second-line next-line">밀크티의 부드럽고 달콤한 맛이...</p>
<p class="line top-line third-line next-line">첫 출근날의 긴장을 풀어주었다...</p>
<p class="line bottom-line fourth-line three-toplines">긴장이 완화되어 보너스 점수 <strong>5점</strong>을 얻었다! <span class="clicker clicker-2-2">(오예!)</span></p>
</div>
<div class="dialogue-box2 americano">
<h1 class="name"><span class="player-name"></span></h1>
<p class="line top-line first-line">음... </p>
<p class="line top-line second-line next-line">아메리카노의 씁쓸하면서도 그윽한 향이...</p>
<p class="line top-line third-line next-line">졸음을 달아나게 만든다...</p>
<p class="line bottom-line fourth-line three-toplines">졸음에서 깨어 보너스 점수 <strong>5점</strong>을 얻었다! <span class="clicker clicker-2-3">(오예!)</span></p>
</div>
<div class="dialogue-box2 sexonthebeach">
<h1 class="name"><span class="player-name"></span></h1>
<p class="line top-line first-line">교육 중에 음주하면 안 될 것 같지만... 지배인님 몰래 살짝 마셔야지. 히힛.</p>
<p class="line top-line second-line next-line">음... 상큼한 과일향과 보드카의 조화가 예술이다... </p>
<p class="line top-line third-line next-line">앗, 맛이 너무 좋아 <span style="color:red;">원. 샷. </span>해버리고 말았다...!</p>
<p class="line top-line fourth-line next-line">어... 갑자기 기분이 좋아진다... 헤헤헤...</p>
<p class="line bottom-line fifth-line four-toplines">헤롱헤롱 한 모습에 <strong>15점</strong>을 잃었다... <span class="clicker clicker-2-4">(아... 이런...)</span></p>
</div>
</div>
<div class="lounge-elevator">
<audio id="elevatorBellRing">
<source src="sound/Elevator Bell Ring.mp3" type="audio/mpeg">
</audio>
<img class="gif elevator__button button-off" src="image/1st_floor_lounge/엘베버튼off.png">
<img class="gif elevator__button button-on" src="image/1st_floor_lounge/엘베버튼on.png">
<img class="elevator__alarm alarm-off" src="image/1st_floor_lounge/엘베알람off.png">
<img class="elevator__alarm alarm-on" src="image/1st_floor_lounge/엘베알람on.png">
<div class="dialogue-box2 dialogue-2">
<h1 class="name"> </h1>
<p class="line top-line first-line">2층으로 올라가시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <a id="nextStage" href="2nd_floor.html"><span class="clicker clicker-3-1">올라간다</span></a></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-3-2">더 둘러본다</span></p>
</div>
</div>
</div>
<script src="script/score.js"></script>
<script src="script/reset.js"></script>
<script src="script/playerName.js"></script>
<script src="script/item.js"></script>
<script>
$('.fade-box').delay(4000).fadeOut(2000);
$('.preloader').show();
setTimeout(function(){
$('.dialogue-box, .dialogue-0-1, .dialogue-0-1 .line, .big-hyun__avatar').show();
}, 6000)
let block = {display: 'block'};
let none = {display: 'none'};
let hasClickedApplecidar = false;
let hasClickedMilktea = false;
let hasClickedAmericano = false;
let hasClickedSexonthebeach = false;
let hasClickedElevator = false;
let hasClickedCoffee = false;
let hasClickedLightbulb = false;
let hasClickedPeople = false;
function alertFoundAllGif() {
if (hasClickedCoffee=== true && hasClickedLightbulb === true && hasClickedPeople === true) {
$('.foundallgif, .foundallgif .line, .dialogue-box').show();
alertFoundAllGif = function(){};
}
}
//quick view
$('.dialogue-0-1, .menu, .applecidar, .milktea, .americano, .sexonthebeach, .dialogue-2, .dialogue-2 .line').click(function() {
$(event.currentTarget).children().css('animation', 'none');})
// gif
// coffee machine
document.querySelector('.coffee').addEventListener('click', function() {
document.querySelector('#coffee').play();
hasClickedCoffee = true;
alertFoundAllGif()
})
// lightbulb
let lightbulb1 = document.querySelector('.lightbulb1');
let lightbulb2 = document.querySelector('.lightbulb2');
lightbulb1.addEventListener('click', function() {
$('#small-lamp')[0].play();
hasClickedLightbulb = true;
alertFoundAllGif()
setTimeout(function(){
lightbulb1.style.display = 'none';
lightbulb2.style.display = 'block';
}, 200)
})
lightbulb2.addEventListener('click', function() {
$('#small-lamp')[0].play();
setTimeout(function(){
lightbulb2.style.display = 'none';
lightbulb1.style.display = 'block';
}, 200)
})
// people
let people1 = document.querySelector('.people1');
let people2 = document.querySelector('.people2');
people1.addEventListener('click', function() {
hasClickedPeople = true;
alertFoundAllGif()
let peoplegif = function() {
setTimeout(function(){people1.style.display = 'none';}, 250)
setTimeout(function(){people2.style.display = 'block';}, 250)
setTimeout(function(){people2.style.display = 'none';}, 500)
setTimeout(function(){people1.style.display = 'block';}, 500)
}
let repeat = setInterval(peoplegif, 500);
setTimeout(function() {clearInterval(repeat);}, 1000);
})
// found all gifs
$('.clicker-100').click(function() {
$('.foundallgif, .foundallgif .line, .dialogue-box').hide();
addScore(10);
})
// start
$('.clicker-0-1').on('click', function() {
$('.big-hyun__avatar, .dialogue-0-1, .dialogue-0-1 .line, .big-hyun__gif, .dialogue-box').hide();
$('.movingarrow__bartender').show();
})
// bartender
//bartender
$('.bartender__gif').on('click', function() {
if (document.querySelector('.dialogue-box').style.display === 'none') {
$('.movingarrow__bartender').hide();
$('.menu, .menu .line, .dialogue-box').show();
} else {}
})
//close
$('.clicker-1-5').click(function() {
if (hasClickedApplecidar === true && hasClickedMilktea === true && hasClickedAmericano === true && hasClickedSexonthebeach === true) {
$('.movingarrow__elevator').show();
$('.menu, .menu .line, .dialogue-box').hide();
} else {
$('.menu, .menu .line, .dialogue-box').hide();
}
})
// applecidar
$('.clicker-1-1').on('click', function() {
addBonus(hasClickedApplecidar, 5);
hasClickedApplecidar = true;
$('.menu, .menu .line').hide();
$('.applecidar, .applecidar .line').show();
$('.menu #menu1').html(" ");
})
//close
$('.clicker-2-1').on('click', function() {
$('.applecidar, .applecidar .line').hide();
$('.menu, .menu .line').show();
$('.menu #menu1').hide();
})
// milktea
$('.clicker-1-2').on('click', function() {
addBonus(hasClickedMilktea, 5);
hasClickedMilktea = true;
$('.menu, .menu .line').hide();
$('.milktea, .milktea .line').show();
$('.menu #menu2').html(" ");
})
//close
$('.clicker-2-2').on('click', function() {
$('.menu, .menu .line').show();
$('.milktea, .milktea .line').hide();
$('#milktea .dialogue-box').children().hide();
})
// americano
$('.clicker-1-3').on('click', function() {
addBonus(hasClickedAmericano, 5);
hasClickedAmericano = true;
$('.menu, .menu .line').hide();
$('.americano, .americano .line').show();
$('.menu #menu3').html(" ");
})
//close
$('.clicker-2-3').on('click', function() {
$('.menu, .menu .line').show();
$('.americano, .americano .line').hide();
})
// sex on the beach
$('.clicker-1-4').on('click', function() {
addBonus(hasClickedSexonthebeach, -15);
hasClickedSexonthebeach = true;
$('.menu, .menu .line').hide();
$('.sexonthebeach, .sexonthebeach .line').show();
$('.menu #menu4').html(" ");
})
//close
$('.clicker-2-4').on('click', function() {
$('.menu, .menu .line').show();
$('.sexonthebeach, .sexonthebeach .line').hide();
})
// elevator
$('.button-off').on('click', function() {
if (document.querySelector('.dialogue-box').style.display === 'none') {
if (hasClickedApplecidar === true && hasClickedMilktea === true && hasClickedAmericano === true && hasClickedSexonthebeach === true) {
$('.movingarrow__elevator').hide();
$('.dialogue-2, .dialogue-2 .line, .button-on, .dialogue-box, .alarm-on').show();
hasClickedElevator = true;
$('#elevatorBellRing')[0].play();
} else {}
} else {}
})
// close
$('.clicker-3-2').click(function(){
$('.button-on, .dialogue-2, .dialogue-2 .line, .alarm-on, .dialogue-box').hide();
})
$('.clicker-3-1').click(function(){
event.preventDefault();
$('.fade-box').fadeIn(2000);
setTimeout(function() {
window.location = $('#nextStage').attr('href');
}, 2000);
})
</script>
</body>
</html>