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

Update

Browse Source
This commit is contained in:
Evelyn Sucitro 2025-12-01 13:52:13 +07:00
parent 2523ca5ad9
commit b7db68222c
4 changed files with 332 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

493
2048.html
View File

@ -1,238 +1,383 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<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">
<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
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
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
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
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>
</button>
<!-- Volume Sliders Panel (Hidden by default) -->
<div class="volume-panel" id="volume-panel" style="display: none;">
<!-- 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 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 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 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>
</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>
<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="best-score">0</div>
</div>
</div>
<!-- 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="best-score">0</div>
</div>
</div>
</div>
<!-- Game Board -->
<div id="board"></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>
<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>
<!-- 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>
<h2 class="tutorial-title">How to Play</h2>
<div class="tutorial-section">
<h3>🎯 Objective</h3>
<p class="objective-text">Combine tiles with the same numbers to reach <strong>2048</strong>!</p>
<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">
<!-- 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>
<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>
<!-- Best Score Display - show if NOT new record -->
<div class="best-score-display" id="best-score-display" style="display: none;">
<div class="best-score-label">High Score</div>
<div class="best-score-value" id="modal-best-score">0</div>
</div>
<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>
<!-- Best Score Display - show if NOT new record -->
<div
class="best-score-display"
id="best-score-display"
style="display: none"
>
<div class="best-score-label">High Score</div>
<div class="best-score-value" id="modal-best-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>
<!-- 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>
</div>
<script src="Score_Request.js"></script>
<script src="2048.js"></script>
</body>
</html>
</body>
</html>

13
2048.js
View File

@ -591,6 +591,16 @@ function goHome() {
------------------------ */
function showGameOver() {
const finalScore = currentScore;
// --- TAMBAHKAN BAGIAN INI (MULAI) ---
// Mengecek apakah fungsi saveScore ada (dari file Score_Request.js)
if (typeof saveScore === 'function') {
console.log("Mengirim skor ke database:", finalScore); // Debugging
saveScore(finalScore);
} else {
console.error("Fungsi saveScore tidak ditemukan! Pastikan Score_Request.js sudah diload.");
}
const isNewHighScore = finalScore >= bestScore && finalScore > 0;
const finalScoreEl = document.getElementById('final-score');
@ -972,5 +982,4 @@ function getTileColor(value) {
2048: '#ffd700'
};
return colors[value] || '#00eaff';
}
}

2
Leaderboard.php
View File

@ -1,6 +1,6 @@
<?php
header('Content-Type: application/json');
require 'Koneksi.php';
require 'Connection.php';
$query = "SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 10";
$result = $conn->query($query);

2
Score_Request.js
View File

@ -1,5 +1,5 @@
function saveScore(score) {
fetch('Save_Score.php', {
fetch('Score.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'