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:
Evelyn Sucitro 2025-12-01 18:37:42 +07:00
parent 111a37f983
commit b07407b579
3 changed files with 37 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
2048.css
View File

@ -998,14 +998,14 @@ h1 {
} }
} }
/* Best Score Display - ORANGE gradient */ /* High Score Display - ORANGE gradient */
.best-score-display { .high-score-display {
margin-top: 28px; margin-top: 28px;
padding-top: 28px; padding-top: 28px;
border-top: 2px solid rgba(255, 140, 0, 0.25); border-top: 2px solid rgba(255, 140, 0, 0.25);
} }
.best-score-label { .high-score-label {
font-size: 11px; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
color: rgba(255, 160, 50, 0.7); color: rgba(255, 160, 50, 0.7);
@ -1014,7 +1014,7 @@ h1 {
font-weight: 700; font-weight: 700;
} }
.best-score-value { .high-score-value {
font-size: clamp(34px, 5vw, 42px); font-size: clamp(34px, 5vw, 42px);
font-weight: 900; font-weight: 900;
background: linear-gradient(135deg, #ff8c00 0%, #ffa500 50%, #ffb347 100%); background: linear-gradient(135deg, #ff8c00 0%, #ffa500 50%, #ffb347 100%);

12
2048.html
View File

@ -208,7 +208,7 @@
</div> </div>
<div class="score-box"> <div class="score-box">
<div class="score-label">HIGH SCORE</div> <div class="score-label">HIGH SCORE</div>
<div class="score-value" id="best-score">0</div> <div class="score-value" id="high-score">0</div>
</div> </div>
</div> </div>
</div> </div>
@ -323,14 +323,14 @@
New High Score New High Score
</div> </div>
<!-- Best Score Display - show if NOT new record --> <!-- high Score Display - show if NOT new record -->
<div <div
class="best-score-display" class="high-score-display"
id="best-score-display" id="high-score-display"
style="display: none" style="display: none"
> >
<div class="best-score-label">High Score</div> <div class="high-score-label">High Score</div>
<div class="best-score-value" id="modal-best-score">0</div> <div class="high-score-value" id="modal-high-score">0</div>
</div> </div>
</div> </div>

44
2048.js
View File

@ -1,11 +1,18 @@
/* ------------------------ /* ------------------------
State & Variables State & Variables
------------------------ */ ------------------------ */
let board = []; let board = [];
let currentScore = 0; let currentScore = 0;
let bestScore = parseInt(localStorage.getItem('bestScore2048')) || 0;
// 1. Ambil username dari sessionStorage (sesuai sistem login kamu)
const currentUser = sessionStorage.getItem("loggedInUser") || "guest";
// 2. Buat nama kunci unik, misal: "highScore2048_budi"
const storageKey = 'highScore2048_' + currentUser;
// 3. Ambil skor milik user tersebut saja
let highScore = parseInt(localStorage.getItem(storageKey)) || 0;
let lastMoveDir = null; let lastMoveDir = null;
let isMoving = false; let isMoving = false;
let mergesInCurrentMove = 0; let mergesInCurrentMove = 0;
@ -71,7 +78,7 @@ function checkAndShowTutorial() {
DOM Ready DOM Ready
------------------------ */ ------------------------ */
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
updateBestScoreDisplay(); updateHighScoreDisplay();
setupBoard(); setupBoard();
addNewTile(); addNewTile();
addNewTile(); addNewTile();
@ -223,17 +230,18 @@ function updateScoreDisplay() {
scoreEl.textContent = currentScore; scoreEl.textContent = currentScore;
} }
if (currentScore > bestScore) { if (currentScore > highScore) {
bestScore = currentScore; highScore = currentScore;
localStorage.setItem('bestScore2048', bestScore); // Gunakan storageKey yang sudah kita buat di atas (dinamis sesuai user)
updateBestScoreDisplay(); localStorage.setItem(storageKey, highScore);
updateHighScoreDisplay();
} }
} }
function updateBestScoreDisplay() { function updateHighScoreDisplay() {
const bestScoreEl = document.getElementById('best-score'); const highScoreEl = document.getElementById('high-score');
if (bestScoreEl) { if (highScoreEl) {
bestScoreEl.textContent = bestScore; highScoreEl.textContent = highScore;
} }
} }
@ -601,7 +609,7 @@ function showGameOver() {
console.error("Fungsi saveScore tidak ditemukan! Pastikan Score_Request.js sudah diload."); console.error("Fungsi saveScore tidak ditemukan! Pastikan Score_Request.js sudah diload.");
} }
const isNewHighScore = finalScore >= bestScore && finalScore > 0; const isNewHighScore = finalScore >= highScore && finalScore > 0;
const finalScoreEl = document.getElementById('final-score'); const finalScoreEl = document.getElementById('final-score');
if (finalScoreEl) { if (finalScoreEl) {
@ -609,16 +617,16 @@ function showGameOver() {
} }
const newHighScoreBadge = document.getElementById('new-high-score-badge'); const newHighScoreBadge = document.getElementById('new-high-score-badge');
const bestScoreDisplay = document.getElementById('best-score-display'); const highScoreDisplay = document.getElementById('high-score-display');
if (isNewHighScore) { if (isNewHighScore) {
if (newHighScoreBadge) newHighScoreBadge.style.display = 'inline-block'; if (newHighScoreBadge) newHighScoreBadge.style.display = 'inline-block';
if (bestScoreDisplay) bestScoreDisplay.style.display = 'none'; if (highScoreDisplay) highScoreDisplay.style.display = 'none';
} else { } else {
if (newHighScoreBadge) newHighScoreBadge.style.display = 'none'; if (newHighScoreBadge) newHighScoreBadge.style.display = 'none';
if (bestScoreDisplay) bestScoreDisplay.style.display = 'block'; if (highScoreDisplay) highScoreDisplay.style.display = 'block';
const modalBestScore = document.getElementById('modal-best-score'); const modalHighScore = document.getElementById('modal-high-score');
if (modalBestScore) modalBestScore.textContent = bestScore; if (modalHighScore) modalHighScore.textContent = highScore;
} }
const gameOverOverlay = document.getElementById('game-over-overlay'); const gameOverOverlay = document.getElementById('game-over-overlay');