Beranda / Coding / Tutorial

Game Tes Memori dengan HTML

Diposting oleh Andri Fernanda Posting Komentar

 Pada tutorial kali ini saya akan berbagi sebuah kode Game yang dibuat menggunakan HTML , CSS, dan JavaScript.  Game ini dibuat dengan tujuan untuk menguji seberapa kuat kemampuan otak dalam menghafal. Game ini dibuat dengan design yang responsif sehingga bisa dijalankan di komputer ataupun di perangkat smartphone.

Cara Kerja Game Tes Memori :
Ketika aplikasi dijalankan , maka kotak berukuran 3x3 akan otomatis terisi angka acak dari 11 - 99. Pemain harus menghafalkan angka - angka yang ditampilkan dalam kotak tersebut, setelah dirasa hafal penggguna bisa mengklik tombol "MULAI" yang membuat angka - angka dalam kotak menghilang. Selanjutnya pengguna bisa memilih salah satu kotak yang kosong lalu menebak angka di kotak itu. Pengguna hanya diberi waktu selama 3 menit untuk menebak seluruh kotak. Setelah waktu habis aplikasi akan ter-submit otomatis dan aplikasi akan menampilkan skor yang berhasil didapat.

Ui game tes memori


Berikut Source Code Game Tes Memori , silahkan dikembangkan :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tes Memori Lv.3</title>
  <style>
    * { box-sizing: border-box; }

    body {
      margin: 0;
      padding: 20px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f0f3f4;
      font-family: Arial, sans-serif;
      overflow-x: hidden;
    }

    h1 {
      color: #2c3e50;
      font-size: clamp(1.5rem, 4vw, 2.2rem);
      margin: 15px 0;
    }

    .game-container {
      width: 100%;
      max-width: 600px;
      margin: auto;
      padding: 10px;
    }

    .button-container {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      justify-content: center;
      margin: 20px 0;
      width: 100%;
      max-width: 600px;
    }

    button {
      padding: 12px 30px;
      font-size: clamp(0.9rem, 3vw, 1.1rem);
      border: none;
      border-radius: 25px;
      cursor: pointer;
      background: #3498db;
      color: white;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    button:disabled {
      background: #7f8c8d;
      cursor: not-allowed;
      opacity: 0.7;
    }

    button:not(:disabled):hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(52,152,219,0.4);
    }

    /* Atur tombol Selesai saat enabled menjadi merah */
    #finishButton:enabled {
      background: #e74c3c;
    }

    #numberTable {
      width: 100%;
      aspect-ratio: 1;
      max-width: 400px;
      margin: 20px auto;
      border-spacing: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    td {
      width: calc(90% / 3);
      height: calc(90% / 3);
      max-width: 80px;
      max-height: 80px;
      background: white;
      border-radius: 8px;
      text-align: center;
      vertical-align: middle;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: clamp(1rem, 4vw, 1.5rem);
      color: #2c3e50;
      box-shadow: 0 3px 6px rgba(0,0,0,0.1);
      user-select: none;
    }

    td.hidden {
      background: #bdc3c7 !important;
      color: transparent !important;
      pointer-events: none;
    }

    td.correct {
      background: #27ae60 !important;
      color: white !important;
      pointer-events: none;
    }

    td.wrong {
      background: #333 !important;
      color: white !important;
      pointer-events: none;
    }

    #scoreDisplay {
      display: none;
    }
    
    /* Style untuk pesan total skor di bawah tombol */
    #finalScoreMessage {
      font-size: 1.2rem;
      margin-top: 10px;
      color: #2c3e50;
      text-align: center;
    }
    
    /* Style untuk countdown timer */
    #timerDisplay {
      font-size: 1.5rem;
      margin-bottom: 15px;
      color: #2c3e50;
      text-align: center;
    }

    .developer-credit {
      margin-top: 30px;
      font-size: 0.9rem;
      color: #7f8c8d;
    }

    /* Custom Modal untuk input jawaban dan hasil akhir */
    .modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 25px;
      border-radius: 15px;
      box-shadow: 0 0 20px rgba(0,0,0,0.2);
      z-index: 1000;
      width: 90%;
      max-width: 400px;
      text-align: center;
    }

    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 999;
    }

    #userInput {
      width: 100%;
      padding: 15px;
      margin: 20px 0;
      border: 2px solid #3498db;
      border-radius: 10px;
      font-size: 1.2rem;
      text-align: center;
    }

    @media (max-width: 480px) {
      td {
        border-radius: 5px;
      }
      
      #numberTable {
        border-spacing: 5px;
      }
      
      button {
        padding: 10px 25px;
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <h1>Tes Memori Lv.3</h1>
  
  <div class="game-container">
    <div class="button-container">
      <button id="goButton">Mulai</button>
      <button id="resetButton" disabled>Ulang</button>
      <button id="finishButton" disabled>Selesai</button>
    </div>
    
    <!-- Countdown Timer -->
    <div id="timerDisplay">03:00</div>
    
    <div id="scoreDisplay">Total Skor: <span id="scoreValue">0</span></div>
    <!-- Pesan akhir ditampilkan di sini juga -->
    <div id="finalScoreMessage"></div>
    
    <table id="numberTable"></table>
  </div>

  <!-- Modal untuk Input Jawaban -->
  <div class="modal" id="answerModal">
    <h3>Masukkan Angka (11-99):</h3>
    <input type="number" 
           id="userInput" 
           min="11" 
           max="99"
           oninput="this.value = this.value.replace(/[^0-9]/g, '')"
           required>
    <button id="submitAnswer">CEK</button>
  </div>

  <!-- Modal untuk Hasil Akhir -->
  <div class="modal" id="resultModal">
    <p id="resultMessage"></p>
    <button id="closeResultModal">OK</button>
  </div>
  
  <div class="modal-overlay"></div>
  hijau = 11.11 , abu-abu = 1 , hitam = 0

  <div class="developer-credit">
    Development by Andri Fernanda
  </div>

  <script>
    const GRID_SIZE = 3;
    let currentCell = null;
    let numbers = [];
    let totalScore = 0;
    let timerInterval; // Variabel untuk interval timer
    let timeLeft = 180; // 180 detik = 3 menit
    
    function generateUniqueNumbers() {
      let set = new Set();
      while (set.size < GRID_SIZE * GRID_SIZE) {
        set.add(Math.floor(Math.random() * 89) + 11);
      }
      return Array.from(set);
    }
    
    function createTable() {
      const table = document.getElementById('numberTable');
      table.innerHTML = '';
      numbers = generateUniqueNumbers();

      numbers.forEach((num, index) => {
        if (index % GRID_SIZE === 0) table.appendChild(document.createElement('tr'));
        const cell = document.createElement('td');
        cell.textContent = num;
        cell.dataset.answer = num;
        cell.dataset.score = 1; // Nilai default untuk sel belum dijawab
        table.lastChild.appendChild(cell);
      });
    }
    
    // Fungsi untuk mengupdate tampilan timer
    function updateTimer() {
      const minutes = Math.floor(timeLeft / 60);
      const seconds = timeLeft % 60;
      document.getElementById('timerDisplay').textContent =
        `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      
      if (timeLeft <= 0) {
        clearInterval(timerInterval);
        // Waktu habis, trigger tombol Selesai
        document.getElementById('finishButton').click();
      }
      
      timeLeft--;
    }
    
    // Mulai timer ketika tombol Mulai diklik
    function startTimer() {
      timeLeft = 180; // Reset waktu ke 3 menit
      updateTimer(); // Update langsung tampilan
      timerInterval = setInterval(updateTimer, 1000);
    }
    
    // Bersihkan timer ketika reset atau game selesai
    function stopTimer() {
      clearInterval(timerInterval);
    }
    
    document.getElementById('goButton').addEventListener('click', () => {
      document.querySelectorAll('#numberTable td').forEach(cell => {
        cell.classList.add('hidden'); // Sembunyikan angka
        cell.style.pointerEvents = 'auto';
      });
      document.getElementById('goButton').disabled = true;
      document.getElementById('resetButton').disabled = false;
      document.getElementById('finishButton').disabled = false;
      startTimer();
    });
    
    document.getElementById('resetButton').addEventListener('click', () => {
      createTable();
      document.getElementById('goButton').disabled = false;
      document.getElementById('resetButton').disabled = true;
      document.getElementById('finishButton').disabled = true;
      totalScore = 0;
      document.getElementById('scoreValue').textContent = totalScore;
      document.getElementById('finalScoreMessage').textContent = "";
      // Reset timer display
      document.getElementById('timerDisplay').textContent = "03:00";
      stopTimer();
    });
    
    document.getElementById('numberTable').addEventListener('click', (e) => {
      if (e.target.tagName === 'TD' && e.target.classList.contains('hidden')) {
        currentCell = e.target;
        document.getElementById('answerModal').style.display = 'block';
        document.querySelector('.modal-overlay').style.display = 'block';
        document.getElementById('userInput').focus();
      }
    });
    
    document.getElementById('submitAnswer').addEventListener('click', () => {
      const userAnswer = parseInt(document.getElementById('userInput').value);
      const correctAnswer = parseInt(currentCell.dataset.answer);

      if (userAnswer === correctAnswer) {
        currentCell.classList.remove('hidden');
        currentCell.classList.add('correct');
        currentCell.style.backgroundColor = '#27ae60'; // Hijau
        currentCell.style.color = 'white';
        currentCell.dataset.score = 11.11; // Nilai 11.11 untuk jawaban benar
      } else {
        currentCell.classList.remove('hidden');
        currentCell.classList.add('wrong');
        currentCell.style.backgroundColor = '#333'; // Hitam
        currentCell.style.color = 'white';
        // Tampilkan jawaban dengan style strikethrough
        currentCell.innerHTML = '<s>' + currentCell.dataset.answer + '</s>';
        currentCell.dataset.score = 0; // Nilai 0 untuk jawaban salah
      }

      currentCell.style.pointerEvents = 'none'; // Nonaktifkan sel setelah dijawab
      document.getElementById('userInput').value = '';
      document.getElementById('answerModal').style.display = 'none';
      document.querySelector('.modal-overlay').style.display = 'none';
    });
    
    document.querySelector('.modal-overlay').addEventListener('click', () => {
      document.getElementById('answerModal').style.display = 'none';
      document.getElementById('resultModal').style.display = 'none';
      document.querySelector('.modal-overlay').style.display = 'none';
    });
    
    document.getElementById('finishButton').addEventListener('click', () => {
      stopTimer();
      totalScore = 0;

      document.querySelectorAll('#numberTable td').forEach(cell => {
        totalScore += parseFloat(cell.dataset.score || 1); // Default score adalah 1 untuk sel belum dijawab
        cell.style.pointerEvents = 'none'; // Nonaktifkan semua sel karena game sudah selesai
      });

      document.getElementById('scoreValue').textContent = totalScore.toFixed(2); // Tampilkan skor dengan 2 desimal
      
      // Tentukan keterangan berdasarkan total skor dengan kriteria baru
      let remark = "";
      if (totalScore >= 0 && totalScore <= 60) {
        remark = "memori anda kurang bagus";
      } else if (totalScore >= 61 && totalScore <= 76) {
        remark = "memori anda cukup bagus";
      } else if (totalScore >= 77 && totalScore <= 100) {
        remark = "Selamat memori anda sangat bagus.";
      }
      
      // Set pesan hasil di modal dan di area bawah tombol
      document.getElementById('resultMessage').innerHTML =
        `<b> Game berhasil diselesaikan </b><br>
         Total Skor Anda: ${totalScore.toFixed(2)}, ${remark}`;
      
      document.getElementById('finalScoreMessage').textContent =
         `Total Skor Anda: ${totalScore.toFixed(2)}, ${remark}`;
      
      // Tampilkan modal hasil
      document.getElementById('resultModal').style.display = 'block';
      document.querySelector('.modal-overlay').style.display = 'block';

      // Nonaktifkan tombol Mulai dan Selesai
      document.getElementById('goButton').disabled = true;
      document.getElementById('finishButton').disabled = true;
      document.getElementById('resetButton').disabled = false;
    });
    
    document.getElementById('closeResultModal').addEventListener('click', () => {
      document.getElementById('resultModal').style.display = 'none';
      document.querySelector('.modal-overlay').style.display = 'none';
    });
    
    createTable();
  </script>
</body>
</html>

Anda mungkin menyukai postingan ini

Posting Komentar untuk "Game Tes Memori dengan HTML"

Posting Komentar