Cách tạo game nghe tiếng kêu đoán con vật bằng AI

3 Đánh giá

Hồi nhỏ chắc ai cũng từng chơi trò Đoán con vật qua tiếng kêu nhưng với sự phát triển của công nghệ hiện nay, giờ là lúc đưa trò chơi quốc dân này lên một tầm cao mới với sự trợ giúp của AI.

Sẽ không chỉ là những hình ảnh tĩnh nhàm chán mà bạn có thể làm một tựa game cực kỳ sống động. Chỉ với vài thao tác kéo thả và một công cụ AI, bạn sẽ biến những tiếng kêu quen thuộc như "meo meo", "gâu gâu" thành một trải nghiệm tương tác đầy thú vị.

Bước 1: Bạn lên mạng tìm 10 file âm thanh tiếng kêu của các con vật dễ nhận biết (dạng mp3) ứng với 10 câu hỏi

Tải 10 file âm thanh tiếng kêu con vật

Bước 2: Sau khi tải xong 10 file âm thanh này về, bạn hãy copy chúng vào chung một thư mục. Ví dụ doan-con-vat/sounds

Copy 10 file âm thanh vào cùng thư mục

Bước 3: Sau khi đã sao chép cả 10 file âm thanh vào cùng 1 thư mục Sounds, bây giờ, bạn hãy mở ứng dụng ChatGPT lên rồi nhập lệnh sau

Tôi đã tải về 10 file âm thanh gồm bo.mp3, cho.mp3, de.mp3, ho.mp3, lon.mp3, meo.mp3, ngua.mp3, qua.mp3, soi.mp3, vit.mp3. Hãy viết đoạn mã hoàn chỉnh cho 10 câu hỏi ứng với tiếng kêu 10 con vật, mỗi câu sẽ tính 1 điểm, người chơi sẽ có khoảng 10 giây để viết câu trả lời vào ô trống

Bước 4: Sau đó, ChatGPT sẽ phân thích prompt của bạn rồi viết một đoạn mã như bên dưới.

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Nghe tiếng kêu đoán con vật</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background: #f5f5f5;
      padding: 20px;
      margin: 0;
    }

    .game-box {
      max-width: 500px;
      margin: auto;
      background: white;
      padding: 25px;
      border-radius: 15px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    h1 {
      font-size: 28px;
    }

    .info {
      font-size: 20px;
      margin: 15px 0;
    }

    input {
      width: 80%;
      padding: 12px;
      font-size: 18px;
      margin: 15px 0;
      border: 2px solid #ccc;
      border-radius: 8px;
    }

    button {
      padding: 12px 20px;
      font-size: 18px;
      margin: 10px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    .play-btn {
      background: #4caf50;
      color: white;
    }

    .submit-btn {
      background: #2196f3;
      color: white;
    }

    #result {
      font-size: 20px;
      margin-top: 15px;
      font-weight: bold;
    }

    @media (max-width: 600px) {
      input, button {
        width: 90%;
      }
    }
  </style>
</head>
<body>
  <div class="game-box">
    <h1>🎵 Đoán con vật</h1>
    <div class="info">Câu: <span id="questionNumber">1</span>/10</div>
    <div class="info">⏰ Thời gian: <span id="timer">10</span>s</div>
    <div class="info">⭐ Điểm: <span id="score">0</span></div>

    <button class="play-btn" onclick="playSound()">🔊 Nghe âm thanh</button>
    <br>
    <input type="text" id="answer" placeholder="Nhập tên con vật..." />
    <br>
    <button class="submit-btn" onclick="checkAnswer()">Xác nhận</button>

    <div id="result"></div>
  </div>

  <audio id="animalSound"></audio>

  <script>
    const questions = [
      { animal: "bò", sound: "sounds/bo.mp3" },
      { animal: "chó", sound: "sounds/cho.mp3" },
      { animal: "dê", sound: "sounds/de.mp3" },
      { animal: "hổ", sound: "sounds/ho.mp3" },
      { animal: "lợn", sound: "sounds/lon.mp3" },
      { animal: "mèo", sound: "sounds/meo.mp3" },
      { animal: "ngựa", sound: "sounds/ngua.mp3" },
      { animal: "quạ", sound: "sounds/qua.mp3" },
      { animal: "sói", sound: "sounds/soi.mp3" },
      { animal: "vịt", sound: "sounds/vit.mp3" }
    ];

    let currentQuestion = 0;
    let score = 0;
    let timeLeft = 10;
    let timer;

    const audio = document.getElementById("animalSound");

    function loadQuestion() {
      document.getElementById("questionNumber").textContent = currentQuestion + 1;
      document.getElementById("answer").value = "";
      document.getElementById("result").textContent = "";
      timeLeft = 10;
      document.getElementById("timer").textContent = timeLeft;

      audio.src = questions[currentQuestion].sound;
      playSound();

      clearInterval(timer);
      timer = setInterval(countdown, 1000);
    }

    function playSound() {
      audio.currentTime = 0;
      audio.play();
    }

    function countdown() {
      timeLeft--;
      document.getElementById("timer").textContent = timeLeft;

      if (timeLeft <= 0) {
        clearInterval(timer);
        nextQuestion();
      }
    }

    function checkAnswer() {
      clearInterval(timer);

      let userAnswer = document
        .getElementById("answer")
        .value
        .trim()
        .toLowerCase();

      let correctAnswer = questions[currentQuestion].animal.toLowerCase();

      if (userAnswer === correctAnswer) {
        score++;
        document.getElementById("score").textContent = score;
        document.getElementById("result").textContent = "✅ Chính xác!";
      } else {
        document.getElementById("result").textContent =
          "❌ Sai! Đáp án: " + questions[currentQuestion].animal;
      }

      setTimeout(nextQuestion, 1500);
    }

    function nextQuestion() {
      currentQuestion++;

      if (currentQuestion < questions.length) {
        loadQuestion();
      } else {
        showFinalResult();
      }
    }

    function showFinalResult() {
      document.querySelector(".game-box").innerHTML = `
        <h1>🎉 Hoàn thành!</h1>
        <p style="font-size:24px;">Điểm của bạn: ${score}/10</p>
        <button onclick="location.reload()">🔄 Chơi lại</button>
      `;
    }

    loadQuestion();
  </script>
</body>
</html>

Bước 5: Bạn hãy lưu đoạn mã trên thành file index.html rồi copy vào cùng thư mục Đoán con vật với file Sounds ở trên. Bạn click chuột phải vào file index.html chọn Open With/Google Chrome để chơi thử.

Lưu thành file index.html

Bước 6: Bạn có thể cải tiến thêm cho game Đoán con vật bằng cách nhập Prompt sau vào ChatGPT

tôi muốn hình nền tươi sáng thay đổi theo mỗi câu hỏi nhưng vẫn làm nổi bật chữ, kết thúc mỗi câu hỏi mà người chơi trả lời đúng, sai hoặc không trả lời thì đều có thông báo. Khi kết thúc cả 10 câu hỏi sẽ có câu nhận xét dí dỏm dựa trên số điểm mà người chơi đạt được.

Sau đó, Chat GPT sẽ viết cho bạn đoạn mã mới. Bạn chỉ cần copy đè lên đoạn mã cũ trong file index.html rồi tiếp tục chơi thử xem còn vấn đề gì nữa không và yêu cầu ChatGPT sửa.

Video hướng dẫn làm game nghe tiếng kêu đoán con vật bằng AI