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

95
gameboard-easy.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Card Premium</title>
<style>
html, body {
margin: 0;
@ -58,7 +59,6 @@ body {
.icon { font-size: 18px; }
.gameboard {
flex: 1;
display: grid;
@ -69,7 +69,6 @@ body {
box-sizing: border-box;
}
.card {
width: 100%;
height: 100%;
@ -129,6 +128,38 @@ body {
border-color: #7affd6;
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>
</head>
<body>
@ -162,7 +193,30 @@ let moves = 0;
let score = 0;
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) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
@ -199,14 +253,36 @@ function flipCard(card){
let img2 = flipped[1].querySelector(".back img").src;
if (img1 === img2) {
flipped.forEach(c => c.classList.add("matched"));
score += 10;
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;
time += 5; // tambah 5 detik jika cocok
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;
flipped = [];
} else {
setTimeout(() => {
flipped.forEach(c => c.classList.remove("flipped"));
@ -219,8 +295,6 @@ function flipCard(card){
function startGame() {
const board = document.getElementById("game-board");
board.innerHTML = "";
// Shuffle kartu sebelum ditampilkan
const shuffledCards = shuffleArray([...cards]);
shuffledCards.forEach(image => {
@ -239,6 +313,11 @@ function startGame(){
time = 60;
moves = 0;
score = 0;
combo = 1;
lastMatchTime = 0;
pendingMatch = false;
flipped = [];
timerStarted = false;