Compare commits
2 Commits
27fdee7566
...
447c86bf39
| Author | SHA1 | Date | |
|---|---|---|---|
| 447c86bf39 | |||
| ce98db75c5 |
@ -19,7 +19,7 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TOP UI */
|
|
||||||
.topbar {
|
.topbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -56,7 +56,7 @@ body {
|
|||||||
box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 0 6px rgba(255,255,255,0.6);
|
box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 0 6px rgba(255,255,255,0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* === 5×4 GRID === */
|
|
||||||
.gameboard {
|
.gameboard {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
@ -67,7 +67,7 @@ body {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* === CARDS === */
|
|
||||||
.card {
|
.card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -84,7 +84,7 @@ body {
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Face */
|
|
||||||
.front, .back {
|
.front, .back {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -116,7 +116,7 @@ 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 & Flip */
|
|
||||||
.card:not(.flipped):hover .front {
|
.card:not(.flipped):hover .front {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
transition: 0.25s;
|
transition: 0.25s;
|
||||||
@ -124,14 +124,14 @@ body {
|
|||||||
|
|
||||||
.card.flipped .inner { transform: rotateY(180deg); }
|
.card.flipped .inner { transform: rotateY(180deg); }
|
||||||
|
|
||||||
/* Match Shine */
|
|
||||||
.card.matched .front,
|
.card.matched .front,
|
||||||
.card.matched .back {
|
.card.matched .back {
|
||||||
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 === */
|
|
||||||
.combo-popup {
|
.combo-popup {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
@ -222,7 +222,6 @@ body {
|
|||||||
<div class="end-box">
|
<div class="end-box">
|
||||||
<div class="end-title">🎉 Selamat!</div>
|
<div class="end-title">🎉 Selamat!</div>
|
||||||
<p>Anda berhasil menyelesaikan permainan!</p>
|
<p>Anda berhasil menyelesaikan permainan!</p>
|
||||||
|
|
||||||
<div class="score-row"><span>Skor Base:</span> <span id="baseScoreEnd">0</span></div>
|
<div class="score-row"><span>Skor Base:</span> <span id="baseScoreEnd">0</span></div>
|
||||||
<div class="score-row"><span>Time Bonus:</span> <span id="timeBonusEnd">0</span></div>
|
<div class="score-row"><span>Time Bonus:</span> <span id="timeBonusEnd">0</span></div>
|
||||||
<div class="score-row"><span>Move Bonus:</span> <span id="moveBonusEnd">0</span></div>
|
<div class="score-row"><span>Move Bonus:</span> <span id="moveBonusEnd">0</span></div>
|
||||||
@ -241,7 +240,7 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/* === 10 GAMBAR (20 kartu) === */
|
|
||||||
const images = [
|
const images = [
|
||||||
"images/fruit1.png",
|
"images/fruit1.png",
|
||||||
"images/fruit2.png",
|
"images/fruit2.png",
|
||||||
@ -262,7 +261,6 @@ let time = 60;
|
|||||||
let moves = 0;
|
let moves = 0;
|
||||||
let score = 0;
|
let score = 0;
|
||||||
let countdown;
|
let countdown;
|
||||||
|
|
||||||
let combo = 1;
|
let combo = 1;
|
||||||
let pendingMatch = false;
|
let pendingMatch = false;
|
||||||
let lastMatchTime = 0;
|
let lastMatchTime = 0;
|
||||||
@ -282,7 +280,6 @@ function showComboPopup(targetCard, combo, bonus) {
|
|||||||
setTimeout(() => popup.remove(), 1500);
|
setTimeout(() => popup.remove(), 1500);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function shuffleDistant(cards, minDistance = 4) {
|
function shuffleDistant(cards, minDistance = 4) {
|
||||||
let valid = false;
|
let valid = false;
|
||||||
let result;
|
let result;
|
||||||
|
|||||||
@ -267,7 +267,7 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/* === 8 GAMBAR (16 kartu) === */
|
|
||||||
const images = [
|
const images = [
|
||||||
"images/fruit1.png",
|
"images/fruit1.png",
|
||||||
"images/fruit2.png",
|
"images/fruit2.png",
|
||||||
@ -286,7 +286,6 @@ let time = 60;
|
|||||||
let moves = 0;
|
let moves = 0;
|
||||||
let score = 0;
|
let score = 0;
|
||||||
let countdown;
|
let countdown;
|
||||||
|
|
||||||
let combo = 1;
|
let combo = 1;
|
||||||
let pendingMatch = false;
|
let pendingMatch = false;
|
||||||
let lastMatchTime = 0;
|
let lastMatchTime = 0;
|
||||||
@ -306,7 +305,6 @@ function showComboPopup(targetCard, combo, bonus) {
|
|||||||
setTimeout(() => popup.remove(), 1500);
|
setTimeout(() => popup.remove(), 1500);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function shuffleDistant(cards, minDistance = 4) {
|
function shuffleDistant(cards, minDistance = 4) {
|
||||||
let valid = false;
|
let valid = false;
|
||||||
let result;
|
let result;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user