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-11-18 19:42:10 +07:00
parent 02b324ba37
commit 021d61a1b0
3 changed files with 429 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
2048.css
View File

@ -144,3 +144,156 @@ button:hover {
.tile-1024 { background: #00ffaa55; box-shadow: 0 0 10px #00ffaa; } .tile-1024 { background: #00ffaa55; box-shadow: 0 0 10px #00ffaa; }
.tile-2048 { background: #ffd70066; box-shadow: 0 0 15px #ffd700; } .tile-2048 { background: #ffd70066; box-shadow: 0 0 15px #ffd700; }
/* ======= ENHANCEMENTS: Animations, Particles, Glows ======= */
/* ensure board stacking context for absolute animations */
#board { position: relative; z-index: 2; }
.particles {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle at 20% 30%, rgba(0,234,255,0.18), transparent 45%),
radial-gradient(circle at 80% 70%, rgba(255,0,90,0.18), transparent 45%),
radial-gradient(circle at 50% 50%, rgba(140,0,255,0.14), transparent 55%),
radial-gradient(circle at 10% 85%, rgba(0,255,200,0.12), transparent 55%),
radial-gradient(circle at 90% 15%, rgba(255,0,255,0.15), transparent 45%);
filter: blur(55px) brightness(120%) saturate(130%);
animation: particlesFloat 18s ease-in-out infinite alternate;
}
@keyframes particlesFloat {
0% { transform: translateY(0px) translateX(0px); }
50% { transform: translateY(-25px) translateX(10px); }
100% { transform: translateY(-40px) translateX(-15px); }
}
.cursor-light {
position: absolute;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(0,255,255,0.25), transparent 70%);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
filter: blur(40px);
mix-blend-mode: screen;
opacity: 0.6;
}
/* gentle vertical float */
@keyframes floatBg { 0% { transform: translateY(0);} 100% { transform: translateY(-14px);} }
/* Tile move / slide illusion: tiles appear from direction */
.tile {
transition: transform 0.14s cubic-bezier(.2,.8,.2,1), opacity 0.12s linear, box-shadow 0.12s;
will-change: transform, opacity, box-shadow;
}
/* 'new' pop kept but slightly tuned */
.tile.new {
animation: pop 0.22s cubic-bezier(.2,.9,.2,1);
}
/* merge pop */
.tile.merge {
animation: mergePop 0.24s ease-out;
z-index: 3;
}
@keyframes mergePop {
0% { transform: scale(1); box-shadow: 0 0 6px rgba(255,255,255,0.1); }
50% { transform: scale(1.18); box-shadow: 0 0 30px rgba(255,255,255,0.35); }
100% { transform: scale(1); box-shadow: 0 0 6px rgba(255,255,255,0.1); }
}
/* board shake when invalid move */
#board.shake {
animation: shakeBoard 0.36s;
}
@keyframes shakeBoard {
0%,100% { transform: translateX(0); }
25% { transform: translateX(-8px); }
75% { transform: translateX(8px); }
}
/* ambient glow under board (keeps aesthetics) */
#board::after {
content: "";
position: absolute;
bottom: -36px;
left: 50%;
transform: translateX(-50%);
width: 340px;
height: 84px;
background: radial-gradient(ellipse at center, rgba(0,234,255,0.12), transparent 60%);
filter: blur(30px);
z-index: 0;
}
/* special 2048 tile sparkle (adds shimmer) */
.tile-2048 {
animation: goldShimmer 2.4s infinite;
}
@keyframes goldShimmer {
0% { box-shadow: 0 0 10px #ffd70066; transform: translateZ(0); }
50% { box-shadow: 0 0 26px #ffd700aa; transform: translateY(-2px); }
100% { box-shadow: 0 0 10px #ffd70066; transform: translateZ(0); }
}
/* small particle bits that appear for merge */
.merge-particle {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
pointer-events: none;
opacity: 0.95;
will-change: transform, opacity;
filter: blur(1px) drop-shadow(0 0 6px rgba(255,255,255,0.08));
}
/* ensure base tile readability on animation */
.tile { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* mobile touch hint (optional) */
.touch-hint {
position: fixed;
right: 18px;
bottom: 18px;
background: rgba(0,0,0,0.45);
padding: 8px 10px;
border-radius: 10px;
font-size: 12px;
z-index: 4;
color: #cfefff;
}
.starfield {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.starfield span {
position: absolute;
width: 4px;
height: 4px;
background: rgba(0,255,255,0.8);
border-radius: 50%;
filter: blur(2px);
animation: starMove linear infinite;
}
/* bintang bergerak random */
@keyframes starMove {
0% { transform: translateY(0); opacity: 0.8; }
100% { transform: translateY(-700px); opacity: 0; }
}

5
2048.html
View File

@ -6,8 +6,11 @@
<title>2048</title> <title>2048</title>
<link rel="stylesheet" href="2048.css"> <link rel="stylesheet" href="2048.css">
</head> </head>
<body> <body>
<!-- ADD: ambient particle / neon background layer -->
<div class="particles" aria-hidden="true"></div>
<div class="starfield"></div>
<div class="cursor-light"></div>
<h1>2048</h1> <h1>2048</h1>
<div id="top-menu"> <div id="top-menu">
<button class="btn" onclick="restartGame()">Restart</button> <button class="btn" onclick="restartGame()">Restart</button>

348
2048.js
View File

@ -1,5 +1,13 @@
/* 2048.js — Enhanced with animations, particles, and glows
Replace previous 2048.js content with this file.
*/
/* ------------------------
State & audio (kept)
------------------------ */
let board = []; let board = [];
let score = 0; let score = 0;
let lastMoveDir = null; // 'left','right','up','down' or null
// --- Audio setup --- // --- Audio setup ---
const audio = { const audio = {
@ -7,19 +15,15 @@ const audio = {
pop: new Audio("pop.mp3"), pop: new Audio("pop.mp3"),
merge: new Audio("merge.wav") merge: new Audio("merge.wav")
}; };
// lower default volumes
audio.bg.volume = 0.25; audio.bg.volume = 0.25;
audio.pop.volume = 0.9; audio.pop.volume = 0.9;
audio.merge.volume = 0.9; audio.merge.volume = 0.9;
audio.bg.loop = true; audio.bg.loop = true;
// try to play background music; may be blocked until user interaction
function tryPlayBg() { function tryPlayBg() {
audio.bg.play().catch(() => { audio.bg.play().catch(() => {
// autoplay blocked — will try again on first user keypress or click
const unlock = () => { const unlock = () => {
audio.bg.play().catch(() => {}); audio.bg.play().catch(()=>{});
window.removeEventListener("keydown", unlock); window.removeEventListener("keydown", unlock);
window.removeEventListener("click", unlock); window.removeEventListener("click", unlock);
}; };
@ -28,20 +32,21 @@ function tryPlayBg() {
}); });
} }
// --- DOM ready: setup board and initial tiles --- /* ------------------------
DOM ready
------------------------ */
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
setupBoard(); setupBoard();
addNewTile(); addNewTile();
addNewTile(); addNewTile();
tryPlayBg(); tryPlayBg();
// keyboard controls (also used to unlock audio)
document.addEventListener("keydown", handleKey); document.addEventListener("keydown", handleKey);
setupAmbientCursor();
}); });
// ---------------------------- /* ------------------------
// SETUP BOARD (render tiles ONCE) Setup & rendering
// ---------------------------- ------------------------ */
function setupBoard() { function setupBoard() {
board = []; board = [];
score = 0; score = 0;
@ -53,7 +58,6 @@ function setupBoard() {
return; return;
} }
// empty container and create fixed 4x4 cells
container.innerHTML = ""; container.innerHTML = "";
for (let r = 0; r < 4; r++) { for (let r = 0; r < 4; r++) {
board[r] = []; board[r] = [];
@ -61,40 +65,55 @@ function setupBoard() {
board[r][c] = 0; board[r][c] = 0;
const tile = document.createElement("div"); const tile = document.createElement("div");
tile.id = `${r}-${c}`; tile.id = `${r}-${c}`;
tile.className = "tile"; // base class only tile.className = "tile";
// ensure box sizing not influenced by text nodes
tile.style.boxSizing = "border-box";
container.appendChild(tile); container.appendChild(tile);
} }
} }
} }
// ---------------------------- /* update single tile visual with small entrance based on last move */
// UPDATE UI FOR SINGLE TILE
// ----------------------------
function updateTile(row, col, num) { function updateTile(row, col, num) {
const tile = document.getElementById(`${row}-${col}`); const tile = document.getElementById(`${row}-${col}`);
if (!tile) return; if (!tile) return;
// reset classes to base // reset classes except base .tile
tile.className = "tile"; tile.className = "tile";
// force reflow to allow re-adding 'new' animation class reliably // ensure previous transforms cleared
void tile.offsetWidth; tile.style.transform = "";
tile.style.opacity = "";
if (num > 0) { if (num > 0) {
tile.textContent = num; tile.textContent = num;
// add tile class for color (expects classes like tile-2, tile-4, ...)
tile.classList.add("tile-" + num); tile.classList.add("tile-" + num);
// make numbers visually white-neon glow if desired: // slide-illusion: appear from direction of last move
// ensure text is centered by CSS; no inline style needed if (lastMoveDir) {
let tx = 0, ty = 0;
const gap = 22; // small px offset for feel
if (lastMoveDir === "left") tx = gap;
else if (lastMoveDir === "right") tx = -gap;
else if (lastMoveDir === "up") ty = gap;
else if (lastMoveDir === "down") ty = -gap;
// start slightly offset & transparent, then animate to 0
tile.style.transform = `translate(${tx}px, ${ty}px)`;
tile.style.opacity = "0.0";
// force reflow then animate back
void tile.offsetWidth;
tile.style.transition = "transform 0.14s cubic-bezier(.2,.8,.2,1), opacity 0.12s";
tile.style.transform = "";
tile.style.opacity = "1";
// cleanup transition after done
setTimeout(() => { tile.style.transition = ""; }, 160);
}
} else { } else {
tile.textContent = ""; tile.textContent = "";
} }
} }
// updates entire board DOM from board array /* refresh whole board */
function refreshBoard() { function refreshBoard() {
for (let r = 0; r < 4; r++) { for (let r = 0; r < 4; r++) {
for (let c = 0; c < 4; c++) { for (let c = 0; c < 4; c++) {
@ -104,17 +123,13 @@ function refreshBoard() {
updateScore(); updateScore();
} }
// ---------------------------- /* score */
// SCORE UI
// ----------------------------
function updateScore() { function updateScore() {
const el = document.getElementById("score"); const el = document.getElementById("score");
if (el) el.textContent = score; if (el) el.textContent = score;
} }
// ---------------------------- /* add new tile with pop animation */
// ADD NEW TILE (value 2, play pop sound + animation)
// ----------------------------
function addNewTile() { function addNewTile() {
const empty = []; const empty = [];
for (let r = 0; r < 4; r++) { for (let r = 0; r < 4; r++) {
@ -131,65 +146,42 @@ function addNewTile() {
const tile = document.getElementById(`${spot.r}-${spot.c}`); const tile = document.getElementById(`${spot.r}-${spot.c}`);
if (tile) { if (tile) {
tile.classList.add("new"); tile.classList.add("new");
// play pop sound
playSound(audio.pop); playSound(audio.pop);
// remove 'new' class after animation completes to keep DOM tidy
tile.addEventListener("animationend", function handler() { tile.addEventListener("animationend", function handler() {
tile.classList.remove("new"); tile.classList.remove("new");
tile.removeEventListener("animationend", handler); tile.removeEventListener("animationend", handler);
}); });
// update text/color
updateTile(spot.r, spot.c, 2); updateTile(spot.r, spot.c, 2);
} else { } else {
// fallback
updateTile(spot.r, spot.c, 2); updateTile(spot.r, spot.c, 2);
} }
return true; return true;
} }
// helper to play sound safely /* safe playSound */
function playSound(soundObj) { function playSound(soundObj) {
try { try {
soundObj.currentTime = 0; soundObj.currentTime = 0;
soundObj.play().catch(() => { soundObj.play().catch(() => {});
// suppressed (autoplay or other) } catch (e) {}
});
} catch (e) { /* ignore */ }
} }
// ---------------------------- /* ------------------------
// INPUT HANDLING Movement helpers (logic preserved)
// ---------------------------- ------------------------ */
function handleKey(e) {
let moved = false;
if (e.key === "ArrowLeft") moved = moveLeft();
else if (e.key === "ArrowRight") moved = moveRight();
else if (e.key === "ArrowUp") moved = moveUp();
else if (e.key === "ArrowDown") moved = moveDown();
if (moved) {
// after a successful move: add tile, refresh board, play bg or unlock
addNewTile();
refreshBoard();
}
}
// ---------- MOVE HELPERS ----------
function filterZero(row) { function filterZero(row) {
return row.filter(n => n !== 0); return row.filter(n => n !== 0);
} }
function slide(row) { function slide(row) {
// row is an array of length 4
row = filterZero(row); row = filterZero(row);
let mergedThisMove = false; let mergedThisMove = false;
for (let i = 0; i < row.length - 1; i++) { for (let i = 0; i < row.length - 1; i++) {
if (row[i] === row[i + 1]) { if (row[i] === row[i + 1]) {
row[i] = row[i] * 2; row[i] = row[i] * 2;
// play merge sound and vibrate
playSound(audio.merge); playSound(audio.merge);
if (navigator.vibrate) navigator.vibrate(30); if (navigator.vibrate) navigator.vibrate(28);
score += row[i]; score += row[i];
row[i + 1] = 0; row[i + 1] = 0;
@ -202,7 +194,6 @@ function slide(row) {
return { row, merged: mergedThisMove }; return { row, merged: mergedThisMove };
} }
// Compare arrays helper
function arraysEqual(a, b) { function arraysEqual(a, b) {
return a.length === b.length && a.every((v, i) => v === b[i]); return a.length === b.length && a.every((v, i) => v === b[i]);
} }
@ -260,17 +251,44 @@ function moveDown() {
return moved; return moved;
} }
/* after move: refresh and reset lastMoveDir after small delay */
function updateAfterMove() { function updateAfterMove() {
// update all tiles now (this keeps sizes stable) // apply merge glow to merged tiles (scan for high values that were recently created)
refreshBoard(); refreshBoard();
// update score DOM
updateScore(); updateScore();
// small debounce is not required—moves are sequential // schedule dropping lastMoveDir after small delay so new tiles animate in direction
setTimeout(() => { lastMoveDir = null; }, 180);
} }
// ---------------------------- /* ------------------------
// RESTART & HOME Input handling (adds lastMoveDir + invalid-move shake)
// ---------------------------- ------------------------ */
function handleKey(e) {
let moved = false;
if (e.key === "ArrowLeft") { lastMoveDir = "left"; moved = moveLeft(); }
else if (e.key === "ArrowRight") { lastMoveDir = "right"; moved = moveRight(); }
else if (e.key === "ArrowUp") { lastMoveDir = "up"; moved = moveUp(); }
else if (e.key === "ArrowDown") { lastMoveDir = "down"; moved = moveDown(); }
if (moved) {
// add tile + subtle delay so new tile animates from direction
setTimeout(() => {
addNewTile();
refreshBoard();
}, 70);
} else {
// show board shake
const b = document.getElementById("board");
if (b) {
b.classList.add("shake");
setTimeout(()=>b.classList.remove("shake"), 360);
}
}
}
/* ------------------------
Restart & home
------------------------ */
function restartGame() { function restartGame() {
setupBoard(); setupBoard();
addNewTile(); addNewTile();
@ -279,14 +297,13 @@ function restartGame() {
} }
function goHome() { function goHome() {
// stops music to prevent continuing on homepage
try { audio.bg.pause(); audio.bg.currentTime = 0; } catch (e) {} try { audio.bg.pause(); audio.bg.currentTime = 0; } catch (e) {}
window.location.href = "Homepage.html"; window.location.href = "Homepage.html";
} }
// ---------------------------- /* ------------------------
// OPTIONAL: touch swipe for mobile Touch swipe
// ---------------------------- ------------------------ */
let touchStartX = 0; let touchStartX = 0;
let touchStartY = 0; let touchStartY = 0;
document.addEventListener("touchstart", function (e) { document.addEventListener("touchstart", function (e) {
@ -300,12 +317,191 @@ document.addEventListener("touchend", function (e) {
const dx = t.clientX - touchStartX; const dx = t.clientX - touchStartX;
const dy = t.clientY - touchStartY; const dy = t.clientY - touchStartY;
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 30) { if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 30) {
if (dx > 0) moveRight() && addNewTile() && refreshBoard(); if (dx > 0) { lastMoveDir = "right"; moveRight() && setTimeout(()=>{ addNewTile(); refreshBoard(); }, 70); }
else moveLeft() && addNewTile() && refreshBoard(); else { lastMoveDir = "left"; moveLeft() && setTimeout(()=>{ addNewTile(); refreshBoard(); }, 70); }
} else if (Math.abs(dy) > 30) { } else if (Math.abs(dy) > 30) {
if (dy > 0) moveDown() && addNewTile() && refreshBoard(); if (dy > 0) { lastMoveDir = "down"; moveDown() && setTimeout(()=>{ addNewTile(); refreshBoard(); }, 70); }
else moveUp() && addNewTile() && refreshBoard(); else { lastMoveDir = "up"; moveUp() && setTimeout(()=>{ addNewTile(); refreshBoard(); }, 70); }
} }
}, { passive: true }); }, { passive: true });
/* ------------------------
Ambient cursor light + merge particles
------------------------ */
function setupAmbientCursor() {
const container = document.querySelector(".particles");
if (!container) return;
// create a subtle cursor-follow blob
const cursor = document.createElement("div");
cursor.className = "cursor-light";
container.appendChild(cursor);
let lastX = window.innerWidth/2, lastY = window.innerHeight/2;
document.addEventListener("mousemove", (e) => {
lastX = e.clientX; lastY = e.clientY;
cursor.style.left = lastX + "px";
cursor.style.top = lastY + "px";
});
// small periodic motion for background
setInterval(() => {
cursor.style.opacity = (0.4 + Math.random()*0.35).toString();
}, 900);
}
/* spawn merge particles at tile center */
function spawnMergeParticles(row, col, colorHex="#00eaff") {
const container = document.body;
const boardRect = document.getElementById("board").getBoundingClientRect();
const tileEl = document.getElementById(`${row}-${col}`);
if (!tileEl) return;
const tileRect = tileEl.getBoundingClientRect();
const cx = tileRect.left + tileRect.width/2;
const cy = tileRect.top + tileRect.height/2;
const particles = [];
const count = 10;
for (let i = 0; i < count; i++) {
const p = document.createElement("div");
p.className = "merge-particle";
p.style.background = colorHex;
p.style.left = (cx - 6) + "px";
p.style.top = (cy - 6) + "px";
p.style.opacity = "1";
p.style.transform = "translate(0,0) scale(1)";
document.body.appendChild(p);
particles.push(p);
// random flight vector
const angle = Math.random() * Math.PI * 2;
const dist = 24 + Math.random()*36;
const tx = Math.cos(angle) * dist;
const ty = Math.sin(angle) * dist;
const rot = (Math.random() * 360)|0;
p.animate([
{ transform: `translate(0,0) rotate(0deg) scale(1)`, opacity: 1 },
{ transform: `translate(${tx}px, ${ty}px) rotate(${rot}deg) scale(0.6)`, opacity: 0 }
], {
duration: 420 + Math.random()*240,
easing: "cubic-bezier(.2,.8,.2,1)",
fill: "forwards"
});
// cleanup
setTimeout(()=>{ try{ p.remove(); }catch(e){} }, 800 + Math.random()*400);
}
}
/* ------------------------
Optional: call spawn on merges
We don't track exact merge positions in slide() local scope here,
but we can detect new larger tiles after move vs before and spawn particles.
------------------------ */
function spawnMergesFromDiff(prev, next) {
// prev & next are 4x4 arrays
for (let r = 0; r < 4; r++) {
for (let c = 0; c < 4; c++) {
if (next[r][c] > 0 && prev[r][c] !== next[r][c]) {
// if new value appears that wasn't same in prev -> likely merged or moved; if it's > 2 we spawn small effect
if (next[r][c] >= 4) {
spawnMergeParticles(r, c, chooseColorForValue(next[r][c]));
const tileEl = document.getElementById(`${r}-${c}`);
if (tileEl) {
tileEl.classList.add("merge");
setTimeout(()=>tileEl.classList.remove("merge"), 260);
}
}
}
}
}
}
/* choose nice color for particle based on value */
function chooseColorForValue(n) {
if (n >= 2048) return "#ffd700";
if (n >= 1024) return "#00ffaa";
if (n >= 512) return "#ff00aa";
if (n >= 128) return "#5f00ff";
if (n >= 32) return "#ffaa00";
return "#00eaff";
}
/* We'll wrap move functions to produce prev snapshot, then spawn particles for merges detected */
function cloneBoard(b) {
const out = [];
for (let r = 0; r < 4; r++) out.push([...b[r]]);
return out;
}
/* Override move functions to spawn particles after move */
function moveLeft() {
const prev = cloneBoard(board);
let moved = false;
for (let r = 0; r < 4; r++) {
const { row: newRow } = slide(board[r]);
if (!arraysEqual(newRow, board[r])) moved = true;
board[r] = newRow;
}
if (moved) {
spawnMergesFromDiff(prev, board);
updateAfterMove();
}
return moved;
}
function moveRight() {
const prev = cloneBoard(board);
let moved = false;
for (let r = 0; r < 4; r++) {
let reversed = [...board[r]].reverse();
const { row: slid } = slide(reversed);
let newRow = slid.reverse();
if (!arraysEqual(newRow, board[r])) moved = true;
board[r] = newRow;
}
if (moved) {
spawnMergesFromDiff(prev, board);
updateAfterMove();
}
return moved;
}
function moveUp() {
const prev = cloneBoard(board);
let moved = false;
for (let c = 0; c < 4; c++) {
const col = [board[0][c], board[1][c], board[2][c], board[3][c]];
const { row: newCol } = slide(col);
for (let r = 0; r < 4; r++) {
if (board[r][c] !== newCol[r]) moved = true;
board[r][c] = newCol[r];
}
}
if (moved) {
spawnMergesFromDiff(prev, board);
updateAfterMove();
}
return moved;
}
function moveDown() {
const prev = cloneBoard(board);
let moved = false;
for (let c = 0; c < 4; c++) {
const col = [board[3][c], board[2][c], board[1][c], board[0][c]];
const { row: slid } = slide(col);
const newCol = slid.reverse();
for (let r = 0; r < 4; r++) {
if (board[r][c] !== newCol[r]) moved = true;
board[r][c] = newCol[r];
}
}
if (moved) {
spawnMergesFromDiff(prev, board);
updateAfterMove();
}
return moved;
}
/* ------------------------
End of file
------------------------ */