FrontendGame/index.html at master · Leg15Coder/FrontendGame · GitHub

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
<!doctype html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/game-objects.css">
  <link rel="stylesheet" href="css/settings.css">
  <link rel="stylesheet" href="css/leaders.css">
  <meta name="description" content="">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="">

  <link rel="icon" href="/img/favicon.ico" sizes="any">
  <link rel="icon" href="/img/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="img/icon.png">

  <meta name="theme-color" content="#fafafa">
</head>

<body>
<header>🔥 <b>Dev Dungeon</b> — Приключение начинается!</header>

  <nav>
    <button id="btn-about">Об игре</button>
    <button id="btn-play">Играть</button>
    <button id="btn-stats">Лидеры</button>
    <button id="btn-settings">Настройки</button>
  </nav>

  <main>
    <section id="section-about" class="section active">
      <h2 class="center-text">Как играть?</h2>
      <p>
        <strong>Dev Dungeon</strong> — это аркада, в которой вы играете за программиста, застрявшего в цифровом подземелье.
        Чтобы выбраться, нужно проходить уровни, избегать врагов, собирать бонусы и не попасться системе слежки. На пути вам попадётся много
        ловушек, бонусов, врагов и интересных игровых механик.
      </p>
      <p>
        Чтобы перемещаться, используйте стрелки или клавиши A, S, D, W на клавиатуре или жесты, если играете на сенсорном устройстве. Нажав на пробел,
        можно пропустить свой ход и остаться на месте. Чтобы перейти на следующий уровень, дойдите до выхода (зелёный квадрат).
      </p>

      <h3 class="center-text">Бонусы и механики</h3>

      <div class="game-object">
        <img src="img/heal.png" alt="Лечение">
        <div>
          <h3>Кофе</h3>
          <p>Спасение программиста, когда нужно работать всю ночь. Восстанавливает здоровье, если его подобрать. Очень важно на поздних уровнях.</p>
        </div>
      </div>

      <div class="game-object reverse">
        <img src="img/scoreUp.png" alt="Очки">
        <div>
          <h3>Зарплата</h3>
          <p>Ну наконец-то она пришла! Дает дополнительные очки — чем больше вы наберёте, тем выше будете в таблице лидеров.</p>
        </div>
      </div>

      <div class="game-object">
        <img src="img/fire.png" alt="Ловушка">
        <div>
          <h3>Нерабочий код</h3>
          <p>Будьте осторожны и не копируйте этот код в свою программу. Может навредить вашему здоровью, так что лучше его не трогать.</p>
        </div>
      </div>

      <div class="game-object reverse">
        <img src="img/portal.png" alt="Портал">
        <div>
          <h3>Портал</h3>
          <p>Перемещает в случайный доступный портал. Появляется на поздних уровнях после выполнения условий.</p>
        </div>
      </div>

      <div class="game-object">
        <img src="img/player.png" alt="Раскрытие">
        <div>
          <h3>Система раскрытия</h3>
          <p>Некоторые враги способны отслеживать твой IP. Если они его отследят, то тебе придётся не сладко!</p>
        </div>
      </div>

      <h3 class="center-text">Враги</h3>

      <div class="game-object reverse">
        <img src="img/worm.png" alt="Компьютерный червь">
        <div>
          <h3>Компьютерный червь</h3>
          <p>Постоянно преследует игрока по кратчайшему пути. Туповат, зато целеустремлён - он не остановится, пока не догонит вас.</p>
        </div>
      </div>

      <div class="game-object">
        <img src="img/bug.png" alt="Баг">
        <div>
          <h3>Баг в программе</h3>
          <p>Каждый из нас его создавал) Не представляет серьёзной угрозы, но может мешать неожиданным перемещением.</p>
        </div>
      </div>

      <div class="game-object reverse">
        <img src="img/zombie.png" alt="Зомби-вирус">
        <div>
          <h3>Зомби-вирус</h3>
          <p>Очень опасная штука, с которой лучше не затягивать игру. При сближении с игроком начинает на него охоту. Иногда размножается, заражая другие программы и создавая копии себя.</p>
        </div>
      </div>

      <div class="game-object">
        <img src="img/spy.png" alt="Шпион">
        <div>
          <h3>Инкогнито</h3>
          <p>Сканирует область вокруг себя в поисках жертв. Если вы подойдёте близко — может отследить ваш IP. Предпочитает держаться на расстоянии и следить за игрой.</p>
        </div>
      </div>

      <div class="game-object reverse">
        <img src="img/backdoor.png" alt="Бэкдор">
        <div>
          <h3>Бэкдор</h3>
          <p>Странная штука. Постоянно то появляется, то исчезает. Двигается почти хаотично. Может быть опасен, когда вы его не видите.</p>
        </div>
      </div>

      <div class="game-object">
        <img src="img/trojan.png" alt="Троян">
        <div>
          <h3>Троян</h3>
          <p>Подлая крыса! Притворяется неживым предметом, пока не подойдёшь к нему слишком близко, после чего начинает на тебя охоту.</p>
        </div>
      </div>
    </section>

    <section id="section-play" class="section hidden">
      <div class="game-info-wrapper">
        <div id="info"></div>

        <div id="reveal-progress">
          <div id="reveal-text">Вас раскрыли на 0%</div>
          <div id="reveal-bar-wrapper">
            <div id="reveal-bar"></div>
          </div>
        </div>
      </div>

      <div class="game-container">
        <div id="game"></div>
      </div>
    </section>

    <section id="section-stats" class="section hidden">
      <div id="search-container">
        <input type="text" id="search-user" placeholder="Ник игрока">
        <input type="number" id="search-limit" placeholder="Количество" value="10">
        <button id="search-btn">Применить</button>
      </div>

      <div id="records"></div>
    </section>

    <section id="section-settings" class="section hidden">
      <div id="music-control">
        <h2>Настройки звуков</h2>
        <button id="toggle-music">🎵 Музыка: Вкл</button>
        <div id="volume-wrapper">
          <label for="volume-slider">Громкость</label>
          <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="0.5">
        </div>
        <audio id="bg-music" src="assets/music.mp3" loop></audio>
      </div>
    </section>
  </main>

  <div class="modal-overlay hidden">
    <div class="modal-content">
      <div class="modal-title">КОНЕЦ!</div>
      <div id="scores">Очков набрано: ${score}</div>
      <div id="levels">Уровней пройдено: ${level}</div>
      <input type="text" class="modal-input" placeholder="Введите свой ник" id="player-name" maxlength="64">
      <!-- <div id="error-message">Слишком длинный ник, введите короче</div> -->
      <div>
        <button class="modal-button" id="submit-score">Сохранить</button>
        <button class="modal-button" id="skip-submit">Скип</button>
      </div>
    </div>
  </div>

  <div class="hint hidden"></div>

  <footer id="support-footer">
    <p>Сообщать об ошибках: <a href="https://github.com/Leg15Coder/FrontendGame/issues">GitGub Issues</a></p>
    <p>Связаться с автором: <a href="https://t.me/dimka_ryaz">Телеграм</a></p>
  </footer>

  <script type="module" src="js/app.js"></script>
</body>
</html>