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

Compare commits

base: 2526-web:3bc6bf39a6a7a8465327acc0b8d930feb28a4f68
Branches Tags
2526-web:main
..
compare: 2526-web:ec6c46fe118f5303d435afec1370fda323f09ff4
Branches Tags
2526-web:main

2 Commits
3bc6bf39a6 ... ec6c46fe11

Author SHA1 Message Date
Nathan
ec6c46fe11 Merge branch 'main' of https://git-eng.ukwms.ac.id/2526-web/Kelompok02-Memory-Card 2025-12-01 14:58:48 +07:00
Nathan
8591a5aea9 Merge branch 'main' of https://git-eng.ukwms.ac.id/2526-web/Kelompok02-Memory-Card 2025-12-01 14:58:43 +07:00
1 changed files with 16 additions and 22 deletions
Show Stats Expand all files Collapse all files

36
gameboard-easy.html
View File

@ -18,7 +18,6 @@ body {
justify-content: space-between;
align-items: center;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.45);
border-bottom: 2px solid rgba(255, 255, 255, 0.6);
backdrop-filter: blur(14px);
@ -55,20 +54,20 @@ body {
box-shadow:
0 3px 6px rgba(0,0,0,0.20),
inset 0 0 6px rgba(255,255,255,0.6);
inset 0 0 6px rgba(255,255,255,0.6);
}
.icon {
font-size: 18px;
}
.gameboard {
display: grid;
grid-template-columns: repeat(5, 120px);
gap: 18px;
grid-template-columns: repeat(4, 100px); /* 4 kolom */
grid-template-rows: repeat(3, 120px); /* 3 baris */
justify-content: center;
margin: 30px auto;
gap: 15px;
margin: 20px auto;
}
.card {
@ -118,18 +117,15 @@ body {
filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45));
}
/* HOVER EFFECT */
.card:not(.flipped):hover .front {
transform: scale(1.05);
transition: 0.25s;
}
/* FLIP ANIMATION */
.card.flipped .inner {
transform: rotateY(180deg);
}
/* MATCHED GLOW */
.card.matched .front,
.card.matched .back {
border-color: #7affd6;
@ -140,7 +136,7 @@ body {
@media (max-width: 600px) {
.gameboard {
grid-template-columns: repeat(4, 90px);
grid-template-columns: repeat(3, 90px);
gap: 14px;
}
@ -153,9 +149,8 @@ body {
</head>
<body>
<header class="topbar">
<button class="back-btn" onclick="history.back()">←</button>
<button class="back-btn" onclick="window.location.href='mainboard.html'">←</button>
<div class="right-info">
<div class="pill"><span class="icon">⏱</span><span id="timer">60</span>s</div>
@ -167,9 +162,14 @@ body {
<div id="game-board" class="gameboard"></div>
<script>
const images = [
"alpukat.jpg", "anggur.jpg", "apel.jpg", "buah naga.jpg", "jambu.jpg",
"jeruk.jpg", "lemon.jpg", "nanas.jpg", "pisang.jpg", "semangka.jpg"
"asset/alpukat.jpg",
"asset/anggur.jpg",
"asset/apel.jpg",
"asset/buah naga.jpg",
"asset/jambu.jpg",
"asset/jeruk.jpg"
];
let cards = [...images, ...images];
@ -190,9 +190,6 @@ let moves = 0;
let score = 0;
let countdown;
/* ========================
START TIMER
======================== */
function startTimer() {
timerStarted = true;
@ -207,9 +204,6 @@ function startTimer() {
}, 1000);
}
/* ========================
FLIP LOGIC
======================== */
function flipCard(card) {
if (!timerStarted) startTimer();
@ -240,7 +234,6 @@ function flipCard(card) {
}
}
function startGame() {
const board = document.getElementById("game-board");
board.innerHTML = "";
@ -273,5 +266,6 @@ function startGame() {
startGame();
</script>
</body>
</html>