Hugging Face's logo

Spaces:
Rjdjjdjdj
/
sd
Running

App Files Community
Rjdjjdjdj commited on
Commit
d1aba18
·
verified ·
1 Parent(s): fe85eb9

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +664 -19
index.html CHANGED
@@ -1,19 +1,664 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Закулисье - Игра</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Courier New', monospace;
16
+ background: #000;
17
+ color: #fff;
18
+ overflow: hidden;
19
+ cursor: none;
20
+ }
21
+
22
+ #gameContainer {
23
+ position: relative;
24
+ width: 100vw;
25
+ height: 100vh;
26
+ background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
27
+ }
28
+
29
+ #gameView {
30
+ position: absolute;
31
+ width: 100%;
32
+ height: 100%;
33
+ perspective: 1000px;
34
+ transform-style: preserve-3d;
35
+ transition: transform 0.3s ease-out;
36
+ }
37
+
38
+ #camera {
39
+ position: absolute;
40
+ width: 100%;
41
+ height: 100%;
42
+ transform-style: preserve-3d;
43
+ transition: transform 0.1s ease-out;
44
+ }
45
+
46
+ .level {
47
+ position: absolute;
48
+ width: 100%;
49
+ height: 100%;
50
+ display: none;
51
+ transform-style: preserve-3d;
52
+ }
53
+
54
+ .level.active {
55
+ display: block;
56
+ }
57
+
58
+ .wall {
59
+ position: absolute;
60
+ background: linear-gradient(45deg, #0a0a0a, #1a1a1a);
61
+ border: 1px solid #222;
62
+ box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
63
+ }
64
+
65
+ .wall::before {
66
+ content: '';
67
+ position: absolute;
68
+ top: 0;
69
+ left: 0;
70
+ right: 0;
71
+ bottom: 0;
72
+ background:
73
+ repeating-linear-gradient(
74
+ 90deg,
75
+ transparent,
76
+ transparent 2px,
77
+ rgba(255, 0, 0, 0.03) 2px,
78
+ rgba(255, 0, 0, 0.03) 4px
79
+ );
80
+ animation: scanlines 8s linear infinite;
81
+ }
82
+
83
+ @keyframes scanlines {
84
+ 0% { transform: translateY(-100%); }
85
+ 100% { transform: translateY(100%); }
86
+ }
87
+
88
+ .floor {
89
+ position: absolute;
90
+ bottom: 0;
91
+ width: 100%;
92
+ height: 50%;
93
+ background:
94
+ radial-gradient(circle at 50% 50%, rgba(20, 20, 20, 0.8), rgba(0, 0, 0, 0.9)),
95
+ repeating-linear-gradient(
96
+ 0deg,
97
+ #111 0px,
98
+ #111 20px,
99
+ #0a0a0a 20px,
100
+ #0a0a0a 40px
101
+ );
102
+ transform: rotateX(90deg) translateZ(-25vh);
103
+ }
104
+
105
+ .ceiling {
106
+ position: absolute;
107
+ top: 0;
108
+ width: 100%;
109
+ height: 50%;
110
+ background:
111
+ radial-gradient(circle at 50% 50%, rgba(10, 10, 10, 0.9), rgba(0, 0, 0, 1)),
112
+ repeating-linear-gradient(
113
+ 0deg,
114
+ #000 0px,
115
+ #000 10px,
116
+ #0a0a0a 10px,
117
+ #0a0a0a 20px
118
+ );
119
+ transform: rotateX(-90deg) translateZ(-25vh);
120
+ }
121
+
122
+ .vignette {
123
+ position: absolute;
124
+ top: 0;
125
+ left: 0;
126
+ width: 100%;
127
+ height: 100%;
128
+ background: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
129
+ pointer-events: none;
130
+ z-index: 100;
131
+ }
132
+
133
+ .vignette::after {
134
+ content: '';
135
+ position: absolute;
136
+ top: 0;
137
+ left: 0;
138
+ width: 100%;
139
+ height: 100%;
140
+ background:
141
+ radial-gradient(circle at 20% 50%, rgba(255, 0, 0, 0.1) 0%, transparent 30%),
142
+ radial-gradient(circle at 80% 50%, rgba(0, 0, 255, 0.1) 0%, transparent 30%);
143
+ animation: colorShift 10s ease-in-out infinite;
144
+ }
145
+
146
+ @keyframes colorShift {
147
+ 0%, 100% { opacity: 0.1; }
148
+ 50% { opacity: 0.3; }
149
+ }
150
+
151
+ #ui {
152
+ position: absolute;
153
+ top: 20px;
154
+ left: 20px;
155
+ z-index: 200;
156
+ font-size: 14px;
157
+ text-shadow: 0 0 10px #fff;
158
+ }
159
+
160
+ #levelInfo {
161
+ margin-bottom: 10px;
162
+ color: #ff0000;
163
+ animation: glitch 2s infinite;
164
+ }
165
+
166
+ @keyframes glitch {
167
+ 0%, 100% { opacity: 1; transform: translateX(0); }
168
+ 20% { opacity: 0.8; transform: translateX(-2px); }
169
+ 40% { opacity: 1; transform: translateX(2px); }
170
+ 60% { opacity: 0.8; transform: translateX(-1px); }
171
+ 80% { opacity: 1; transform: translateX(1px); }
172
+ }
173
+
174
+ #crosshair {
175
+ position: absolute;
176
+ top: 50%;
177
+ left: 50%;
178
+ transform: translate(-50%, -50%);
179
+ width: 20px;
180
+ height: 20px;
181
+ z-index: 150;
182
+ pointer-events: none;
183
+ }
184
+
185
+ #crosshair::before,
186
+ #crosshair::after {
187
+ content: '';
188
+ position: absolute;
189
+ background: rgba(255, 255, 255, 0.5);
190
+ box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
191
+ }
192
+
193
+ #crosshair::before {
194
+ top: 50%;
195
+ left: 0;
196
+ width: 100%;
197
+ height: 1px;
198
+ transform: translateY(-50%);
199
+ }
200
+
201
+ #crosshair::after {
202
+ left: 50%;
203
+ top: 0;
204
+ width: 1px;
205
+ height: 100%;
206
+ transform: translateX(-50%);
207
+ }
208
+
209
+ .entity {
210
+ position: absolute;
211
+ width: 50px;
212
+ height: 100px;
213
+ background: rgba(255, 0, 0, 0.3);
214
+ transform-style: preserve-3d;
215
+ animation: float 3s ease-in-out infinite;
216
+ }
217
+
218
+ @keyframes float {
219
+ 0%, 100% { transform: translateY(0); }
220
+ 50% { transform: translateY(-10px); }
221
+ }
222
+
223
+ .loading {
224
+ position: absolute;
225
+ top: 50%;
226
+ left: 50%;
227
+ transform: translate(-50%, -50%);
228
+ font-size: 24px;
229
+ letter-spacing: 3px;
230
+ animation: pulse 1.5s ease-in-out infinite;
231
+ }
232
+
233
+ @keyframes pulse {
234
+ 0%, 100% { opacity: 0.3; }
235
+ 50% { opacity: 1; }
236
+ }
237
+
238
+ .noise {
239
+ position: absolute;
240
+ top: 0;
241
+ left: 0;
242
+ width: 100%;
243
+ height: 100%;
244
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(%23n)" opacity="0.4"/></svg>');
245
+ mix-blend-mode: overlay;
246
+ pointer-events: none;
247
+ z-index: 50;
248
+ animation: noiseMove 0.5s steps(8) infinite;
249
+ }
250
+
251
+ @keyframes noiseMove {
252
+ 0% { transform: translate(0, 0); }
253
+ 100% { transform: translate(-10px, -10px); }
254
+ }
255
+
256
+ .blood {
257
+ position: absolute;
258
+ background: #8B0000;
259
+ opacity: 0.7;
260
+ filter: blur(1px);
261
+ animation: drip 10s linear infinite;
262
+ }
263
+
264
+ @keyframes drip {
265
+ 0% { transform: translateY(-100%); opacity: 0; }
266
+ 10% { opacity: 0.7; }
267
+ 100% { transform: translateY(100vh); opacity: 0.3; }
268
+ }
269
+
270
+ #instructions {
271
+ position: absolute;
272
+ bottom: 20px;
273
+ left: 20px;
274
+ font-size: 12px;
275
+ opacity: 0.7;
276
+ z-index: 200;
277
+ }
278
+
279
+ .flash {
280
+ position: absolute;
281
+ top: 0;
282
+ left: 0;
283
+ width: 100%;
284
+ height: 100%;
285
+ background: radial-gradient(circle at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
286
+ opacity: 0;
287
+ pointer-events: none;
288
+ z-index: 300;
289
+ }
290
+
291
+ .flash.active {
292
+ animation: flash 0.1s ease-out;
293
+ }
294
+
295
+ @keyframes flash {
296
+ 0% { opacity: 0; }
297
+ 50% { opacity: 1; }
298
+ 100% { opacity: 0; }
299
+ }
300
+ </style>
301
+ </head>
302
+ <body>
303
+ <div id="gameContainer">
304
+ <div id="gameView">
305
+ <div id="camera">
306
+ <div class="level active" id="level1">
307
+ <div class="wall" style="left: 0; top: 0; width: 10px; height: 100%;"></div>
308
+ <div class="wall" style="right: 0; top: 0; width: 10px; height: 100%;"></div>
309
+ <div class="wall" style="left: 0; top: 0; width: 100%; height: 10px;"></div>
310
+ <div class="wall" style="left: 0; bottom: 0; width: 100%; height: 10px;"></div>
311
+ <div class="floor"></div>
312
+ <div class="ceiling"></div>
313
+ <div class="blood" style="left: 30%; top: 0; width: 3px; height: 100px;"></div>
314
+ </div>
315
+
316
+ <div class="level" id="level2">
317
+ <div class="wall" style="left: 0; top: 0; width: 15px; height: 100%;"></div>
318
+ <div class="wall" style="right: 0; top: 0; width: 15px; height: 100%;"></div>
319
+ <div class="floor"></div>
320
+ <div class="ceiling"></div>
321
+ <div class="entity" style="left: 70%; top: 50%;"></div>
322
+ </div>
323
+
324
+ <div class="level" id="level3">
325
+ <div class="wall" style="left: 0; top: 0; width: 20px; height: 100%;"></div>
326
+ <div class="wall" style="right: 0; top: 0; width: 20px; height: 100%;"></div>
327
+ <div class="wall" style="left: 30%; top: 0; width: 10px; height: 100%;"></div>
328
+ <div class="floor"></div>
329
+ <div class="ceiling"></div>
330
+ </div>
331
+
332
+ <div class="level" id="level4">
333
+ <div class="wall" style="left: 0; top: 0; width: 25px; height: 100%;"></div>
334
+ <div class="wall" style="right: 0; top: 0; width: 25px; height: 100%;"></div>
335
+ <div class="blood" style="left: 50%; top: 0; width: 5px; height: 200px;"></div>
336
+ <div class="floor"></div>
337
+ <div class="ceiling"></div>
338
+ </div>
339
+
340
+ <div class="level" id="level5">
341
+ <div class="wall" style="left: 0; top: 0; width: 30px; height: 100%;"></div>
342
+ <div class="wall" style="right: 0; top: 0; width: 30px; height: 100%;"></div>
343
+ <div class="entity" style="left: 20%; top: 40%;"></div>
344
+ <div class="entity" style="left: 80%; top: 60%;"></div>
345
+ <div class="floor"></div>
346
+ <div class="ceiling"></div>
347
+ </div>
348
+
349
+ <div class="level" id="level6">
350
+ <div class="wall" style="left: 0; top: 0; width: 35px; height: 100%;"></div>
351
+ <div class="wall" style="right: 0; top: 0; width: 35px; height: 100%;"></div>
352
+ <div class="wall" style="left: 50%; top: 0; width: 15px; height: 100%;"></div>
353
+ <div class="floor"></div>
354
+ <div class="ceiling"></div>
355
+ </div>
356
+
357
+ <div class="level" id="level7">
358
+ <div class="wall" style="left: 0; top: 0; width: 40px; height: 100%;"></div>
359
+ <div class="wall" style="right: 0; top: 0; width: 40px; height: 100%;"></div>
360
+ <div class="blood" style="left: 25%; top: 0; width: 2px; height: 150px;"></div>
361
+ <div class="blood" style="left: 75%; top: 0; width: 2px; height: 150px;"></div>
362
+ <div class="floor"></div>
363
+ <div class="ceiling"></div>
364
+ </div>
365
+
366
+ <div class="level" id="level8">
367
+ <div class="wall" style="left: 0; top: 0; width: 45px; height: 100%;"></div>
368
+ <div class="wall" style="right: 0; top: 0; width: 45px; height: 100%;"></div>
369
+ <div class="entity" style="left: 50%; top: 50%; transform: scale(1.5);"></div>
370
+ <div class="floor"></div>
371
+ <div class="ceiling"></div>
372
+ </div>
373
+
374
+ <div class="level" id="level9">
375
+ <div class="wall" style="left: 0; top: 0; width: 50px; height: 100%;"></div>
376
+ <div class="wall" style="right: 0; top: 0; width: 50px; height: 100%;"></div>
377
+ <div class="wall" style="left: 25%; top: 0; width: 20px; height: 100%;"></div>
378
+ <div class="wall" style="left: 75%; top: 0; width: 20px; height: 100%;"></div>
379
+ <div class="floor"></div>
380
+ <div class="ceiling"></div>
381
+ </div>
382
+
383
+ <div class="level" id="level10">
384
+ <div class="wall" style="left: 0; top: 0; width: 55px; height: 100%;"></div>
385
+ <div class="wall" style="right: 0; top: 0; width: 55px; height: 100%;"></div>
386
+ <div class="blood" style="left: 10%; top: 0; width: 1px; height: 100vh;"></div>
387
+ <div class="blood" style="left: 30%; top: 0; width: 1px; height: 100vh;"></div>
388
+ <div class="blood" style="left: 50%; top: 0; width: 1px; height: 100vh;"></div>
389
+ <div class="blood" style="left: 70%; top: 0; width: 1px; height: 100vh;"></div>
390
+ <div class="blood" style="left: 90%; top: 0; width: 1px; height: 100vh;"></div>
391
+ <div class="floor"></div>
392
+ <div class="ceiling"></div>
393
+ </div>
394
+
395
+ <div class="level" id="level11">
396
+ <div class="wall" style="left: 0; top: 0; width: 60px; height: 100%;"></div>
397
+ <div class="wall" style="right: 0; top: 0; width: 60px; height: 100%;"></div>
398
+ <div class="entity" style="left: 15%; top: 30%;"></div>
399
+ <div class="entity" style="left: 85%; top: 70%;"></div>
400
+ <div class="entity" style="left: 50%; top: 20%;"></div>
401
+ <div class="floor"></div>
402
+ <div class="ceiling"></div>
403
+ </div>
404
+
405
+ <div class="level" id="level12">
406
+ <div class="wall" style="left: 0; top: 0; width: 65px; height: 100%;"></div>
407
+ <div class="wall" style="right: 0; top: 0; width: 65px; height: 100%;"></div>
408
+ <div class="wall" style="left: 40%; top: 0; width: 25px; height: 100%;"></div>
409
+ <div class="floor"></div>
410
+ <div class="ceiling"></div>
411
+ </div>
412
+
413
+ <div class="level" id="level13">
414
+ <div class="wall" style="left: 0; top: 0; width: 70px; height: 100%;"></div>
415
+ <div class="wall" style="right: 0; top: 0; width: 70px; height: 100%;"></div>
416
+ <div class="blood" style="left: 35%; top: 0; width: 8px; height: 300px; animation-delay: 2s;"></div>
417
+ <div class="entity" style="left: 65%; top: 45%; transform: scale(2);"></div>
418
+ <div class="floor"></div>
419
+ <div class="ceiling"></div>
420
+ </div>
421
+
422
+ <div class="level" id="level14">
423
+ <div class="wall" style="left: 0; top: 0; width: 75px; height: 100%;"></div>
424
+ <div class="wall" style="right: 0; top: 0; width: 75px; height: 100%;"></div>
425
+ <div class="wall" style="left: 20%; top: 0; width: 15px; height: 100%;"></div>
426
+ <div class="wall" style="left: 60%; top: 0; width: 15px; height: 100%;"></div>
427
+ <div class="floor"></div>
428
+ <div class="ceiling"></div>
429
+ </div>
430
+
431
+ <div class="level" id="level15">
432
+ <div class="wall" style="left: 0; top: 0; width: 80px; height: 100%;"></div>
433
+ <div class="wall" style="right: 0; top: 0; width: 80px; height: 100%;"></div>
434
+ <div class="entity" style="left: 10%; top: 20%; transform: scale(2.5);"></div>
435
+ <div class="entity" style="left: 90%; top: 80%; transform: scale(2.5);"></div>
436
+ <div class="entity" style="left: 50%; top: 50%; transform: scale(3);"></div>
437
+ <div class="blood" style="left: 0; top: 0; width: 100%; height: 100%; opacity: 0.1; background: radial-gradient(circle, #8B0000 0%, transparent 70%);"></div>
438
+ <div class="floor"></div>
439
+ <div class="ceiling"></div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <div id="ui">
445
+ <div id="levelInfo">УРОВЕНЬ 1 / 15</div>
446
+ <div id="health">ЗДОРОВЬЕ: 100</div>
447
+ </div>
448
+
449
+ <div id="crosshair"></div>
450
+ <div class="vignette"></div>
451
+ <div class="noise"></div>
452
+ <div class="flash" id="flash"></div>
453
+
454
+ <div id="instructions">
455
+ ИСПОЛЬЗУЙТЕ МЫШЬ ДЛЯ ОБОРОТА<br>
456
+ НАЖМИТЕ ПРОБЕЛ ДЛЯ СЛЕДУЮЩЕГО УРОВНЯ
457
+ </div>
458
+
459
+ <div class="loading" id="loading">ЗАГРУЗКА...</div>
460
+ </div>
461
+
462
+ <script>
463
+ class HorrorGame {
464
+ constructor() {
465
+ this.currentLevel = 1;
466
+ this.maxLevel = 15;
467
+ this.camera = document.getElementById('camera');
468
+ this.gameView = document.getElementById('gameView');
469
+ this.mouseX = 0;
470
+ this.mouseY = 0;
471
+ this.swayAmount = 0;
472
+ this.bobAmount = 0;
473
+ this.bobSpeed = 0;
474
+ this.health = 100;
475
+ this.gameStarted = false;
476
+
477
+ this.init();
478
+ }
479
+
480
+ init() {
481
+ this.hideLoading();
482
+ this.bindEvents();
483
+ this.createAudio();
484
+ this.startAmbientSounds();
485
+ this.gameLoop();
486
+ }
487
+
488
+ hideLoading() {
489
+ setTimeout(() => {
490
+ document.getElementById('loading').style.display = 'none';
491
+ this.gameStarted = true;
492
+ }, 2000);
493
+ }
494
+
495
+ bindEvents() {
496
+ document.addEventListener('mousemove', (e) => {
497
+ if (!this.gameStarted) return;
498
+
499
+ const centerX = window.innerWidth / 2;
500
+ const centerY = window.innerHeight / 2;
501
+
502
+ this.mouseX = (e.clientX - centerX) / centerX;
503
+ this.mouseY = (e.clientY - centerY) / centerY;
504
+
505
+ this.swayAmount = Math.abs(this.mouseX) * 2;
506
+ this.bobSpeed = 2 + this.swayAmount;
507
+ });
508
+
509
+ document.addEventListener('keydown', (e) => {
510
+ if (e.code === 'Space') {
511
+ this.nextLevel();
512
+ }
513
+ });
514
+
515
+ document.addEventListener('click', () => {
516
+ this.flashScreen();
517
+ });
518
+ }
519
+
520
+ createAudio() {
521
+ // Создаем аудио контекст для генерации звуков
522
+ this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
523
+
524
+ // Создаем осциллятор для дрон звука
525
+ this.drone = this.audioContext.createOscillator();
526
+ this.droneGain = this.audioContext.createGain();
527
+ this.drone.type = 'sawtooth';
528
+ this.drone.frequency.setValueAtTime(60, this.audioContext.currentTime);
529
+ this.droneGain.gain.setValueAtTime(0.1, this.audioContext.currentTime);
530
+ this.drone.connect(this.droneGain);
531
+ this.droneGain.connect(this.audioContext.destination);
532
+ this.drone.start();
533
+
534
+ // Добавляем LFO для модуляции
535
+ this.lfo = this.audioContext.createOscillator();
536
+ this.lfoGain = this.audioContext.createGain();
537
+ this.lfo.type = 'sine';
538
+ this.lfo.frequency.setValueAtTime(0.2, this.audioContext.currentTime);
539
+ this.lfoGain.gain.setValueAtTime(20, this.audioContext.currentTime);
540
+ this.lfo.connect(this.lfoGain);
541
+ this.lfoGain.connect(this.drone.frequency);
542
+ this.lfo.start();
543
+ }
544
+
545
+ startAmbientSounds() {
546
+ // Случайные звуки в течение игры
547
+ setInterval(() => {
548
+ if (Math.random() < 0.3) {
549
+ this.playRandomSound();
550
+ }
551
+ }, 5000 + Math.random() * 10000);
552
+ }
553
+
554
+ playRandomSound() {
555
+ const sounds = [
556
+ { type: 'sine', freq: 150, duration: 200 },
557
+ { type: 'square', freq: 80, duration: 300 },
558
+ { type: 'sawtooth', freq: 200, duration: 150 }
559
+ ];
560
+
561
+ const sound = sounds[Math.floor(Math.random() * sounds.length)];
562
+
563
+ const osc = this.audioContext.createOscillator();
564
+ const gain = this.audioContext.createGain();
565
+
566
+ osc.type = sound.type;
567
+ osc.frequency.setValueAtTime(sound.freq, this.audioContext.currentTime);
568
+ osc.frequency.exponentialRampToValueAtTime(sound.freq * 0.1, this.audioContext.currentTime + sound.duration / 1000);
569
+
570
+ gain.gain.setValueAtTime(0.05, this.audioContext.currentTime);
571
+ gain.gain.exponentialRampToValueAtTime(0.001, this.audioContext.currentTime + sound.duration / 1000);
572
+
573
+ osc.connect(gain);
574
+ gain.connect(this.audioContext.destination);
575
+
576
+ osc.start();
577
+ osc.stop(this.audioContext.currentTime + sound.duration / 1000);
578
+ }
579
+
580
+ gameLoop() {
581
+ this.updateCamera();
582
+ this.updateBob();
583
+ requestAnimationFrame(() => this.gameLoop());
584
+ }
585
+
586
+ updateCamera() {
587
+ const rotationY = this.mouseX * 15;
588
+ const rotationX = this.mouseY * 10;
589
+
590
+ const swayX = Math.sin(Date.now() * 0.001 * this.bobSpeed) * this.swayAmount;
591
+ const swayY = Math.sin(Date.now() * 0.002 * this.bobSpeed) * 0.5;
592
+
593
+ this.camera.style.transform = `
594
+ rotateY(${rotationY}deg)
595
+ rotateX(${rotationX}deg)
596
+ translateX(${swayX}px)
597
+ translateY(${swayY}px)
598
+ `;
599
+ }
600
+
601
+ updateBob() {
602
+ this.bobAmount = Math.sin(Date.now() * 0.003) * 2;
603
+ this.gameView.style.transform = `translateY(${this.bobAmount}px)`;
604
+ }
605
+
606
+ nextLevel() {
607
+ if (this.currentLevel < this.maxLevel) {
608
+ const currentLevelEl = document.getElementById(`level${this.currentLevel}`);
609
+ currentLevelEl.classList.remove('active');
610
+
611
+ this.currentLevel++;
612
+
613
+ const nextLevelEl = document.getElementById(`level${this.currentLevel}`);
614
+ nextLevelEl.classList.add('active');
615
+
616
+ document.getElementById('levelInfo').textContent = `УРОВЕНЬ ${this.currentLevel} / ${this.maxLevel}`;
617
+
618
+ // Добавляем эффект перехода
619
+ this.flashScreen();
620
+ this.playTransitionSound();
621
+ }
622
+ }
623
+
624
+ flashScreen() {
625
+ const flash = document.getElementById('flash');
626
+ flash.classList.add('active');
627
+ setTimeout(() => {
628
+ flash.classList.remove('active');
629
+ }, 100);
630
+ }
631
+
632
+ playTransitionSound() {
633
+ const osc = this.audioContext.createOscillator();
634
+ const gain = this.audioContext.createGain();
635
+
636
+ osc.type = 'square';
637
+ osc.frequency.setValueAtTime(100, this.audioContext.currentTime);
638
+ osc.frequency.exponentialRampToValueAtTime(50, this.audioContext.currentTime + 0.2);
639
+
640
+ gain.gain.setValueAtTime(0.1, this.audioContext.currentTime);
641
+ gain.gain.exponentialRampToValueAtTime(0.001, this.audioContext.currentTime + 0.2);
642
+
643
+ osc.connect(gain);
644
+ gain.connect(this.audioContext.destination);
645
+
646
+ osc.start();
647
+ osc.stop(this.audioContext.currentTime + 0.2);
648
+ }
649
+ }
650
+
651
+ // Запускаем игру после загрузки страницы
652
+ window.addEventListener('load', () => {
653
+ new HorrorGame();
654
+ });
655
+
656
+ // Воспроизведение звука при первом взаимодействии
657
+ document.addEventListener('click', () => {
658
+ if (!window.gameAudioStarted) {
659
+ window.gameAudioStarted = true;
660
+ }
661
+ }, { once: true });
662
+ </script>
663
+ </body>
664
+ </html>