diff --git a/assets/gameboard-medium.css b/assets/gameboard-medium.css new file mode 100644 index 0000000..07f5cc2 --- /dev/null +++ b/assets/gameboard-medium.css @@ -0,0 +1,203 @@ +html, body { + margin: 0; + height: 100%; + overflow: hidden; + font-family: "Poppins", sans-serif; +} + +body { + background: linear-gradient(135deg, #8929ff 30%, #ff419b 100%); + display: flex; + flex-direction: column; +} + +/* --- 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: white; + border-radius: 20px; + border: 2px solid rgba(255,255,255,0.8); + font-weight: 600; + box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 0 6px rgba(255,255,255,0.6); +} + +.gameboard { + flex: 1; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + padding: 25px 40px; + box-sizing: border-box; + place-items: center; +} + +.card { + width: 100%; + height: 100%; + perspective: 1000px; + cursor: pointer; +} + +.inner { + width: 100%; + height: 100%; + position: relative; + transform-style: preserve-3d; + transition: transform 0.55s ease; + border-radius: 10px; +} + +.front, .back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + 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); +} + +.front { + font-size: calc(10px + 2vw); + font-weight: 700; + color: #ff6a4d; +} + +.back { transform: rotateY(180deg); } +.back img { + width: 85%; + height: 85%; + object-fit: contain; + filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45)); +} + +.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); + z-index: 99; +} + +@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; +} + +.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: 600px) { .gameboard { grid-template-columns: repeat(4, 1fr); padding: 10px; gap: 8px; } } \ No newline at end of file diff --git a/assets/gameboard-medium.js b/assets/gameboard-medium.js new file mode 100644 index 0000000..32dd438 --- /dev/null +++ b/assets/gameboard-medium.js @@ -0,0 +1,213 @@ +// --- AUDIO CONFIG --- +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 countdownOverlay = document.getElementById("countdown-overlay"); + +let musicMuted = true; + +function playSFX(audio) { + if(!musicMuted) { + audio.currentTime = 0; + audio.play().catch(() => {}); + } +} + +// Interaksi pertama untuk aktifkan suara +document.addEventListener('click', function initAudio() { + if(musicMuted) { + musicMuted = false; + toggleBtn.textContent = "🔊"; + bgMusic.play().catch(() => {}); + document.removeEventListener('click', initAudio); + } +}); + +toggleBtn.onclick = (e) => { + e.stopPropagation(); + if (musicMuted) { + bgMusic.play(); + toggleBtn.textContent = "🔊"; + } else { + bgMusic.pause(); + toggleBtn.textContent = "🔇"; + } + musicMuted = !musicMuted; +}; + +// --- GAME LOGIC --- +const images = [ + "images/fruit1.png", "images/fruit2.png", "images/fruit3.png", "images/fruit4.png", + "images/fruit5.png", "images/fruit6.png", "images/fruit7.png", "images/fruit8.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 pendingMatch = false; +let lastMatchTime = 0; + +function showComboPopup(targetCard, combo, bonus) { + const popup = document.createElement("div"); + popup.className = "combo-popup"; + popup.innerHTML = `COMBO X${combo}
+${bonus} Bonus`; + const rect = targetCard.getBoundingClientRect(); + popup.style.left = rect.left + rect.width / 2 + "px"; + popup.style.top = rect.top + "px"; + popup.style.position = "fixed"; + document.body.appendChild(popup); + setTimeout(() => popup.remove(), 1500); +} + +function shuffleDistant(cards, minDistance = 4) { + let valid = false; + let result; + while (!valid) { + result = [...cards].sort(() => Math.random() - 0.5); + valid = true; + const checked = new Set(); + for (let i = 0; i < result.length; i++) { + const value = result[i]; + if (checked.has(value)) continue; + checked.add(value); + const firstIndex = result.indexOf(value); + const lastIndex = result.lastIndexOf(value); + const distance = Math.abs(lastIndex - firstIndex); + if (distance < minDistance) { valid = false; break; } + } + } + return result; +} + +function runCountdown(callback) { + let count = 3; + countdownOverlay.style.display = "flex"; + countdownOverlay.innerHTML = `${count}`; + playSFX(sfxCountdown); + + let cdTimer = setInterval(() => { + count--; + if (count > 0) { + countdownOverlay.innerHTML = `${count}`; + playSFX(sfxCountdown); + } else if (count === 0) { + countdownOverlay.innerHTML = `GO!`; + } else { + clearInterval(cdTimer); + countdownOverlay.style.display = "none"; + callback(); + } + }, 1000); +} + +function startTimer() { + timerStarted = true; + countdown = setInterval(() => { + document.getElementById("timer").textContent = --time; + if (time <= 0) { + clearInterval(countdown); + showEndScreen(false); + } + }, 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 = isWin ? time * 5 : 0; + let moveBonus = isWin ? Math.max(0, 200 - moves * 10) : 0; + let total = baseScore + timeBonus + moveBonus; + + document.getElementById("baseScoreEnd").textContent = baseScore; + document.getElementById("timeBonusEnd").textContent = "+" + timeBonus; + document.getElementById("moveBonusEnd").textContent = "+" + moveBonus; + document.getElementById("totalScoreEnd").textContent = total; + 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("img").src; + let img2 = flipped[1].querySelector("img").src; + + if (img1 === img2) { + playSFX(sfxMatch); + const now = Date.now(); + if (!pendingMatch) { pendingMatch = true; combo = 1; } + else { + if (now - lastMatchTime <= 3000) { + combo++; + let comboBonus = combo * 10; + score += comboBonus; + showComboPopup(flipped[0], combo, comboBonus); + } else combo = 1; + } + lastMatchTime = now; + flipped.forEach(c => c.classList.add("matched")); + score += 50; + document.getElementById("score").textContent = score; + time += 5; + document.getElementById("timer").textContent = time; + flipped = []; + if (document.querySelectorAll(".matched").length === cards.length) { + setTimeout(() => showEndScreen(true), 500); + } + } 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().catch(() => {}); + shuffleDistant(cards, 4).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; + pendingMatch = false; flipped = []; 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-medium.html b/gameboard-medium.html index ffcec85..37f91ab 100644 --- a/gameboard-medium.html +++ b/gameboard-medium.html @@ -4,212 +4,6 @@ Memory Card Premium 4x4 - - @@ -253,221 +47,5 @@ body { - - \ No newline at end of file