Files
NeonPlaformer/index.html

142 lines
5.9 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🚀 ПЛАТФОРМЕР - Приключение</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="loading">
<h2>ЗАГРУЗКА...</h2>
<div class="loader"></div>
</div>
<!-- Main Menu -->
<div id="main-menu">
<h1>🚀 ПЛАТФОРМЕР</h1>
<div class="menu-buttons">
<button class="menu-btn" onclick="startGame()">🎮 ИГРАТЬ</button>
<button class="menu-btn" onclick="showSettings()">⚙️ НАСТРОЙКИ</button>
<button class="menu-btn" onclick="showAbout()"> ОБ ИГРЕ</button>
</div>
<p class="menu-hint">Нажмите любую клавишу или кнопку для старта</p>
</div>
<!-- Settings Modal -->
<div id="settings-modal" class="modal">
<div class="modal-content">
<h2>⚙️ НАСТРОЙКИ</h2>
<div class="setting-item">
<span>🔊 Звук</span>
<button id="sound-toggle" onclick="toggleSound()">ВКЛ</button>
</div>
<div class="setting-item">
<span>🖥️ Полный экран</span>
<button onclick="toggleFullscreen()">ВКЛ</button>
</div>
<button class="menu-btn back-btn" onclick="hideSettings()">← НАЗАД</button>
</div>
</div>
<!-- About Modal -->
<div id="about-modal" class="modal">
<div class="modal-content">
<h2> ОБ ИГРЕ</h2>
<p>Платформер v2.0</p>
<p>Создано с ❤️</p>
<p>Управление: ← → движение, Пробел - прыжок</p>
<button class="menu-btn back-btn" onclick="hideAbout()">← НАЗАД</button>
</div>
</div>
<div class="game-wrapper" id="game-wrapper" style="display: none;">
<div class="game-container">
<h1>🚀 ПЛАТФОРМЕР</h1>
<canvas id="gameCanvas" width="900" height="550"></canvas>
<div class="controls">
Управление: <span></span> <span></span> движение | <span>Пробел</span> прыжок | <span>R</span> перезапуск | <span>Esc</span> пауза
</div>
<!-- Mobile Controls -->
<div class="mobile-controls">
<button class="mobile-btn" id="btn-left" ontouchstart="keys.left=true" ontouchend="keys.left=false"></button>
<button class="mobile-btn" id="btn-jump" ontouchstart="keys.up=true" ontouchend="keys.up=false">⬆️</button>
<button class="mobile-btn" id="btn-right" ontouchstart="keys.right=true" ontouchend="keys.right=false"></button>
</div>
</div>
<div class="hud">
<div class="hud-group">
<div class="hud-item">
<span class="label">❤️</span>
<div class="lives-display" id="lives"></div>
</div>
</div>
<div class="level-display" id="level">УРОВЕНЬ 1: НАЧАЛО</div>
<div class="hud-group">
<div class="hud-item">
<span class="label">💰</span>
<span class="value gold" id="score">0</span>
</div>
<div class="hud-item">
<span class="label">⏱️</span>
<span class="value" id="timer">0</span>
</div>
<div class="hud-item combo-display" id="combo">
<span class="combo-text"></span>
</div>
</div>
</div>
<div class="powerups">
<div class="powerup-badge" id="powerup-double">
<span class="icon">⬆️</span> Двойной прыжок
</div>
<div class="powerup-badge" id="powerup-speed">
<span class="icon"></span> Ускорение
</div>
<div class="powerup-badge" id="powerup-invincibility">
<span class="icon">🛡️</span> Неуязвимость
</div>
</div>
<div id="message">
<h2 id="messageTitle">🎉 ПОБЕДА!</h2>
<div class="stats" id="messageStats"></div>
<button onclick="handleMessageButton()">Играть снова</button>
</div>
<div id="pause-menu">
<h2>⏸️ ПАУЗА</h2>
<button onclick="togglePause(); gameRunning=true;">Продолжить</button>
<button onclick="restartGame()">Начать заново</button>
<button onclick="exitToMenu()">В главное меню</button>
</div>
</div>
<!-- Game Scripts -->
<script src="js/sound.js"></script>
<script src="js/entities.js"></script>
<script src="js/levels.js"></script>
<script src="js/game.js"></script>
<script>
// Hide loading, show menu when ready
window.addEventListener('load', () => {
setTimeout(() => {
document.getElementById('loading').style.display = 'none';
document.getElementById('main-menu').style.display = 'flex';
}, 500);
});
// Keyboard shortcut to start game
document.addEventListener('keydown', (e) => {
if (document.getElementById('main-menu').style.display !== 'none') {
if (e.code === 'Space' || e.code === 'Enter') {
startGame();
}
}
});
</script>
</body>
</html>