148 lines
No EOL
7.4 KiB
HTML
148 lines
No EOL
7.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>ZoneOut | Fast-paced Square Collection Game</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/png" sizes="32x32" href="https://cdn-icons-png.flaticon.com/512/8732/8732022.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="https://cdn-icons-png.flaticon.com/512/8732/8732022.png">
|
|
<link rel="apple-touch-icon" href="https://cdn-icons-png.flaticon.com/512/8732/8732022.png">
|
|
|
|
<!-- Theme Colors -->
|
|
<meta name="theme-color" content="#0f172a">
|
|
<meta name="msapplication-TileColor" content="#0f172a">
|
|
<meta name="msapplication-navbutton-color" content="#0f172a">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="#0f172a">
|
|
|
|
<!-- Primary Meta Tags -->
|
|
<meta name="title" content="ZoneOut | Fast-paced Square Collection Game">
|
|
<meta name="description" content="Test your reflexes and strategy in this fast-paced square collection game. Select squares, build combos, and achieve the highest score!">
|
|
<meta name="keywords" content="square game, collection game, arcade game, reflex game, combo game, browser game">
|
|
<meta name="author" content="Ronniie">
|
|
<meta name="robots" content="index, follow">
|
|
<meta name="language" content="English">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="ZoneOut | Fast-paced Square Collection Game">
|
|
<meta property="og:description" content="Test your reflexes and strategy in this fast-paced square collection game. Select squares, build combos, and achieve the highest score!">
|
|
<meta property="og:image" content="https://cdn-icons-png.flaticon.com/512/8732/8732022.png">
|
|
<meta property="og:site_name" content="ZoneOut">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary">
|
|
<meta property="twitter:title" content="ZoneOut | Fast-paced Square Collection Game">
|
|
<meta property="twitter:description" content="Test your reflexes and strategy in this fast-paced square collection game. Select squares, build combos, and achieve the highest score!">
|
|
<meta property="twitter:image" content="https://cdn-icons-png.flaticon.com/512/8732/8732022.png">
|
|
|
|
<!-- Google Fonts -->
|
|
<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=Poppins:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
|
|
<!-- styles -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Zone Out</h1>
|
|
<div class="notification-banner">
|
|
<div class="notification-content"></div>
|
|
</div>
|
|
<div class="settings-icon">
|
|
<i class="fas fa-cog"></i>
|
|
<div class="settings-menu">
|
|
<h2>Game Settings</h2>
|
|
<div class="settings-grid">
|
|
<div class="difficulty">
|
|
<h3>Select Difficulty</h3>
|
|
<div class="difficulty-options">
|
|
<button class="difficulty-btn" data-difficulty="easy"><i class="fas fa-leaf"></i> Easy</button>
|
|
<button class="difficulty-btn" data-difficulty="medium"><i class="fas fa-bolt"></i> Medium</button>
|
|
<button class="difficulty-btn" data-difficulty="hard"><i class="fas fa-skull-crossbones"></i> 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"><i class="fas fa-layer-group"></i> Levels</button>
|
|
<button class="mode-btn" data-mode="endless"><i class="fas fa-infinity"></i> 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>
|
|
</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 class="game-info">
|
|
<div class="mode-badge">
|
|
<i class="fas fa-gamepad"></i>
|
|
<span class="mode-text">Levels</span>
|
|
</div>
|
|
<div class="difficulty-badge">
|
|
<i class="fas fa-trophy"></i>
|
|
<span class="difficulty-text">Medium</span>
|
|
</div>
|
|
</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> |