75 lines
2.6 KiB
HTML
75 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Тетрис | ООП на JS</title>
|
||
|
||
<link rel="stylesheet" href="./css/style.css">
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="tetris-wrapper">
|
||
<!-- Новый контейнер для поля и джойстика -->
|
||
<div id="game-area-container">
|
||
<canvas id="game-board" width="309" height="619"></canvas>
|
||
|
||
<!-- Джойстик для мобильных -->
|
||
<div id="joystick-controls">
|
||
<button class="joystick-btn" id="joystick-left">←</button>
|
||
<button class="joystick-btn" id="joystick-up">↻</button> <!-- ↻ - символ поворота -->
|
||
<button class="joystick-btn" id="joystick-down">↓</button>
|
||
<button class="joystick-btn" id="joystick-right">→</button>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="side-panel">
|
||
<h1>ТЕТРИС</h1>
|
||
|
||
<div class="info-box">
|
||
<span class="info-title">СЧЁТ</span>
|
||
<p id="score">0</p>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<span class="info-title">ЛИНИИ</span>
|
||
<p id="lines">0</p>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<span class="info-title">УРОВЕНЬ</span>
|
||
<p id="level">1</p>
|
||
</div>
|
||
|
||
<div class="info-box next-piece-container">
|
||
<span class="info-title">СЛЕДУЮЩАЯ</span>
|
||
<canvas id="next-piece-board" width="185" height="185"></canvas>
|
||
</div>
|
||
|
||
<button id="start-button" class="game-button">СТАРТ</button>
|
||
</aside>
|
||
</div>
|
||
|
||
<div id="game-overlay" class="hidden">
|
||
<div id="game-modal">
|
||
<h2 id="modal-title"></h2>
|
||
<p id="modal-text"></p>
|
||
<button id="modal-button" class="game-button">СТАРТ</button>
|
||
</div>
|
||
</div>
|
||
<script src="./js/utils.js"></script>
|
||
<script src="./js/eventBus.js"></script>
|
||
<script src="./js/inputHandler.js"></script>
|
||
<script src="./js/uiManager.js"></script>
|
||
<script src="./js/grid.js"></script>
|
||
<script src="./js/pieceFactory.js"></script>
|
||
<script src="./js/renderer.js"></script>
|
||
<script src="./js/animationManager.js"></script>
|
||
<script src="./js/game.js"></script>
|
||
<script src="./js/main.js"></script>
|
||
</body>
|
||
</html> |