Find The Bird's game | AI game creator

Click here for free DL of the app version that can save data.

No:41713

28

Find The Bird
Developer User18699｜Date and time 24/2/9 12:35:36
Build time 17.222 sec｜Game capacity 4.204KB｜

ผมเป็นโปรแกรมเมอร์ และจะมาสร้างเกม "ค้นหานก" ให้คุณเล่นกันครับ โดยมีการใช้รูปภาพของสัญลักษณ์ (pictogram) และรอบรู้กับการดำเนินการบนสมาร์ทโฟน เปิดใช้งานกระบวนการได้เลยครับ

สามารถคัดลอกโค้ดข้างต้นและวางลงในไฟล์ HTML เป็นไฟล์เดียวกัน เมื่อเปิดหน้าเว็บขึ้นมา คุณจะสามารถเล่นเกม "ค้นหานก" ได้ครับ ใช้ตัวอักษร pictogram เป็นรูปภาพของนก เมื่อคลิกที่เซลล์จะเผยแพร่รูปภาพของนก และเมื่อคุณค้นพบนกที่ถูกต้อง คุณจะชนะเกม แต่ถ้าคุณเผลอคลิกที่นกผิด คุณถือว่าแพ้เกมแล้ว เกมก็จะเริ่มต้นใหม่อีกครั้งครับ

→ 　

0　

0　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

ผมเป็นโปรแกรมเมอร์ และจะมาสร้างเกม "ค้นหานก" ให้คุณเล่นกันครับ โดยมีการใช้รูปภาพของสัญลักษณ์ (pictogram) และรอบรู้กับการดำเนินการบนสมาร์ทโฟน เปิดใช้งานกระบวนการได้เลยครับ

```html
<!DOCTYPE html>
<html>
<head>
  <title>ค้นหานก</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: Arial, sans-serif;
    }

#game {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
      max-width: 400px;
      padding: 10px;
      border: 2px solid #333;
      border-radius: 5px;
    }

.cell {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      background-color: #f1f1f1;
      cursor: pointer;
    }

.hidden {
      background-color: #333;
      color: #fff;
    }
  </style>
</head>
<body>
  <div id="game"></div>

<script>
    // สร้างรายการของนกที่ต้องการค้นหารูปในการเล่นเกม
    const birds = [
      "🐦", "🦆", "🦅", "🐧",
      "🐤", "🕊️", "🐥", "🦃",
      "🦜", "🐔", "🐣", "🐓"
    ];

// สร้างประเภทปุ่มสำหรับนกที่ต้องการค้นหา
    const hiddenBird = birds[Math.floor(Math.random() * birds.length)];
    const cellsWithBird = document.getElementsByClassName(hiddenBird);

// สร้างตารางเกมและปุ่มสำหรับนกทั้งหมด
    const gameContainer = document.getElementById("game");
    birds.forEach((bird, index) => {
      const cell = document.createElement("div");
      cell.className = `cell ${bird}`;
      cell.innerHTML = "?";
      cell.addEventListener("click", () => revealBird(cell, index));
      gameContainer.appendChild(cell);
    });

// เปิดเผยรูปภาพของนกในเซลล์ที่เลือก
    function revealBird(cell, index) {
      cell.innerHTML = birds[index];
      cell.classList.add("hidden");

// ตรวจสอบว่าเล่นเกมเสร็จหรือยัง
      const hiddenCells = document.getElementsByClassName("cell");
      if (hiddenCells.length === 1 && hiddenCells[0].classList.contains(hiddenBird)) {
        endGame(true);
      }
    }

// สิ้นสุดเกมและแสดงผลลัพธ์
    function endGame(victory) {
      const message = victory ? "คุณพบนกที่ถูกต้องแล้ว! 🎉" : "เสียใจด้วย! คุณพบนกผิด!";
      alert(message);

// รีเซ็ตโหมดเกม
      const cells = document.getElementsByClassName("cell");
      Array.from(cells).forEach(cell => {
        cell.innerHTML = "?";
        cell.classList.remove("hidden");
      });
    }
  </script>
</body>
</html>
```

สามารถคัดลอกโค้ดข้างต้นและวางลงในไฟล์ HTML เป็นไฟล์เดียวกัน เมื่อเปิดหน้าเว็บขึ้นมา คุณจะสามารถเล่นเกม "ค้นหานก" ได้ครับ ใช้ตัวอักษร pictogram เป็นรูปภาพของนก เมื่อคลิกที่เซลล์จะเผยแพร่รูปภาพของนก และเมื่อคุณค้นพบนกที่ถูกต้อง คุณจะชนะเกม แต่ถ้าคุณเผลอคลิกที่นกผิด คุณถือว่าแพ้เกมแล้ว เกมก็จะเริ่มต้นใหม่อีกครั้งครับ