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

38
gameboard-easy.html
View File

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