<style>
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
background-color: #f0f9ff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
color: #333;
}
.container {
background-color: #ffffff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
text-align: center;
width: 90%;
max-width: 600px;
}
h1 {
color: #00796b;
font-size: 2.5em;
margin-bottom: 20px;
}
#game-box {
margin-top: 20px;
}
.card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.card {
background-color: #b2ebf2;
color: #004d40;
border: none;
padding: 20px;
font-size: 2em;
font-weight: bold;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.card:hover:not([disabled]) {
background-color: #80deea;
transform: scale(1.05);
}
.card.correct {
background-color: #a8e6cf;
}
.card.incorrect {
background-color: #ff8a80;
}
.card[disabled] {
opacity: 0.7;
cursor: not-allowed;
}
#info-display {
font-size: 1.8em;
font-weight: bold;
margin-bottom: 15px;
height: 30px;
}
#score-display {
font-size: 1.5em;
font-weight: bold;
}
#final-score-box {
margin-top: 20px;
}
#restart-button {
background-color: #009688;
color: #fff;
border: none;
padding: 12px 25px;
font-size: 1.2em;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 20px;
}
#restart-button:hover {
background-color: #00695c;
}
.hide {
display: none;
}
</style>
<div class="container">
<h1>Ayo Bermain Angka!</h1>
<div id="game-box">
<p>Cocokkan angka dengan kata yang benar!</p>
<div class="card-grid" id="card-grid">
</div>
<div id="info-display"></div>
<div id="score-display">Skor: <span id="score">0</span></div>
</div>
<div id="final-score-box" class="hide">
<h2>Permainan Selesai!</h2>
<p>Skor total kamu adalah: <span id="final-score">0</span></p>
<button id="restart-button">Kembali ke Awal</button>
</div>
</div>
<script>
const numbers = [
{ value: 1, text: "SATU" },
{ value: 2, text: "DUA" },
{ value: 3, text: "TIGA" },
{ value: 4, text: "EMPAT" },
{ value: 5, text: "LIMA" },
{ value: 6, text: "ENAM" },
{ value: 7, text: "TUJUH" },
{ value: 8, text: "DELAPAN" },
{ value: 9, text: "SEMBILAN" },
{ value: 10, text: "SEPULUH" },
];
const cardGrid = document.getElementById('card-grid');
const scoreElement = document.getElementById('score');
const infoDisplay = document.getElementById('info-display');
const gameBox = document.getElementById('game-box');
const finalScoreBox = document.getElementById('final-score-box');
const finalScoreElement = document.getElementById('final-score');
const restartButton = document.getElementById('restart-button');
let selectedCards = [];
let score = 0;
let matchesFound = 0;
function startGame() {
selectedCards = [];
score = 0;
matchesFound = 0;
scoreElement.textContent = score;
gameBox.classList.remove('hide');
finalScoreBox.classList.add('hide');
infoDisplay.textContent = "";
cardGrid.innerHTML = "";
// Gabungkan angka dan teks, lalu acak
const gameCards = [];
numbers.forEach(item => {
gameCards.push({ value: item.value, type: 'number', display: item.value });
gameCards.push({ value: item.value, type: 'text', display: item.text });
});
gameCards.sort(() => Math.random() - 0.5);
gameCards.forEach(item => {
const card = document.createElement('div');
card.classList.add('card');
card.textContent = item.display;
card.dataset.value = item.value;
card.dataset.type = item.type;
card.addEventListener('click', () => handleCardClick(card));
cardGrid.appendChild(card);
});
}
function handleCardClick(card) {
if (selectedCards.length < 2 && !card.classList.contains('correct') && !card.disabled) {
card.disabled = true;
card.style.transform = 'scale(1.05)';
selectedCards.push(card);
if (selectedCards.length === 2) {
checkMatch();
}
}
}
function checkMatch() {
const [card1, card2] = selectedCards;
const isMatch = card1.dataset.value === card2.dataset.value && card1.dataset.type !== card2.dataset.type;
if (isMatch) {
card1.classList.add('correct');
card2.classList.add('correct');
infoDisplay.textContent = '👍';
score += 20;
scoreElement.textContent = score;
matchesFound++;
selectedCards = [];
setTimeout(() => {
infoDisplay.textContent = "";
checkGameEnd();
}, 1000);
} else {
card1.classList.add('incorrect');
card2.classList.add('incorrect');
infoDisplay.textContent = '⚡';
score += 0;
scoreElement.textContent = score;
setTimeout(() => {
card1.classList.remove('incorrect');
card2.classList.remove('incorrect');
card1.disabled = false;
card2.disabled = false;
infoDisplay.textContent = "";
selectedCards = [];
}, 1000);
}
}
function checkGameEnd() {
if (matchesFound === numbers.length) {
setTimeout(() => {
gameBox.classList.add('hide');
finalScoreBox.classList.remove('hide');
finalScoreElement.textContent = score;
}, 500);
}
}
restartButton.addEventListener('click', startGame);
startGame();
</script>