2048
This commit is contained in:
Jevinca Marvella
parent
f8e450742c
commit
e4c4a3795f
31
2048.css
31
2048.css
@ -1410,7 +1410,26 @@ h1 {
|
||||
position: fixed;
|
||||
top: clamp(10px, 2vh, 20px);
|
||||
left: clamp(10px, 2vw, 20px);
|
||||
z-index: 100;
|
||||
z-index: 101;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* Backdrop Overlay untuk Mobile */
|
||||
.volume-backdrop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 99;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.volume-backdrop.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Main Sound Button */
|
||||
@ -1482,9 +1501,7 @@ h1 {
|
||||
|
||||
/* Volume Panel */
|
||||
.volume-panel {
|
||||
position: absolute;
|
||||
top: clamp(46px, 8vh, 60px);
|
||||
left: 0;
|
||||
display: none;
|
||||
background: linear-gradient(145deg, rgba(20, 0, 40, 0.98), rgba(30, 0, 50, 0.98));
|
||||
backdrop-filter: blur(25px);
|
||||
border: 2px solid rgba(0, 217, 255, 0.4);
|
||||
@ -1496,6 +1513,11 @@ h1 {
|
||||
0 0 50px rgba(0, 217, 255, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
animation: slideDown 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
z-index: 102;
|
||||
}
|
||||
|
||||
.volume-panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
@ -1639,4 +1661,3 @@ h1 {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
141
2048.html
141
2048.html
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>2048</title>
|
||||
<title>2048 - Neon Edition</title>
|
||||
<link rel="stylesheet" href="2048.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
@ -20,13 +20,12 @@
|
||||
|
||||
<!-- 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) -->
|
||||
<!-- Backdrop Overlay (Hidden by default) -->
|
||||
<div class="volume-backdrop" id="volume-backdrop"></div>
|
||||
|
||||
<!-- Main Sound Button - HAPUS class "icon-btn" -->
|
||||
<button class="btn-sound-main" id="btn-sound-main" title="Sound Settings">
|
||||
<!-- Icon Full Sound (avg ≥ 60%) -->
|
||||
<svg
|
||||
class="sound-full"
|
||||
viewBox="0 0 24 24"
|
||||
@ -35,11 +34,10 @@
|
||||
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"
|
||||
/>
|
||||
<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) -->
|
||||
|
||||
<!-- Icon Medium Sound (avg ≥ 30% && < 60%) -->
|
||||
<svg
|
||||
class="sound-medium"
|
||||
viewBox="0 0 24 24"
|
||||
@ -52,7 +50,7 @@
|
||||
<path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
|
||||
</svg>
|
||||
|
||||
<!-- Icon Low Sound (mostly muted) -->
|
||||
<!-- Icon Low Sound (avg > 0% && < 30%) -->
|
||||
<svg
|
||||
class="sound-low"
|
||||
viewBox="0 0 24 24"
|
||||
@ -64,7 +62,7 @@
|
||||
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
|
||||
</svg>
|
||||
|
||||
<!-- Icon Muted (all OFF) -->
|
||||
<!-- Icon Muted (all volumes = 0%) -->
|
||||
<svg
|
||||
class="sound-muted"
|
||||
viewBox="0 0 24 24"
|
||||
@ -80,20 +78,18 @@
|
||||
</button>
|
||||
|
||||
<!-- Volume Sliders Panel (Hidden by default) -->
|
||||
<div class="volume-panel" id="volume-panel" style="display: none">
|
||||
<div class="volume-panel" id="volume-panel">
|
||||
<!-- Music Volume -->
|
||||
<div class="volume-item">
|
||||
<div class="volume-header">
|
||||
<svg
|
||||
class="volume-icon"
|
||||
class="volume-icon icon-music"
|
||||
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"
|
||||
/>
|
||||
<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>
|
||||
@ -112,7 +108,7 @@
|
||||
<div class="volume-item">
|
||||
<div class="volume-header">
|
||||
<svg
|
||||
class="volume-icon"
|
||||
class="volume-icon icon-pop"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
@ -138,15 +134,13 @@
|
||||
<div class="volume-item">
|
||||
<div class="volume-header">
|
||||
<svg
|
||||
class="volume-icon"
|
||||
class="volume-icon icon-merge"
|
||||
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"
|
||||
/>
|
||||
<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>
|
||||
@ -162,13 +156,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top Right Controls -->
|
||||
<div class="top-controls">
|
||||
<button
|
||||
class="icon-btn btn-tutorial"
|
||||
id="btn-tutorial"
|
||||
title="How to Play"
|
||||
>
|
||||
<button class="icon-btn btn-tutorial" id="btn-tutorial" title="How to Play">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
@ -180,20 +171,14 @@
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
@ -223,12 +208,7 @@
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
@ -237,11 +217,10 @@
|
||||
<h2 class="tutorial-title">How to Play</h2>
|
||||
|
||||
<div class="tutorial-content">
|
||||
<!-- PC Controls - Hidden on Mobile -->
|
||||
<!-- PC Controls -->
|
||||
<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>
|
||||
@ -253,10 +232,7 @@
|
||||
</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>
|
||||
@ -271,7 +247,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Controls - Hidden on PC -->
|
||||
<!-- Mobile Controls -->
|
||||
<div class="tutorial-section mobile-controls">
|
||||
<h3>📱 Mobile Controls</h3>
|
||||
<div class="swipe-demo">
|
||||
@ -283,8 +259,7 @@
|
||||
<div class="tutorial-section">
|
||||
<h3>🎯 Objective</h3>
|
||||
<p class="objective-text">
|
||||
Combine tiles with the same numbers to reach
|
||||
<strong>2048</strong>!
|
||||
Combine tiles with the same numbers to reach <strong>2048</strong>!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -294,84 +269,39 @@
|
||||
<!-- 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"
|
||||
>
|
||||
<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 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-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"
|
||||
/>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
@ -379,6 +309,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="Score_Request.js"></script>
|
||||
<script src="2048.js"></script>
|
||||
<script src="Audio_2048.js"></script>
|
||||
|
||||
@ -111,17 +111,37 @@ function initVolumeControl() {
|
||||
function setupVolumePanelEvents() {
|
||||
const btnSoundMain = document.getElementById('btn-sound-main');
|
||||
const volumePanel = document.getElementById('volume-panel');
|
||||
const volumeBackdrop = document.getElementById('volume-backdrop');
|
||||
|
||||
if (btnSoundMain && volumePanel) {
|
||||
btnSoundMain.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const isVisible = volumePanel.style.display === 'block';
|
||||
volumePanel.style.display = isVisible ? 'none' : 'block';
|
||||
const isActive = volumePanel.classList.contains('active');
|
||||
|
||||
if (isActive) {
|
||||
volumePanel.classList.remove('active');
|
||||
if (volumeBackdrop) volumeBackdrop.classList.remove('active');
|
||||
} else {
|
||||
volumePanel.classList.add('active');
|
||||
if (volumeBackdrop) volumeBackdrop.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Close when clicking backdrop
|
||||
if (volumeBackdrop) {
|
||||
volumeBackdrop.addEventListener('click', () => {
|
||||
volumePanel.classList.remove('active');
|
||||
volumeBackdrop.classList.remove('active');
|
||||
});
|
||||
}
|
||||
|
||||
// Close when clicking outside (desktop)
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!volumePanel.contains(e.target) && !btnSoundMain.contains(e.target)) {
|
||||
volumePanel.style.display = 'none';
|
||||
if (!volumePanel.contains(e.target) &&
|
||||
!btnSoundMain.contains(e.target) &&
|
||||
(!volumeBackdrop || !volumeBackdrop.contains(e.target))) {
|
||||
volumePanel.classList.remove('active');
|
||||
if (volumeBackdrop) volumeBackdrop.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user