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

Compare commits

base: 2526-web:bd4e739839324e52895f1628fa32cd2f31c98f36
Branches Tags
2526-web:main
...
compare: 2526-web:b7db68222c45fdf2c9a648918dbfacdef9ced6e2
Branches Tags
2526-web:main

2 Commits
bd4e739839 ... b7db68222c

Author SHA1 Message Date
Evelyn Sucitro
b7db68222c Update 2025-12-01 13:52:13 +07:00
Evelyn Sucitro
2523ca5ad9 Database 2025-12-01 13:24:30 +07:00
5 changed files with 334 additions and 180 deletions
Show Stats Expand all files Collapse all files

221
2048.html
View File

@ -1,13 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<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</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 />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<!-- Background Effects --> <!-- Background Effects -->
@ -18,23 +21,56 @@
<!-- SOUND CONTROL - KIRI ATAS --> <!-- SOUND CONTROL - KIRI ATAS -->
<div class="sound-control-container"> <div class="sound-control-container">
<!-- Main Sound Button --> <!-- Main Sound Button -->
<button class="icon-btn btn-sound-main" id="btn-sound-main" title="Sound Settings"> <button
class="icon-btn btn-sound-main"
id="btn-sound-main"
title="Sound Settings"
>
<!-- Icon Full Sound (all ON) --> <!-- Icon Full Sound (all ON) -->
<svg class="sound-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> <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" /> <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> </svg>
<!-- Icon Medium Sound (some muted) --> <!-- 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;"> <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" /> <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" /> <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
</svg> </svg>
<!-- Icon Low Sound (mostly muted) --> <!-- 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;"> <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" /> <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 OFF) -->
<svg class="sound-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="display: none;"> <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" /> <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="23" y1="9" x2="17" y2="15" />
<line x1="17" y1="9" x2="23" y2="15" /> <line x1="17" y1="9" x2="23" y2="15" />
@ -42,57 +78,120 @@
</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" style="display: none">
<!-- Music Volume --> <!-- Music Volume -->
<div class="volume-item"> <div class="volume-item">
<div class="volume-header"> <div class="volume-header">
<svg class="volume-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg
<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"/> 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> </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>
</div> </div>
<input type="range" class="volume-slider" id="vol-music" min="0" max="100" value="25"> <input
type="range"
class="volume-slider"
id="vol-music"
min="0"
max="100"
value="25"
/>
</div> </div>
<!-- Pop SFX Volume --> <!-- Pop SFX Volume -->
<div class="volume-item"> <div class="volume-item">
<div class="volume-header"> <div class="volume-header">
<svg class="volume-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg
class="volume-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10" /> <circle cx="12" cy="12" r="10" />
<path d="M8 12h8M12 8v8" /> <path d="M8 12h8M12 8v8" />
</svg> </svg>
<span class="volume-label">Pop SFX</span> <span class="volume-label">Pop SFX</span>
<span class="volume-value" id="vol-pop-display">90%</span> <span class="volume-value" id="vol-pop-display">90%</span>
</div> </div>
<input type="range" class="volume-slider" id="vol-pop" min="0" max="100" value="90"> <input
type="range"
class="volume-slider"
id="vol-pop"
min="0"
max="100"
value="90"
/>
</div> </div>
<!-- Merge SFX Volume --> <!-- Merge SFX Volume -->
<div class="volume-item"> <div class="volume-item">
<div class="volume-header"> <div class="volume-header">
<svg class="volume-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg
<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"/> 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> </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>
</div> </div>
<input type="range" class="volume-slider" id="vol-merge" min="0" max="100" value="100"> <input
type="range"
class="volume-slider"
id="vol-merge"
min="0"
max="100"
value="100"
/>
</div> </div>
</div> </div>
</div> </div>
<!-- Top Right Controls --> <!-- Top Right Controls -->
<div class="top-controls"> <div class="top-controls">
<button class="icon-btn btn-tutorial" id="btn-tutorial" title="How to Play"> <button
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> 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" /> <circle cx="12" cy="12" r="10" />
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /> <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" /> <line x1="12" y1="17" x2="12.01" y2="17" />
</svg> </svg>
</button> </button>
<button class="icon-btn btn-restart-icon" id="btn-restart" title="Restart Game"> <button
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> class="icon-btn btn-restart-icon"
<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-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> </svg>
</button> </button>
</div> </div>
@ -119,10 +218,15 @@
</div> </div>
<!-- Tutorial Modal --> <!-- Tutorial Modal -->
<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 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="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>
@ -176,18 +280,26 @@
<div class="tutorial-section"> <div class="tutorial-section">
<h3>🎯 Objective</h3> <h3>🎯 Objective</h3>
<p class="objective-text">Combine tiles with the same numbers to reach <strong>2048</strong>!</p> <p class="objective-text">
Combine tiles with the same numbers to reach
<strong>2048</strong>!
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 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) --> <!-- Close Button (X) -->
<button class="game-over-close" id="game-over-close"> <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="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>
@ -203,12 +315,20 @@
<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 --> <!-- New High Score Badge - show if new record -->
<div class="new-high-score" id="new-high-score-badge" style="display: none;"> <div
class="new-high-score"
id="new-high-score-badge"
style="display: none"
>
New High Score New High Score
</div> </div>
<!-- Best Score Display - show if NOT new record --> <!-- Best Score Display - show if NOT new record -->
<div class="best-score-display" id="best-score-display" style="display: none;"> <div
class="best-score-display"
id="best-score-display"
style="display: none"
>
<div class="best-score-label">High Score</div> <div class="best-score-label">High Score</div>
<div class="best-score-value" id="modal-best-score">0</div> <div class="best-score-value" id="modal-best-score">0</div>
</div> </div>
@ -217,15 +337,39 @@
<!-- Action Buttons - ICON ONLY --> <!-- Action Buttons - ICON ONLY -->
<div class="game-over-buttons"> <div class="game-over-buttons">
<!-- Restart Button --> <!-- 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 --> <!-- 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>
@ -233,6 +377,7 @@
</div> </div>
</div> </div>
</div> </div>
<script src="Score_Request.js"></script>
<script src="2048.js"></script> <script src="2048.js"></script>
</body> </body>
</html> </html>

11
2048.js
View File

@ -591,6 +591,16 @@ function goHome() {
------------------------ */ ------------------------ */
function showGameOver() { function showGameOver() {
const finalScore = currentScore; 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 isNewHighScore = finalScore >= bestScore && finalScore > 0;
const finalScoreEl = document.getElementById('final-score'); const finalScoreEl = document.getElementById('final-score');
@ -973,4 +983,3 @@ function getTileColor(value) {
}; };
return colors[value] || '#00eaff'; return colors[value] || '#00eaff';
} }

4
Database.sql
View File

@ -1,5 +1,5 @@
CREATE DATABASE IF NOT EXISTS game_2048; CREATE DATABASE IF NOT EXISTS web;
USE game_2048; USE web;
CREATE TABLE IF NOT EXISTS users ( CREATE TABLE IF NOT EXISTS users (
id INT AUTO_INCREMENT PRIMARY KEY, id INT AUTO_INCREMENT PRIMARY KEY,

2
Leaderboard.php
View File

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

2
Score_Request.js
View File

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