Headlines

พัฒนาเกมวิ่งเก็บเหรียญด้วย ChatGPT – จากโค้ดพื้นฐานสู่เกมที่สมบูรณ์

Kuma05 mins

ในยุคของ AI การพัฒนาเกมไม่จำเป็นต้องใช้เวลานานหรือมีความเชี่ยวชาญสูงอีกต่อไป ด้วย ChatGPT เราสามารถเริ่มต้นจากแนวคิดพื้นฐานและค่อย ๆ พัฒนาเกมให้ซับซ้อนขึ้นได้ โดยใช้คำสั่ง (Prompt) เพื่อเพิ่มความสามารถและฟีเจอร์ต่าง ๆ ในเกมอย่างเป็นขั้นตอน ในบทความนี้ เราจะสร้างเกมวิ่งเก็บเหรียญโดยเริ่มจากโครงสร้างง่าย ๆ และพัฒนาไปจนเป็นเกมที่มีกราฟิกและการเคลื่อนไหวที่สมบูรณ์

ขั้นตอนการพัฒนาเกม

1. เริ่มต้นด้วย Prompt เบื้องต้น

เราเริ่มต้นโดยการขอให้ ChatGPT ช่วยสร้างโครงสร้างเกมพื้นฐานด้วย HTML5 โดยไม่มีกราฟฟิก และตัวละครเป็นเพียงสี่เหลี่ยมง่าย ๆ ที่สามารถกระโดดและเคลื่อนที่ในจอได้

Prompt “เขียนเกมวิ่งเก็บเหรียญ ด้วย html5”

ผลลัพธ์ที่ได้ ChatGPT สร้างโค้ดพื้นฐานของเกมที่มี

  • พื้นหลังที่เป็นสีพื้นฐาน
  • ตัวละครเป็นสี่เหลี่ยมที่สามารถกระโดดได้
  • เหรียญที่แสดงเป็นสี่เหลี่ยมเล็ก ๆ สุ่มตำแหน่ง

โค้ดพื้นฐานที่ได้จาก ChatGPT

ไฟล์ index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>เกมวิ่งเก็บเหรียญ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script src="script.js"></script>
</body>
</html>

ไฟล์ style.css

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f8ff;
}

canvas {
  border: 2px solid #000;
}

file script.js

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

canvas.width = 800;
canvas.height = 400;

// ตัวละคร
const player = {
  x: 50,
  y: canvas.height - 60,
  width: 40,
  height: 40,
  color: "blue",
  dy: 0,
  gravity: 0.5,
  jumpPower: -10,
  isJumping: false,
};

// เหรียญ
const coins = [];
const coinSize = 20;
const coinInterval = 2000;
let lastCoinTime = 0;

// คะแนน
let score = 0;

// สร้างเหรียญ
function createCoin() {
  const coin = {
    x: canvas.width,
    y: Math.random() * (canvas.height - coinSize - 100) + 50,
    width: coinSize,
    height: coinSize,
    color: "gold",
  };
  coins.push(coin);
}

// อัพเดตเกม
function update(deltaTime) {
  // อัพเดตตัวละคร
  if (player.isJumping) {
    player.dy += player.gravity;
    player.y += player.dy;

    if (player.y > canvas.height - player.height) {
      player.y = canvas.height - player.height;
      player.isJumping = false;
    }
  }

  // สร้างเหรียญใหม่
  if (Date.now() - lastCoinTime > coinInterval) {
    createCoin();
    lastCoinTime = Date.now();
  }

  // อัพเดตเหรียญ
  for (let i = coins.length - 1; i >= 0; i--) {
    coins[i].x -= 3;

    // ตรวจสอบการชนกับตัวละคร
    if (
      player.x < coins[i].x + coins[i].width &&
      player.x + player.width > coins[i].x &&
      player.y < coins[i].y + coins[i].height &&
      player.y + player.height > coins[i].y
    ) {
      coins.splice(i, 1); // ลบเหรียญที่ชนออก
      score++;
    } else if (coins[i].x + coins[i].width < 0) {
      coins.splice(i, 1); // ลบเหรียญที่หลุดจอ
    }
  }
}

// วาดภาพ
function draw() {
  // เคลียร์จอ
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // วาดตัวละคร
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.width, player.height);

  // วาดเหรียญ
  coins.forEach((coin) => {
    ctx.fillStyle = coin.color;
    ctx.fillRect(coin.x, coin.y, coin.width, coin.height);
  });

  // วาดคะแนน
  ctx.fillStyle = "black";
  ctx.font = "20px Arial";
  ctx.fillText(`Score: ${score}`, 10, 30);
}

// เกมลูป
let lastTime = 0;
function gameLoop(timestamp) {
  const deltaTime = timestamp - lastTime;
  lastTime = timestamp;

  update(deltaTime);
  draw();

  requestAnimationFrame(gameLoop);
}

// การควบคุม
window.addEventListener("keydown", (e) => {
  if (e.code === "Space" && !player.isJumping) {
    player.isJumping = true;
    player.dy = player.jumpPower;
  }
});

// เริ่มเกม
gameLoop();

ผลลัพธ์จากโค้ดพื้นฐาน

ต่อไปเราจะเริ่มทำให้เกมสมบูรณ์ขึ้น โดยการเพิ่มกราฟฟิก

2. เพิ่ม Prompt เพื่อพัฒนากราฟิก สำหรับตัวละครและเหรียญ

Prompt “เพิ่มภาพกราฟิกให้ตัวละครและเหรียญ โดยใช้ไฟล์รูปภาพ”

ผลลัพธ์ที่ได้ จาก ChatGPT

// โหลดภาพตัวละครและเหรียญ
const playerImage = new Image();
playerImage.src = "player.png"; // ใส่ชื่อไฟล์รูปตัวละคร

const coinImage = new Image();
coinImage.src = "coin.png"; // ใส่ชื่อไฟล์รูปเหรียญ

// วาดตัวละครและเหรียญ
ctx.drawImage(playerImage, player.x, player.y, player.width, player.height);
ctx.drawImage(coinImage, coin.x, coin.y, coin.width, coin.height);

3. เพิ่มฟีเจอร์การเคลื่อนไหว ให้ตัวละครเดินไปข้างหน้าและถอยหลังได้ โดยใช้ปุ่ม Arrow Right และ Arrow Left

Prompt: “เพิ่มการควบคุมให้ตัวละครเดินไปข้างหน้าและถอยหลัง”

ผลลัพธ์ที่ได้ จาก ChatGPT

if (player.direction === -1) {
  ctx.scale(-1, 1);
  ctx.drawImage(playerImage, -player.x - player.width, player.y, player.width, player.height);
} else {
  ctx.drawImage(playerImage, player.x, player.y, player.width, player.height);
}
ctx.restore();

5. เพิ่มพื้นหลังและปรับแต่งเกมให้สมบูรณ์

Prompt “เพิ่มพื้นหลังให้เกม โดยใช้ไฟล์รูปภาพ”

ผลลัพธ์ที่ได้ จาก ChatGPT

const backgroundImage = new Image();
backgroundImage.src = "background.png"; // ใส่ชื่อไฟล์รูปพื้นหลัง

// วาดพื้นหลังใน draw()
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

ผลลัพธ์หลังจากการปรับปรุงหลายรอบเราได้เกมที่มี

  1. ตัวละครแบบกราฟิก เดินหน้า, ถอยหลัง, กระโดด และหมุนตัวเมื่อเปลี่ยนทิศทาง
  2. เหรียญแบบกราฟิก สุ่มตำแหน่งและเพิ่มคะแนนเมื่อเก็บ
  3. พื้นหลังแบบกราฟิก ทำให้เกมดูมีมิติและน่าสนใจ

การพัฒนาเกมนี้แสดงให้เห็นว่า ChatGPT สามารถช่วยเราสร้างเกมตั้งแต่ขั้นพื้นฐานจนถึงขั้นสมบูรณ์ได้อย่างมีประสิทธิภาพ ด้วยการเริ่มจาก Prompt ง่าย ๆ และค่อย ๆ เพิ่มฟีเจอร์ตามความต้องการ กระบวนการนี้ช่วยให้เราประหยัดเวลาและสนุกไปกับการพัฒนาเกม หากคุณมีไอเดียเกมใหม่ ๆ ลองใช้ ChatGPT เป็นผู้ช่วยดูสิ! 🎮✨

Leave a Reply

Related News