2526-web/Kelompok02-Memory-Card
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://git-eng.ukwms.ac.id/2526-web/Kelompok02-Memory-Card

Browse Source
This commit is contained in:
Nathan 2025-12-01 16:03:12 +07:00
commit 557ca52d11
1 changed files with 97 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
gameboard-easy.html
View File

@ -4,6 +4,7 @@
<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>Memory Card Premium</title> <title>Memory Card Premium</title>
<style> <style>
html, body { html, body {
margin: 0; margin: 0;
@ -58,7 +59,6 @@ body {
.icon { font-size: 18px; } .icon { font-size: 18px; }
.gameboard { .gameboard {
flex: 1; flex: 1;
display: grid; display: grid;
@ -69,7 +69,6 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
.card { .card {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -129,6 +128,38 @@ body {
border-color: #7affd6; border-color: #7affd6;
box-shadow: 0 0 15px #7affd6, 0 0 30px rgba(122,255,214,0.8); box-shadow: 0 0 15px #7affd6, 0 0 30px rgba(122,255,214,0.8);
} }
/* === COMBO POPUP TANPA ICON === */
.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;
backdrop-filter: none;
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);
}
}
</style> </style>
</head> </head>
<body> <body>
@ -162,7 +193,30 @@ let moves = 0;
let score = 0; let score = 0;
let countdown; let countdown;
// Fungsi shuffle (Fisher-Yates) let combo = 1;
let lastMatchTime = 0;
let pendingMatch = false;
/* === POPUP COMBO TANPA ICON === */
function showComboPopup(targetCard, combo, bonus) {
const popup = document.createElement("div");
popup.className = "combo-popup";
popup.innerHTML = `
COMBO x${combo}!<br>
<span style="font-size:14px; opacity:0.9;">+${bonus} Bonus</span>
`;
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 shuffleArray(array) { function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) { for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1)); const j = Math.floor(Math.random() * (i + 1));
@ -183,44 +237,64 @@ function startTimer() {
}, 1000); }, 1000);
} }
function flipCard(card){ function flipCard(card) {
if(!timerStarted) startTimer(); if (!timerStarted) startTimer();
if(flipped.length === 2 || card.classList.contains("matched") || card.classList.contains("flipped")) if (flipped.length === 2 || card.classList.contains("matched") || card.classList.contains("flipped"))
return; return;
card.classList.add("flipped"); card.classList.add("flipped");
flipped.push(card); flipped.push(card);
if(flipped.length === 2){ if (flipped.length === 2) {
moves++; moves++;
document.getElementById("moves").textContent = moves; document.getElementById("moves").textContent = moves;
let img1 = flipped[0].querySelector(".back img").src; let img1 = flipped[0].querySelector(".back img").src;
let img2 = flipped[1].querySelector(".back img").src; let img2 = flipped[1].querySelector(".back img").src;
if(img1 === img2){ if (img1 === img2) {
flipped.forEach(c => c.classList.add("matched"));
score += 10;
document.getElementById("score").textContent = score;
time += 5; // tambah 5 detik jika cocok const now = Date.now();
/* === SISTEM COMBO === */
if (!pendingMatch) {
pendingMatch = true;
combo = 1;
} else {
if (now - lastMatchTime <= 1500) {
combo++;
let comboBonus = 10 * combo;
score += comboBonus;
document.getElementById("score").textContent = score;
showComboPopup(flipped[0], combo, comboBonus);
} else {
combo = 1;
pendingMatch = true;
}
}
lastMatchTime = now;
flipped.forEach(c => c.classList.add("matched"));
time += 5;
document.getElementById("timer").textContent = time; document.getElementById("timer").textContent = time;
flipped = []; flipped = [];
} else { } else {
setTimeout(()=> { setTimeout(() => {
flipped.forEach(c=>c.classList.remove("flipped")); flipped.forEach(c => c.classList.remove("flipped"));
flipped = []; flipped = [];
}, 800); }, 800);
} }
} }
} }
function startGame(){ function startGame() {
const board = document.getElementById("game-board"); const board = document.getElementById("game-board");
board.innerHTML = ""; board.innerHTML = "";
// Shuffle kartu sebelum ditampilkan
const shuffledCards = shuffleArray([...cards]); const shuffledCards = shuffleArray([...cards]);
shuffledCards.forEach(image => { shuffledCards.forEach(image => {
@ -232,13 +306,18 @@ function startGame(){
<div class="back"><img src="${image}"></div> <div class="back"><img src="${image}"></div>
</div> </div>
`; `;
card.onclick = ()=>flipCard(card); card.onclick = () => flipCard(card);
board.appendChild(card); board.appendChild(card);
}); });
time = 60; time = 60;
moves = 0; moves = 0;
score = 0; score = 0;
combo = 1;
lastMatchTime = 0;
pendingMatch = false;
flipped = []; flipped = [];
timerStarted = false; timerStarted = false;