Ronniie/ZoneOut
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
Ronnie 2025-05-27 19:05:54 -04:00
commit 568a1cae78
4 changed files with 1666 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

92
index.html Normal file
View file

@ -0,0 +1,92 @@
<!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>