392 lines
12 KiB
HTML
392 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>2048</title>
|
|
<link rel="stylesheet" href="2048.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=Poppins:wght@400;600;700;800&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<!-- Background Effects -->
|
|
<div class="particles" aria-hidden="true"></div>
|
|
<div class="starfield" aria-hidden="true"></div>
|
|
<div class="cursor-light" aria-hidden="true"></div>
|
|
|
|
<!-- SOUND CONTROL - KIRI ATAS -->
|
|
<div class="sound-control-container">
|
|
<!-- Main Sound Button -->
|
|
<button
|
|
class="icon-btn btn-sound-main"
|
|
id="btn-sound-main"
|
|
title="Sound Settings"
|
|
>
|
|
<!-- Icon Full Sound (all ON) -->
|
|
<svg
|
|
class="sound-full"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
>
|
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
|
|
<path
|
|
d="M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14"
|
|
/>
|
|
</svg>
|
|
<!-- Icon Medium Sound (some muted) -->
|
|
<svg
|
|
class="sound-medium"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
style="display: none"
|
|
>
|
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
|
|
<path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
|
|
</svg>
|
|
|
|
<!-- Icon Low Sound (mostly muted) -->
|
|
<svg
|
|
class="sound-low"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
style="display: none"
|
|
>
|
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
|
|
</svg>
|
|
|
|
<!-- Icon Muted (all OFF) -->
|
|
<svg
|
|
class="sound-muted"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
style="display: none"
|
|
>
|
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
|
|
<line x1="23" y1="9" x2="17" y2="15" />
|
|
<line x1="17" y1="9" x2="23" y2="15" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Volume Sliders Panel (Hidden by default) -->
|
|
<div class="volume-panel" id="volume-panel" style="display: none">
|
|
<!-- Music Volume -->
|
|
<div class="volume-item">
|
|
<div class="volume-header">
|
|
<svg
|
|
class="volume-icon"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M9 18V5l12-2v13M9 18c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm12-2c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"
|
|
/>
|
|
</svg>
|
|
<span class="volume-label">Music</span>
|
|
<span class="volume-value" id="vol-music-display">25%</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
class="volume-slider"
|
|
id="vol-music"
|
|
min="0"
|
|
max="100"
|
|
value="25"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Pop SFX Volume -->
|
|
<div class="volume-item">
|
|
<div class="volume-header">
|
|
<svg
|
|
class="volume-icon"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M8 12h8M12 8v8" />
|
|
</svg>
|
|
<span class="volume-label">Pop SFX</span>
|
|
<span class="volume-value" id="vol-pop-display">90%</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
class="volume-slider"
|
|
id="vol-pop"
|
|
min="0"
|
|
max="100"
|
|
value="90"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Merge SFX Volume -->
|
|
<div class="volume-item">
|
|
<div class="volume-header">
|
|
<svg
|
|
class="volume-icon"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
<span class="volume-label">Merge SFX</span>
|
|
<span class="volume-value" id="vol-merge-display">100%</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
class="volume-slider"
|
|
id="vol-merge"
|
|
min="0"
|
|
max="100"
|
|
value="100"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Top Right Controls -->
|
|
<div class="top-controls">
|
|
<button
|
|
class="icon-btn btn-tutorial"
|
|
id="btn-tutorial"
|
|
title="How to Play"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
|
<line x1="12" y1="17" x2="12.01" y2="17" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
class="icon-btn btn-restart-icon"
|
|
id="btn-restart"
|
|
title="Restart Game"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
>
|
|
<path
|
|
d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Game Container -->
|
|
<div class="game-container">
|
|
<!-- Header: Title + Scores -->
|
|
<div class="game-header">
|
|
<h1>2048</h1>
|
|
<div class="score-container">
|
|
<div class="score-box">
|
|
<div class="score-label">SCORE</div>
|
|
<div class="score-value" id="score">0</div>
|
|
</div>
|
|
<div class="score-box">
|
|
<div class="score-label">HIGH SCORE</div>
|
|
<div class="score-value" id="high-score">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Game Board -->
|
|
<div id="board"></div>
|
|
</div>
|
|
|
|
<!-- Tutorial Modal -->
|
|
<div class="tutorial-overlay" id="tutorial-overlay" style="display: none">
|
|
<div class="tutorial-modal">
|
|
<button class="modal-close" id="close-tutorial">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18" />
|
|
<line x1="6" y1="6" x2="18" y2="18" />
|
|
</svg>
|
|
</button>
|
|
|
|
<h2 class="tutorial-title">How to Play</h2>
|
|
|
|
<div class="tutorial-content">
|
|
<!-- PC Controls - Hidden on Mobile -->
|
|
<div class="tutorial-section pc-controls">
|
|
<h3>🖥️ PC Controls</h3>
|
|
<div class="keys-container">
|
|
<!-- WASD Keys -->
|
|
<div class="keys-group">
|
|
<div class="keys-grid-wasd">
|
|
<div class="key-empty"></div>
|
|
<div class="key-box">W</div>
|
|
<div class="key-empty"></div>
|
|
<div class="key-box">A</div>
|
|
<div class="key-box">S</div>
|
|
<div class="key-box">D</div>
|
|
</div>
|
|
<p class="keys-label">WASD</p>
|
|
</div>
|
|
|
|
<div class="keys-separator">or</div>
|
|
|
|
<!-- Arrow Keys -->
|
|
<div class="keys-group">
|
|
<div class="keys-grid-arrow">
|
|
<div class="key-empty"></div>
|
|
<div class="key-box">↑</div>
|
|
<div class="key-empty"></div>
|
|
<div class="key-box">←</div>
|
|
<div class="key-box">↓</div>
|
|
<div class="key-box">→</div>
|
|
</div>
|
|
<p class="keys-label">Arrow Keys</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Controls - Hidden on PC -->
|
|
<div class="tutorial-section mobile-controls">
|
|
<h3>📱 Mobile Controls</h3>
|
|
<div class="swipe-demo">
|
|
<div class="swipe-icon">👆</div>
|
|
<p>Swipe in any direction</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tutorial-section">
|
|
<h3>🎯 Objective</h3>
|
|
<p class="objective-text">
|
|
Combine tiles with the same numbers to reach
|
|
<strong>2048</strong>!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Game Over Modal -->
|
|
<div class="game-over-overlay" id="game-over-overlay" style="display: none">
|
|
<div class="game-over-modal">
|
|
<!-- Close Button (X) -->
|
|
<button class="game-over-close" id="game-over-close">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18" />
|
|
<line x1="6" y1="6" x2="18" y2="18" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Title -->
|
|
<div class="game-over-title">No More Moves!</div>
|
|
<div class="game-over-subtitle">Game Over</div>
|
|
|
|
<!-- Score Section -->
|
|
<div class="game-over-score">
|
|
<div class="game-over-score-label">Your Score</div>
|
|
<div class="game-over-score-value" id="final-score">0</div>
|
|
|
|
<!-- New High Score Badge - show if new record -->
|
|
<div
|
|
class="new-high-score"
|
|
id="new-high-score-badge"
|
|
style="display: none"
|
|
>
|
|
New High Score
|
|
</div>
|
|
|
|
<!-- high Score Display - show if NOT new record -->
|
|
<div
|
|
class="high-score-display"
|
|
id="high-score-display"
|
|
style="display: none"
|
|
>
|
|
<div class="high-score-label">High Score</div>
|
|
<div class="high-score-value" id="modal-high-score">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons - ICON ONLY -->
|
|
<div class="game-over-buttons">
|
|
<!-- Restart Button -->
|
|
<button
|
|
class="btn-game-icon btn-restart-game"
|
|
id="btn-play-again"
|
|
title="Restart Game"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Home Button -->
|
|
<button
|
|
class="btn-game-icon btn-home-game"
|
|
id="btn-home"
|
|
title="Back to Home"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
|
<polyline points="9 22 9 12 15 12 15 22" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="Score_Request.js"></script>
|
|
<script src="2048.js"></script>
|
|
<script src="Audio_2048.js"></script>
|
|
<script src="Visual_Effects_2048.js"></script>
|
|
<script src="User_Interface_2048.js"></script>
|
|
<script src="2048_Logic.js"></script>
|
|
<script src="2048_Controls.js"></script>
|
|
<script src="Main_2048.js"></script>
|
|
</body>
|
|
</html>
|