KODING teks DAN ANGKA

<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>