92 lines
No EOL
4 KiB
HTML
92 lines
No EOL
4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Zone Out</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Zone Out</h1>
|
|
<div class="settings-icon">
|
|
<i class="fas fa-cog"></i>
|
|
<div class="settings-menu">
|
|
<h2>Game Settings</h2>
|
|
<div class="difficulty">
|
|
<h3>Select Difficulty</h3>
|
|
<div class="difficulty-options">
|
|
<button class="difficulty-btn" data-difficulty="easy">Easy</button>
|
|
<button class="difficulty-btn" data-difficulty="medium">Medium</button>
|
|
<button class="difficulty-btn" data-difficulty="hard">Hard</button>
|
|
</div>
|
|
<div class="difficulty-info">
|
|
<p class="info-text easy-info">Easy: 10 squares, slower speed, infinite lives</p>
|
|
<p class="info-text medium-info">Medium: 15 squares, medium speed, 5 lives</p>
|
|
<p class="info-text hard-info">Hard: 20 squares, fast speed, 3 lives</p>
|
|
</div>
|
|
</div>
|
|
<div class="game-mode">
|
|
<h3>Game Mode</h3>
|
|
<div class="mode-options">
|
|
<button class="mode-btn" data-mode="levels">Levels</button>
|
|
<button class="mode-btn" data-mode="endless">Endless</button>
|
|
</div>
|
|
<div class="mode-info">
|
|
<p class="info-text levels-info">Levels: Clear all squares to advance. Lives matter!</p>
|
|
<p class="info-text endless-info">Endless: Keep clearing squares for high score</p>
|
|
</div>
|
|
</div>
|
|
<button id="restart-game" class="restart-btn">
|
|
<i class="fas fa-redo"></i> Restart Game
|
|
</button>
|
|
<a href="https://ronniie.dev" class="attribution" target="_blank">
|
|
Made by Ronniie <i class="fas fa-heart"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="game-stats">
|
|
<div class="stat-item score">
|
|
<i class="fas fa-star"></i>
|
|
<span class="stat-value">0</span>
|
|
</div>
|
|
<div class="stat-item lives">
|
|
<i class="fas fa-heart"></i>
|
|
<span class="stat-value">5</span>
|
|
</div>
|
|
<div class="stat-item level">
|
|
<i class="fas fa-layer-group"></i>
|
|
<span class="stat-value">1</span>
|
|
</div>
|
|
<div class="stat-item timer">
|
|
<i class="fas fa-clock"></i>
|
|
<span class="stat-value">0:00</span>
|
|
</div>
|
|
</div>
|
|
<div class="death-screen">
|
|
<div class="death-content">
|
|
<h2>Game Over!</h2>
|
|
<div class="final-stats">
|
|
<div class="stat-row">
|
|
<i class="fas fa-star"></i>
|
|
<span>Final Score: <span class="final-score">0</span></span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<i class="fas fa-layer-group"></i>
|
|
<span>Level Reached: <span class="final-level">1</span></span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<i class="fas fa-clock"></i>
|
|
<span>Time Survived: <span class="final-time">0:00</span></span>
|
|
</div>
|
|
</div>
|
|
<button class="restart-btn">
|
|
<i class="fas fa-redo"></i> Play Again
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="game.js"></script>
|
|
</body>
|
|
</html> |