From 36f4d32ef3dd9cb16700a75a409733b29a2b82c2 Mon Sep 17 00:00:00 2001 From: Evelyn Date: Tue, 16 Dec 2025 10:23:38 +0700 Subject: [PATCH] easy.js --- assets/gameboard-eassy.css | 250 +++++++++++++++++++ assets/gameboard-easy.js | 191 +++++++++++++++ gameboard-hard.html | 481 ------------------------------------- 3 files changed, 441 insertions(+), 481 deletions(-) create mode 100644 assets/gameboard-eassy.css create mode 100644 assets/gameboard-easy.js diff --git a/assets/gameboard-eassy.css b/assets/gameboard-eassy.css new file mode 100644 index 0000000..e8e03d9 --- /dev/null +++ b/assets/gameboard-eassy.css @@ -0,0 +1,250 @@ +html, body { + margin: 0; + height: 100vh; /* Gunakan vh agar benar-benar setinggi layar */ + overflow: hidden; /* Kunci agar tidak bisa scroll sama sekali */ + font-family: "Poppins", sans-serif; +} + +body { + background: linear-gradient(135deg, #8929ff 30%, #ff419b 100%); + display: flex; + flex-direction: column; + height: 100vh; /* Memastikan body memenuhi layar */ +} + +/* OVERLAY COUNTDOWN */ +#countdown-overlay { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background: rgba(0,0,0,0.85); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + color: white; + font-size: 150px; + font-weight: 800; + display: none; +} + +.pulse-anim { + animation: pulse 1s ease-out infinite; +} + +@keyframes pulse { + 0% { transform: scale(1); opacity: 1; } + 100% { transform: scale(2); opacity: 0; } +} + +.topbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 14px; + background: rgb(255, 255, 255); + border-bottom: 2px solid rgba(39, 35, 35, 0.6); + backdrop-filter: blur(14px); + z-index: 50; +} + +.back-btn { + font-size: 28px; + background: none; + border: none; + cursor: pointer; + color: #222; +} + +.right-info { + display: flex; + gap: 10px; +} + +.pill { + display: flex; + align-items: center; + gap: 6px; + padding: 5px 12px; + background: rgb(255, 255, 255); + border-radius: 20px; + border: 2px solid rgba(255,255,255,0.8); + backdrop-filter: blur(8px); + color: #003366; + font-weight: 600; + box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 0 6px rgba(255,255,255,0.6); +} + +.icon { font-size: 18px; } + +/* Update pada gameboard */ +.gameboard { + flex: 1; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(3, 1fr); + gap: 10px; + padding: 10px; + box-sizing: border-box; + overflow: hidden; /* Mencegah container ini meluap */ + height: 0; /* Trik agar flex-grow (flex:1) menghitung tinggi dengan benar */ +} + +/* Update pada card agar ukurannya proporsional */ +.card { + width: 100%; + height: 100%; + perspective: 1000px; + /* Hapus max-height agar kartu mengikuti tinggi grid yang tersedia */ + cursor: pointer; +} + +.inner { + width: 100%; + height: 100%; + position: relative; + transform-style: preserve-3d; + transition: transform 0.55s ease; + border-radius: 12px; +} + +.front, .back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + display: flex; + justify-content: center; + align-items: center; + border-radius: 12px; + background: linear-gradient(135deg, #7a28ff 20%, #eb2bbf 80%); + border: 2px solid rgba(255,255,255,0.55); + box-shadow: 0 3px 6px rgba(0,0,0,0.25), inset 0 0 6px rgba(255,255,255,0.45); +} + +.front { + font-size: calc(10px + 3vw); + font-weight: 700; + color: #ff6a4d; +} + +.back { + transform: rotateY(180deg); +} + +.back img { + width: 90%; + height: 90%; + object-fit: contain; + filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45)); +} + +.card:not(.flipped):hover .front { + transform: scale(1.05); + transition: 0.25s; +} + +.card.flipped .inner { transform: rotateY(180deg); } + +.card.matched .front, +.card.matched .back { + border-color: #7affd6; + box-shadow: 0 0 15px #7affd6, 0 0 30px rgba(122,255,214,0.8); +} + +.combo-popup { + position: absolute; + padding: 12px 20px; + background: linear-gradient(135deg, rgba(255,95,109,0.92), rgba(255,0,102,0.92)); + border-radius: 14px; + color: white; + font-weight: 800; + text-align: center; + font-size: 20px; + box-shadow: 0 0 18px rgba(255, 75, 43, 0.9), 0 0 35px rgba(255, 0, 85, 0.7); + animation: comboFade 1.4s ease forwards; + pointer-events: none; + border: 2px solid rgba(255,255,255,0.35); +} + +@keyframes comboFade { + 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.7); } + 20% { opacity: 1; transform: translate(-50%, -30px) scale(1); } + 100% { opacity: 0; transform: translate(-50%, -80px) scale(1.1); } +} + +.end-screen { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.45); + backdrop-filter: blur(7px); + display: none; + justify-content: center; + align-items: center; + z-index: 200; +} + +.end-box { + width: 80%; + max-width: 380px; + background: white; + border-radius: 22px; + padding: 20px; + text-align: center; + animation: fadeIn 0.4s ease; +} + +.end-title { + font-size: 28px; + font-weight: 700; + margin-bottom: 4px; +} + +.score-row { + display: flex; + justify-content: space-between; + margin: 8px 0; + font-size: 18px; +} + +.end-btn { + width: 100%; + padding: 12px; + border-radius: 16px; + border: none; + font-size: 18px; + margin-top: 10px; + cursor: pointer; + font-weight: 600; +} + +.play-again { background: #b700ff; color: white; } +.leaderboard { background: gold; } +.back-menu { background: #444; color: white; } + +.music-control { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 100; + background: white; + width: 45px; + height: 45px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + box-shadow: 0 4px 10px rgba(0,0,0,0.3); + font-size: 20px; +} + +@media (max-width: 700px) { + .gameboard { + grid-template-columns: repeat(2, 1fr); + padding: 12px; + gap: 10px; + } +} \ No newline at end of file diff --git a/assets/gameboard-easy.js b/assets/gameboard-easy.js new file mode 100644 index 0000000..37ce7a1 --- /dev/null +++ b/assets/gameboard-easy.js @@ -0,0 +1,191 @@ +// --- KONFIGURASI AUDIO & DOM --- +const bgMusic = document.getElementById("bgMusic"); +const sfxClick = document.getElementById("sfxClick"); +const sfxMatch = document.getElementById("sfxMatch"); +const sfxWrong = document.getElementById("sfxWrong"); +const sfxCountdown = document.getElementById("sfxCountdown"); +const sfxWin = document.getElementById("sfxWin"); +const sfxLose = document.getElementById("sfxLose"); +const toggleBtn = document.getElementById("toggleMusic"); +const overlay = document.getElementById("countdown-overlay"); + +let musicMuted = true; + +// AUTO-PLAY PADA INTERAKSI PERTAMA +function initAudio() { + if(musicMuted) { + bgMusic.play().catch(() => {}); + bgMusic.volume = 0.5; + toggleBtn.textContent = "🔊"; + musicMuted = false; + document.removeEventListener('click', initAudio); + } +} +document.addEventListener('click', initAudio); + +toggleBtn.onclick = (e) => { + e.stopPropagation(); + if (musicMuted) { + bgMusic.play(); + toggleBtn.textContent = "🔊"; + } else { + bgMusic.pause(); + toggleBtn.textContent = "🔇"; + } + musicMuted = !musicMuted; +}; + +function playSFX(audio) { + if(!musicMuted) { + audio.currentTime = 0; + audio.play().catch(() => {}); + } +} + +// --- LOGIKA GAME ASLI --- +const images = [ + "images/fruit1.png", "images/fruit2.png", "images/fruit3.png", + "images/fruit4.png", "images/fruit5.png", "images/fruit6.png", +]; + +let cards = [...images, ...images]; +let flipped = []; +let timerStarted = false; +let time = 60; +let moves = 0; +let score = 0; +let countdown; +let combo = 1; +let lastMatchTime = 0; +let pendingMatch = false; + +function shuffleArray(array) { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; +} + +function runCountdown(callback) { + let count = 3; + overlay.style.display = "flex"; + overlay.innerHTML = `${count}`; + playSFX(sfxCountdown); + + let cdTimer = setInterval(() => { + count--; + if (count > 0) { + overlay.innerHTML = `${count}`; + playSFX(sfxCountdown); + } else if (count === 0) { + overlay.innerHTML = `GO!`; + } else { + clearInterval(cdTimer); + overlay.style.display = "none"; + callback(); + } + }, 1000); +} + +function startTimer() { + timerStarted = true; + countdown = setInterval(() => { + document.getElementById("timer").textContent = --time; + if (time <= 0) { + clearInterval(countdown); + showEndScreen(false); // Kalah + } + }, 1000); +} + +function showEndScreen(isWin) { + clearInterval(countdown); + bgMusic.pause(); + + if(isWin) playSFX(sfxWin); else playSFX(sfxLose); + + document.getElementById("endTitle").textContent = isWin ? "🎉 Selamat!" : "⏰ Waktu Habis!"; + document.getElementById("endMsg").textContent = isWin ? "Anda berhasil menyelesaikan permainan!" : "Coba lagi lain kali!"; + + let baseScore = score; + let timeBonus = time * 5; + let moveBonus = Math.max(0, 200 - moves * 10); + let total = baseScore + timeBonus + moveBonus; + + document.getElementById("baseScoreEnd").textContent = baseScore; + document.getElementById("timeBonusEnd").textContent = "+" + (isWin ? timeBonus : 0); + document.getElementById("moveBonusEnd").textContent = "+" + (isWin ? moveBonus : 0); + document.getElementById("totalScoreEnd").textContent = isWin ? total : baseScore; + document.getElementById("endScreen").style.display = "flex"; +} + +function flipCard(card) { + if (!timerStarted) startTimer(); + if (flipped.length === 2 || card.classList.contains("matched") || card.classList.contains("flipped")) + return; + + playSFX(sfxClick); + card.classList.add("flipped"); + flipped.push(card); + + if (flipped.length === 2) { + moves++; + document.getElementById("moves").textContent = moves; + let img1 = flipped[0].querySelector(".back img").src; + let img2 = flipped[1].querySelector(".back img").src; + + if (img1 === img2) { + playSFX(sfxMatch); + const now = Date.now(); + if (!pendingMatch) { pendingMatch = true; combo = 1; } + else { + if (now - lastMatchTime <= 3000) { + combo++; + score += (10 * combo); + document.getElementById("score").textContent = score; + } else { combo = 1; } + } + lastMatchTime = now; + flipped.forEach(c => c.classList.add("matched")); + score += 50; + document.getElementById("score").textContent = score; + time += 5; + flipped = []; + if (document.querySelectorAll(".matched").length === cards.length) { + setTimeout(() => showEndScreen(true), 600); + } + } else { + playSFX(sfxWrong); + setTimeout(() => { + flipped.forEach(c => c.classList.remove("flipped")); + flipped = []; + }, 800); + } + } +} + +function startGame() { + document.getElementById("endScreen").style.display = "none"; + const board = document.getElementById("game-board"); + board.innerHTML = ""; + + runCountdown(() => { + if(!musicMuted) bgMusic.play(); + const shuffledCards = shuffleArray([...cards]); + shuffledCards.forEach(image => { + const card = document.createElement("div"); + card.className = "card"; + card.innerHTML = `
?
`; + card.onclick = () => flipCard(card); + board.appendChild(card); + }); + time = 60; moves = 0; score = 0; combo = 1; + timerStarted = false; + document.getElementById("timer").textContent = time; + document.getElementById("moves").textContent = moves; + document.getElementById("score").textContent = score; + }); +} + +startGame(); \ No newline at end of file diff --git a/gameboard-hard.html b/gameboard-hard.html index 37e35e5..712419d 100644 --- a/gameboard-hard.html +++ b/gameboard-hard.html @@ -4,243 +4,6 @@ Memory Card Premium 5x4 - - @@ -283,249 +46,5 @@ body { - - - \ No newline at end of file