2526-web/kelompok06-2048
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2048

Browse Source
This commit is contained in:
Jevinca Marvella 2025-12-02 20:19:55 +07:00
parent f8e450742c
commit e4c4a3795f
3 changed files with 87 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
2048.css
View File

@ -1410,7 +1410,26 @@ h1 {
position: fixed; position: fixed;
top: clamp(10px, 2vh, 20px); top: clamp(10px, 2vh, 20px);
left: clamp(10px, 2vw, 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 */ /* Main Sound Button */
@ -1482,9 +1501,7 @@ h1 {
/* Volume Panel */ /* Volume Panel */
.volume-panel { .volume-panel {
position: absolute; display: none;
top: clamp(46px, 8vh, 60px);
left: 0;
background: linear-gradient(145deg, rgba(20, 0, 40, 0.98), rgba(30, 0, 50, 0.98)); background: linear-gradient(145deg, rgba(20, 0, 40, 0.98), rgba(30, 0, 50, 0.98));
backdrop-filter: blur(25px); backdrop-filter: blur(25px);
border: 2px solid rgba(0, 217, 255, 0.4); border: 2px solid rgba(0, 217, 255, 0.4);
@ -1496,6 +1513,11 @@ h1 {
0 0 50px rgba(0, 217, 255, 0.3), 0 0 50px rgba(0, 217, 255, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1); inset 0 1px 0 rgba(255, 255, 255, 0.1);
animation: slideDown 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); animation: slideDown 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 102;
}
.volume-panel.active {
display: block;
} }
@keyframes slideDown { @keyframes slideDown {
@ -1639,4 +1661,3 @@ h1 {
font-size: 11px; font-size: 11px;
} }
} }

143
2048.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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="stylesheet" href="2048.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@ -20,13 +20,12 @@
<!-- SOUND CONTROL - KIRI ATAS --> <!-- SOUND CONTROL - KIRI ATAS -->
<div class="sound-control-container"> <div class="sound-control-container">
<!-- Main Sound Button --> <!-- Backdrop Overlay (Hidden by default) -->
<button <div class="volume-backdrop" id="volume-backdrop"></div>
class="icon-btn btn-sound-main"
id="btn-sound-main" <!-- Main Sound Button - HAPUS class "icon-btn" -->
title="Sound Settings" <button class="btn-sound-main" id="btn-sound-main" title="Sound Settings">
> <!-- Icon Full Sound (avg ≥ 60%) -->
<!-- Icon Full Sound (all ON) -->
<svg <svg
class="sound-full" class="sound-full"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -35,11 +34,10 @@
stroke-width="2.5" stroke-width="2.5"
> >
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" /> <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
<path <path d="M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14" />
d="M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14"
/>
</svg> </svg>
<!-- Icon Medium Sound (some muted) -->
<!-- Icon Medium Sound (avg ≥ 30% && < 60%) -->
<svg <svg
class="sound-medium" class="sound-medium"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -52,7 +50,7 @@
<path d="M15.54 8.46a5 5 0 0 1 0 7.07" /> <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
</svg> </svg>
<!-- Icon Low Sound (mostly muted) --> <!-- Icon Low Sound (avg > 0% && < 30%) -->
<svg <svg
class="sound-low" class="sound-low"
viewBox="0 0 24 24" 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" /> <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
</svg> </svg>
<!-- Icon Muted (all OFF) --> <!-- Icon Muted (all volumes = 0%) -->
<svg <svg
class="sound-muted" class="sound-muted"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -80,20 +78,18 @@
</button> </button>
<!-- Volume Sliders Panel (Hidden by default) --> <!-- 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 --> <!-- Music Volume -->
<div class="volume-item"> <div class="volume-item">
<div class="volume-header"> <div class="volume-header">
<svg <svg
class="volume-icon" class="volume-icon icon-music"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-width="2" stroke-width="2"
> >
<path <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" />
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> </svg>
<span class="volume-label">Music</span> <span class="volume-label">Music</span>
<span class="volume-value" id="vol-music-display">25%</span> <span class="volume-value" id="vol-music-display">25%</span>
@ -112,7 +108,7 @@
<div class="volume-item"> <div class="volume-item">
<div class="volume-header"> <div class="volume-header">
<svg <svg
class="volume-icon" class="volume-icon icon-pop"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
@ -138,15 +134,13 @@
<div class="volume-item"> <div class="volume-item">
<div class="volume-header"> <div class="volume-header">
<svg <svg
class="volume-icon" class="volume-icon icon-merge"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-width="2" stroke-width="2"
> >
<path <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" />
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> </svg>
<span class="volume-label">Merge SFX</span> <span class="volume-label">Merge SFX</span>
<span class="volume-value" id="vol-merge-display">100%</span> <span class="volume-value" id="vol-merge-display">100%</span>
@ -162,13 +156,10 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Top Right Controls --> <!-- Top Right Controls -->
<div class="top-controls"> <div class="top-controls">
<button <button class="icon-btn btn-tutorial" id="btn-tutorial" title="How to Play">
class="icon-btn btn-tutorial"
id="btn-tutorial"
title="How to Play"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@ -180,20 +171,14 @@
<line x1="12" y1="17" x2="12.01" y2="17" /> <line x1="12" y1="17" x2="12.01" y2="17" />
</svg> </svg>
</button> </button>
<button <button class="icon-btn btn-restart-icon" id="btn-restart" title="Restart Game">
class="icon-btn btn-restart-icon"
id="btn-restart"
title="Restart Game"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-width="2.5" stroke-width="2.5"
> >
<path <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" />
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> </svg>
</button> </button>
</div> </div>
@ -223,12 +208,7 @@
<div class="tutorial-overlay" id="tutorial-overlay" style="display: none"> <div class="tutorial-overlay" id="tutorial-overlay" style="display: none">
<div class="tutorial-modal"> <div class="tutorial-modal">
<button class="modal-close" id="close-tutorial"> <button class="modal-close" id="close-tutorial">
<svg <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
>
<line x1="18" y1="6" x2="6" y2="18" /> <line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" />
</svg> </svg>
@ -237,11 +217,10 @@
<h2 class="tutorial-title">How to Play</h2> <h2 class="tutorial-title">How to Play</h2>
<div class="tutorial-content"> <div class="tutorial-content">
<!-- PC Controls - Hidden on Mobile --> <!-- PC Controls -->
<div class="tutorial-section pc-controls"> <div class="tutorial-section pc-controls">
<h3>🖥️ PC Controls</h3> <h3>🖥️ PC Controls</h3>
<div class="keys-container"> <div class="keys-container">
<!-- WASD Keys -->
<div class="keys-group"> <div class="keys-group">
<div class="keys-grid-wasd"> <div class="keys-grid-wasd">
<div class="key-empty"></div> <div class="key-empty"></div>
@ -253,10 +232,7 @@
</div> </div>
<p class="keys-label">WASD</p> <p class="keys-label">WASD</p>
</div> </div>
<div class="keys-separator">or</div> <div class="keys-separator">or</div>
<!-- Arrow Keys -->
<div class="keys-group"> <div class="keys-group">
<div class="keys-grid-arrow"> <div class="keys-grid-arrow">
<div class="key-empty"></div> <div class="key-empty"></div>
@ -271,7 +247,7 @@
</div> </div>
</div> </div>
<!-- Mobile Controls - Hidden on PC --> <!-- Mobile Controls -->
<div class="tutorial-section mobile-controls"> <div class="tutorial-section mobile-controls">
<h3>📱 Mobile Controls</h3> <h3>📱 Mobile Controls</h3>
<div class="swipe-demo"> <div class="swipe-demo">
@ -283,8 +259,7 @@
<div class="tutorial-section"> <div class="tutorial-section">
<h3>🎯 Objective</h3> <h3>🎯 Objective</h3>
<p class="objective-text"> <p class="objective-text">
Combine tiles with the same numbers to reach Combine tiles with the same numbers to reach <strong>2048</strong>!
<strong>2048</strong>!
</p> </p>
</div> </div>
</div> </div>
@ -294,84 +269,39 @@
<!-- Game Over Modal --> <!-- Game Over Modal -->
<div class="game-over-overlay" id="game-over-overlay" style="display: none"> <div class="game-over-overlay" id="game-over-overlay" style="display: none">
<div class="game-over-modal"> <div class="game-over-modal">
<!-- Close Button (X) -->
<button class="game-over-close" id="game-over-close"> <button class="game-over-close" id="game-over-close">
<svg <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
>
<line x1="18" y1="6" x2="6" y2="18" /> <line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" />
</svg> </svg>
</button> </button>
<!-- Title -->
<div class="game-over-title">No More Moves!</div> <div class="game-over-title">No More Moves!</div>
<div class="game-over-subtitle">Game Over</div> <div class="game-over-subtitle">Game Over</div>
<!-- Score Section -->
<div class="game-over-score"> <div class="game-over-score">
<div class="game-over-score-label">Your Score</div> <div class="game-over-score-label">Your Score</div>
<div class="game-over-score-value" id="final-score">0</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">
<div 🏆 New High Score!
class="new-high-score"
id="new-high-score-badge"
style="display: none"
>
New High Score
</div> </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-label">High Score</div>
<div class="high-score-value" id="modal-high-score">0</div> <div class="high-score-value" id="modal-high-score">0</div>
</div> </div>
</div> </div>
<!-- Action Buttons - ICON ONLY -->
<div class="game-over-buttons"> <div class="game-over-buttons">
<!-- Restart Button --> <button class="btn-game-icon btn-restart-game" id="btn-play-again" title="Restart Game">
<button <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
class="btn-game-icon btn-restart-game" <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" />
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> </svg>
</button> </button>
<!-- Home Button --> <button class="btn-game-icon btn-home-game" id="btn-home" title="Back to Home">
<button <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
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" /> <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" /> <polyline points="9 22 9 12 15 12 15 22" />
</svg> </svg>
@ -379,6 +309,7 @@
</div> </div>
</div> </div>
</div> </div>
<script src="Score_Request.js"></script> <script src="Score_Request.js"></script>
<script src="2048.js"></script> <script src="2048.js"></script>
<script src="Audio_2048.js"></script> <script src="Audio_2048.js"></script>
@ -388,4 +319,4 @@
<script src="2048_Controls.js"></script> <script src="2048_Controls.js"></script>
<script src="Main_2048.js"></script> <script src="Main_2048.js"></script>
</body> </body>
</html> </html>

28
Audio_2048.js
View File

@ -111,17 +111,37 @@ function initVolumeControl() {
function setupVolumePanelEvents() { function setupVolumePanelEvents() {
const btnSoundMain = document.getElementById('btn-sound-main'); const btnSoundMain = document.getElementById('btn-sound-main');
const volumePanel = document.getElementById('volume-panel'); const volumePanel = document.getElementById('volume-panel');
const volumeBackdrop = document.getElementById('volume-backdrop');
if (btnSoundMain && volumePanel) { if (btnSoundMain && volumePanel) {
btnSoundMain.addEventListener('click', (e) => { btnSoundMain.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
const isVisible = volumePanel.style.display === 'block'; const isActive = volumePanel.classList.contains('active');
volumePanel.style.display = isVisible ? 'none' : 'block';
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) => { document.addEventListener('click', (e) => {
if (!volumePanel.contains(e.target) && !btnSoundMain.contains(e.target)) { if (!volumePanel.contains(e.target) &&
volumePanel.style.display = 'none'; !btnSoundMain.contains(e.target) &&
(!volumeBackdrop || !volumeBackdrop.contains(e.target))) {
volumePanel.classList.remove('active');
if (volumeBackdrop) volumeBackdrop.classList.remove('active');
} }
}); });