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

Compare commits

base: 2526-web:11009161588bbaae97c9f9ed16f69b06c62ec947
Branches Tags
2526-web:main
..
compare: 2526-web:ae7eb37ee904d66a54d07f003600a5063429bcf0
Branches Tags
2526-web:main

No commits in common. "11009161588bbaae97c9f9ed16f69b06c62ec947" and "ae7eb37ee904d66a54d07f003600a5063429bcf0" have entirely different histories.
1100916158 ... ae7eb37ee9

1 changed files with 17 additions and 96 deletions
Show Stats Expand all files Collapse all files

113
gameboard-easy.html
View File

@ -4,7 +4,6 @@
<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;
@ -59,6 +58,7 @@ body {
.icon { font-size: 18px; } .icon { font-size: 18px; }
.gameboard { .gameboard {
flex: 1; flex: 1;
display: grid; display: grid;
@ -69,6 +69,7 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
.card { .card {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -128,38 +129,6 @@ 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>
@ -193,30 +162,7 @@ let moves = 0;
let score = 0; let score = 0;
let countdown; let countdown;
let combo = 1; // Fungsi shuffle (Fisher-Yates)
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));
@ -237,64 +183,44 @@ 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){
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")); flipped.forEach(c => c.classList.add("matched"));
score += 10;
document.getElementById("score").textContent = score;
time += 5; time += 5; // tambah 5 detik jika cocok
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 => {
@ -306,18 +232,13 @@ 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;