อยากสร้างเกมง่ายๆ แต่ไม่รู้จะเริ่มยังไง?
สำหรับใครที่อยากลองเขียนเกมของตัวเอง แต่กังวลว่าจะต้องมีความรู้ด้านโปรแกรมมิ่งเยอะๆ หรือใช้เวลาเรียนรู้เป็นเดือนๆ วันนี้เรามีวิธีง่ายๆ ที่จะพาคุณเข้าสู่โลกของการเขียนเกมด้วยตัวเอง โดยใช้ ChatGPT ช่วย! คุณจะได้เรียนรู้การสร้างเกมจับลูกบอล (Ball Catch Game) ที่สนุกและเพลิดเพลินได้ในเวลาเพียงไม่กี่นาที!
เกมจับลูกบอลคืออะไร?
เกมจับลูกบอลเป็นเกมง่ายๆ ที่ผู้เล่นจะต้องควบคุมแท่น (paddle) เพื่อจับลูกบอลที่ตกลงมา หากลูกบอลตกลงพื้น เกมจะจบลง ผู้เล่นสามารถเริ่มใหม่ได้ และทุกครั้งที่จับลูกบอลได้สำเร็จ จะได้คะแนนเพิ่ม เหมาะสำหรับการเริ่มต้นเขียนเกม เพราะโค้ดไม่ซับซ้อน แต่ก็ได้เรียนรู้พื้นฐานที่สำคัญ เช่น
- การสร้างวัตถุเคลื่อนไหว
- การตรวจจับการชน
- การใช้คีย์บอร์ดและเมาส์เพื่อควบคุม
วิธีสร้างเกมนี้ด้วย ChatGPT
ขั้นตอนที่ 1: เข้า ChatGPT
พิมพ์ Prompt “เขียนเกมจับลูกบอล ด้วย html5” ChatGPT จะสร้างโค้ดพื้นฐาน พร้อมคำอธิบายเกี่ยวกับการใช้งานแต่ละส่วน คุณสามารถคัดลอกโค้ดเหล่านั้นไปทดสอบได้ทันที!
ขั้นตอนที่ 2: เตรียมโครงสร้าง HTML
โค้ดพื้นฐานของ HTML ที่ ChatGPT สร้างให้จะเป็นดังนี้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>เกมจับลูกบอล</title>
<style>
canvas {
background: lightblue;
display: block;
margin: 0 auto;
border: 2px solid #000;
}
body {
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>เกมจับลูกบอล</h1>
<canvas id="gameCanvas" width="480" height="320"></canvas>
<p>ใช้เมาส์เพื่อเลื่อนแท่นจับบอล!</p>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// ขนาดและตำแหน่งของลูกบอล
let ballX = canvas.width / 2;
let ballY = canvas.height - 30;
let ballDX = 2; // ความเร็วแนวนอน
let ballDY = -2; // ความเร็วแนวตั้ง
const ballRadius = 10;
// ขนาดและตำแหน่งของแท่นจับ
const paddleHeight = 10;
const paddleWidth = 75;
let paddleX = (canvas.width - paddleWidth) / 2;
// ตัวแปรสำหรับการควบคุมเมาส์
let rightPressed = false;
let leftPressed = false;
// ตัวนับคะแนน
let score = 0;
// ฟังก์ชันสำหรับวาดลูกบอล
function drawBall() {
ctx.beginPath();
ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
}
// ฟังก์ชันสำหรับวาดแท่นจับบอล
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
}
// ฟังก์ชันสำหรับแสดงคะแนน
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#000";
ctx.fillText("Score: " + score, 8, 20);
}
// ฟังก์ชันสำหรับอัพเดตเกม
function updateGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawPaddle();
drawScore();
// ตรวจสอบการชนขอบของลูกบอล
if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
ballDX = -ballDX;
}
if (ballY + ballDY < ballRadius) {
ballDY = -ballDY;
} else if (ballY + ballDY > canvas.height - ballRadius) {
if (ballX > paddleX && ballX < paddleX + paddleWidth) {
ballDY = -ballDY;
score++; // เพิ่มคะแนนเมื่อจับลูกบอลได้
} else {
alert("Game Over! คะแนนของคุณคือ " + score);
document.location.reload();
}
}
// อัปเดตตำแหน่งลูกบอล
ballX += ballDX;
ballY += ballDY;
// ควบคุมการเลื่อนแท่นจับ
if (rightPressed && paddleX < canvas.width - paddleWidth) {
paddleX += 7;
} else if (leftPressed && paddleX > 0) {
paddleX -= 7;
}
requestAnimationFrame(updateGame);
}
// ฟังก์ชันสำหรับจับการกดปุ่ม
function keyDownHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight") {
rightPressed = true;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight") {
rightPressed = false;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
leftPressed = false;
}
}
// จับการเคลื่อนเมาส์
function mouseMoveHandler(e) {
const relativeX = e.clientX - canvas.offsetLeft;
if (relativeX > 0 && relativeX < canvas.width) {
paddleX = relativeX - paddleWidth / 2;
}
}
// เพิ่ม Event Listeners
document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);
document.addEventListener("mousemove", mouseMoveHandler);
// เริ่มเกม
updateGame();
</script>
</body>
</html>
ขั้นตอนที่ 3: ทดสอบ
หลังจากคัดลอกโค้ดมาทั้งหมดแล้ว ให้ลองเปิดไฟล์ HTML ในเบราว์เซอร์ของคุณ คุณจะเห็นเกมทำงานได้แล้ว! แต่พบข้อผิดพลาดคือ เมื่อลูกบอลตกลงพื้น ไม่สามารถคลิกปิดฟังก์ชัน Alert เพื่อเริ่มเล่นเกมใหม่ได้ เราจึงต้องเขียน Prompt ให้ ChatGPT ช่วยแก้ไขให้อีกครั้ง
ขั้นตอนที่ 4: ปรับแก้ Code ที่มีข้อผิดพลาด
โดยพิมพ์ Prompt “มี bug คือเมื่อกดปุ่ม close ตอน Game Over แต่ไม่สามารถเริ่มเล่นใหม่ได้” หลังจากนั้น ChatGPT จะสร้างโค้ดใหม่ให้เป็นดังนี้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>เกมจับลูกบอล</title>
<style>
canvas {
background: lightblue;
display: block;
margin: 0 auto;
border: 2px solid #000;
}
body {
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
#gameOverModal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border: 2px solid #000;
padding: 20px;
text-align: center;
z-index: 1000;
}
#gameOverModal button {
margin-top: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>เกมจับลูกบอล</h1>
<canvas id="gameCanvas" width="480" height="320"></canvas>
<div id="gameOverModal">
<p id="gameOverMessage"></p>
<button onclick="restartGame()">เริ่มใหม่</button>
</div>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// ขนาดและตำแหน่งของลูกบอล
let ballX, ballY, ballDX, ballDY;
const ballRadius = 10;
// ขนาดและตำแหน่งของแท่นจับ
const paddleHeight = 10;
const paddleWidth = 75;
let paddleX;
// ตัวแปรสำหรับการควบคุมเมาส์
let rightPressed = false;
let leftPressed = false;
// ตัวนับคะแนน
let score = 0;
// ตัวแปรสถานะเกม
let isGameOver = false;
// อ้างอิง modal สำหรับ Game Over
const gameOverModal = document.getElementById("gameOverModal");
const gameOverMessage = document.getElementById("gameOverMessage");
// ฟังก์ชันเริ่มเกมใหม่
function initializeGame() {
ballX = canvas.width / 2;
ballY = canvas.height - 30;
ballDX = 2; // ความเร็วแนวนอน
ballDY = -2; // ความเร็วแนวตั้ง
paddleX = (canvas.width - paddleWidth) / 2;
score = 0;
isGameOver = false;
gameOverModal.style.display = "none";
updateGame();
}
// ฟังก์ชันสำหรับวาดลูกบอล
function drawBall() {
ctx.beginPath();
ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
}
// ฟังก์ชันสำหรับวาดแท่นจับบอล
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
}
// ฟังก์ชันสำหรับแสดงคะแนน
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#000";
ctx.fillText("Score: " + score, 8, 20);
}
// ฟังก์ชันสำหรับอัพเดตเกม
function updateGame() {
if (isGameOver) return; // หยุดเกมเมื่อเกมจบ
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawPaddle();
drawScore();
// ตรวจสอบการชนขอบของลูกบอล
if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
ballDX = -ballDX;
}
if (ballY + ballDY < ballRadius) {
ballDY = -ballDY;
} else if (ballY + ballDY > canvas.height - ballRadius) {
if (ballX > paddleX && ballX < paddleX + paddleWidth) {
ballDY = -ballDY;
score++; // เพิ่มคะแนนเมื่อจับลูกบอลได้
} else {
gameOver();
return;
}
}
// อัปเดตตำแหน่งลูกบอล
ballX += ballDX;
ballY += ballDY;
// ควบคุมการเลื่อนแท่นจับ
if (rightPressed && paddleX < canvas.width - paddleWidth) {
paddleX += 7;
} else if (leftPressed && paddleX > 0) {
paddleX -= 7;
}
requestAnimationFrame(updateGame);
}
// ฟังก์ชันสำหรับแสดง Game Over
function gameOver() {
isGameOver = true;
gameOverMessage.textContent = "Game Over! คะแนนของคุณคือ " + score;
gameOverModal.style.display = "block";
}
// ฟังก์ชันสำหรับเริ่มเกมใหม่
function restartGame() {
initializeGame();
}
// ฟังก์ชันสำหรับจับการกดปุ่ม
function keyDownHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight") {
rightPressed = true;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight") {
rightPressed = false;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
leftPressed = false;
}
}
// จับการเคลื่อนเมาส์
function mouseMoveHandler(e) {
const relativeX = e.clientX - canvas.offsetLeft;
if (relativeX > 0 && relativeX < canvas.width) {
paddleX = relativeX - paddleWidth / 2;
}
}
// เพิ่ม Event Listeners
document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);
document.addEventListener("mousemove", mouseMoveHandler);
// เริ่มเกม
initializeGame();
</script>
</body>
</html>
ขั้นตอนที่ 5: ทดสอบใหม่อีกครั้ง
หลังจากคัดลอกโค้ดใหม่มาทั้งหมดแล้ว ให้ลองเปิดไฟล์ HTML ในเบราว์เซอร์ของคุณ คุณจะเห็นว่าเกมทำงานได้ถูกต้องแล้ว!
เกมจับลูกบอลเป็นโปรเจกต์ที่เหมาะสำหรับผู้เริ่มต้นเขียนเกม เพราะโค้ดเรียบง่ายและเข้าใจได้ไม่ยาก ด้วยความช่วยเหลือจาก ChatGPT คุณสามารถสร้างเกมในแบบของตัวเองได้อย่างง่ายดาย เพียงไม่กี่ขั้นตอน หากคุณพร้อมแล้ว ลองเริ่มเขียนเกมของคุณเองวันนี้เลย!
ลองเขียนเกมของคุณเอง แล้วสนุกไปกับโลกของการพัฒนาเกมกันนะคะ! 😊🎮
