เกมดูดเอเลี่ยนในอวกาศ (Alien sucking game in spaces)

ผู้เขียนบทความ : นายภูริพัฒน์ แซ่ตั้ง

คณะวิศวกรรมศาสตร์ : สาขาวิศวกรรมไฟฟ้า

วิชา : 04-00-104 การโปรแกรมคอมพิวเตอร์ ภาคการศึกษาที่1/2567

โครงงานเกมรับอุกาบาต โปรแกรมภาษา HTML

1. ความเป็นมา

การพัฒนาเกมคอมพิวเตอร์เริ่มต้นขึ้นในช่วงทศวรรษที่ 1970 และมีการพัฒนาอย่างรวดเร็วในช่วงหลายปีที่ผ่านมา เกมได้รับการออกแบบเพื่อความบันเทิง แต่ในปัจจุบันได้มีการนำเกมมาใช้ในการศึกษาและฝึกทักษะต่าง ๆ เกม “จับลูกบอล” หรือ “รับอุกาบาต” มีแนวคิดมาจากการทำให้ผู้เล่นรู้สึกสนุกสนาน ในขณะเดียวกันก็ต้องฝึกการตอบสนองที่รวดเร็วและการตัดสินใจอย่างชาญฉลาดผ่านการควบคุมตะกร้าจับลูกบอลที่ตกลงมา

2. วัตถุประสงค์

  • เพื่อพัฒนาเกมที่มีความสนุกสนานและท้าทายในการควบคุมตะกร้าจับลูกบอล
  • เพื่อฝึกทักษะการเขียนโปรแกรมด้วยภาษา HTML, CSS และ JavaScript
  • เพื่อให้ผู้เล่นเรียนรู้เกี่ยวกับแรงโน้มถ่วงและการเคลื่อนไหวในระหว่างการเล่นเกม
  • เพื่อสร้างสภาพแวดล้อมที่สามารถกระตุ้นความคิดสร้างสรรค์และการทำงานร่วมกันในการพัฒนาเกม

3. ขอบเขต

โครงงานนี้จะเน้นการพัฒนาเกมที่สามารถเล่นได้ผ่านเว็บบราวเซอร์ โดยมีขอบเขตในการออกแบบและพัฒนาดังนี้:

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

4. ประโยชน์ที่คาดว่าจะได้รับ

  • ผู้เล่นสามารถพัฒนาทักษะการตอบสนองและการวางแผนผ่านการเล่นเกม
  • การสร้างความรู้เกี่ยวกับการเคลื่อนที่ของวัตถุและแรงโน้มถ่วง
  • ผู้พัฒนาสามารถเรียนรู้วิธีการพัฒนาเกมด้วยการเขียนโค้ดในภาษา HTML, CSS และ JavaScript
  • สนับสนุนการเรียนรู้แบบมีส่วนร่วมซึ่งกระตุ้นความสนใจในเรื่องเทคโนโลยีและโปรแกรมมิ่ง

5. ความรู้ที่คาดว่าจะได้รับ

  • ความเข้าใจในหลักการพื้นฐานของการพัฒนาเกม และการใช้เทคโนโลยีเว็บในการสร้างเกม
  • ทักษะในการเขียนโปรแกรมและการใช้งานฟังก์ชันต่าง ๆ ของ JavaScript
  • ความสามารถในการสร้างกราฟิกและการจัดการกับการแสดงผลในเกม
  • ความรู้เกี่ยวกับการออกแบบ UX/UI ที่ช่วยให้การเล่นเกมเป็นไปอย่างราบรื่น

6. ผลการดำเนินการ

การพัฒนาเกม “จับลูกบอล” ประสบความสำเร็จในการสร้างฟังก์ชันการเล่นเกมที่สนุกสนาน ซึ่งผู้เล่นสามารถควบคุมตะกร้าเพื่อจับลูกบอลที่ตกลงมาได้อย่างมีประสิทธิภาพ เกมนี้มีการเก็บคะแนนและระดับที่เพิ่มขึ้นตามความสามารถของผู้เล่น ซึ่งช่วยให้ผู้เล่นมีความท้าทายในการเล่นเกมมากขึ้น นอกจากนี้ยังมีการทดสอบเกมจากผู้เล่นจริงเพื่อรับฟังข้อเสนอแนะแก่การพัฒนา

7. วิธีการใช้งานโปรแกรม

  • เปิดไฟล์ HTML ในเว็บบราวเซอร์ (เช่น Google Chrome, Firefox)
  • ใช้ปุ่มลูกศรซ้ายและขวาในการควบคุมตะกร้าเพื่อจับลูกบอล
  • กดปุ่ม Enter เพื่อเริ่มเกมใหม่หลังจากเกมจบลง
  • เป้าหมายของเกมคือการจับลูกบอลให้ได้มากที่สุด โดยมีการจำกัดจำนวนการพลาดไว้ที่ 3 ลูก
  • เกมจะมีการแสดงผลคะแนน, ระดับ, และจำนวนที่พลาดในระหว่างการเล่น
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Catch the Ball Game</title>
  <style>
    canvas {
      background-color: #f0f0f0;
      display: block;
      margin: 0 auto;
      border: 2px solid #000;
    }
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>เกมดูดเอเลี่ยน</h1>
  <canvas id="gameCanvas" width="400" height="600"></canvas>
  <p>ใช้ปุ่ม Spacebar เพื่อเริ่มเกม! กดปุ่ม Enter เพื่อเริ่มใหม่เมื่อเกมจบลง</p>

  <!-- เพิ่มเสียง MP3 -->
  <audio id="catchSound" src="catch.mp3"></audio>
  <audio id="gameOverSound" src="gameover.mp3"></audio>
  <audio id="startSound" src="start.mp3"></audio> <!-- เสียงสำหรับเริ่มเกม -->

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

    // โหลดรูปภาพพื้นหลัง
    const backgroundImg = new Image();
    backgroundImg.src = 'https://img.pikbest.com/origin/09/32/78/15mpIkbEsTdrp.jpg!w700wp';
    
    // โหลดรูปภาพตะกร้าแบบ GIF
    const basketImg = new Image();
    basketImg.src = 'https://media.tenor.com/4L993COJ7RMAAAAi/tornado-nature.gif'; // URL ของภาพ GIF ตะกร้า

    // โหลดรูปภาพลูกบอลแบบ GIF
    const ballImg = new Image();
    ballImg.src = 'https://media.tenor.com/8oiJm3JJW7AAAAAi/bogos-binted-bogos.gif'; // URL ของภาพ GIF ลูกบอล

    // โหลดเสียง MP3
    const catchSound = document.getElementById("catchSound");
    const gameOverSound = document.getElementById("gameOverSound");
    const startSound = document.getElementById("startSound"); // เสียงเริ่มเกม

    let player, ball, score, level, gameOver, missedCount, gameStarted = false;
    let backgroundOffset = 0; // ตัวแปรสำหรับเลื่อนภาพพื้นหลัง

    function init() {
      player = {
        x: canvas.width / 2 - 25,
        y: canvas.height - 60,
        width: 50,
        height: 50,
        speed: 10,
        dx: 0
      };

      ball = {
        x: Math.random() * (canvas.width - 20) + 10,
        y: 0,
        width: 30,
        height: 30,
        dy: 3
      };

      score = 0;
      level = 1;
      gameOver = false;
      missedCount = 0; // จำนวนที่พลาดในการจับลูกบอล

      update();
    }

    function drawBackground() {
      // วาดพื้นหลังที่เคลื่อนไหว
      ctx.drawImage(backgroundImg, 0, backgroundOffset, canvas.width, canvas.height);
      ctx.drawImage(backgroundImg, 0, backgroundOffset - canvas.height, canvas.width, canvas.height);
      
      // เลื่อนตำแหน่งพื้นหลัง
      backgroundOffset += 1; // ปรับความเร็วของการเลื่อนตามต้องการ
      if (backgroundOffset >= canvas.height) {
        backgroundOffset = 0;
      }
    }

    function drawPlayer() {
      ctx.drawImage(basketImg, player.x, player.y, player.width, player.height);
    }

    function drawBall() {
      ctx.drawImage(ballImg, ball.x, ball.y, ball.width, ball.height);
    }

    function updateBall() {
      ball.y += ball.dy;

      // จบเกมเมื่อบอลตกถึงพื้น
      if (ball.y + ball.height > canvas.height) {
        missedCount++; // เพิ่มจำนวนที่พลาด
        ball.y = 0; // รีเซ็ตบอลขึ้นไปใหม่
        ball.x = Math.random() * (canvas.width - 20) + 10; // วางลูกบอลในตำแหน่งใหม่
      }

      // ตรวจสอบการจับลูกบอล
      if (
        ball.y + ball.height > player.y &&
        ball.x > player.x &&
        ball.x < player.x + player.width
      ) {
        ball.y = 0;
        ball.x = Math.random() * (canvas.width - 20) + 10;
        score++;

        

        if (score % 5 === 0) {
          ball.dy += 1;
          level++;
        }
      }

      // เงื่อนไขการแพ้ (หากพลาดลูกบอลมากกว่า 3 ลูก)
      if (missedCount > 3) {
        gameOver = true;
        // เล่นเสียงเมื่อเกมจบ
        gameOverSound.play();
        alert("คุณแพ้! กด Enter เพื่อเริ่มใหม่");
      }

      // เงื่อนไขการชนะ (หากได้คะแนนมากกว่า 30 คะแนน)
      if (score > 30) {
        gameOver = true;
        // เล่นเสียงเมื่อเกมจบ
        gameOverSound.play();
        alert("คุณชนะ! กด Enter เพื่อเริ่มใหม่");
      }
    }

    function drawScore() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "#FFFFFF"; // เปลี่ยนเป็นสีขาว
      ctx.fillText("คะแนน: " + score, 10, 20);
      ctx.fillText("ระดับ: " + level, 10, 40);
      ctx.fillText("จำนวนที่พลาด: " + missedCount, 10, 60); // แสดงจำนวนที่พลาด
    }

    function updatePlayer() {
      player.x += player.dx;

      if (player.x < 0) {
        player.x = 0;
      } else if (player.x + player.width > canvas.width) {
        player.x = canvas.width - player.width;
      }
    }

    function update() {
      if (!gameOver) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        drawBackground(); // วาดพื้นหลัง
        drawPlayer();
        drawBall();
        drawScore();

        updatePlayer();
        updateBall();

        requestAnimationFrame(update);
      } else {
        ctx.font = "30px Arial";
        ctx.fillStyle = "red"; // สีของข้อความ "เกมจบ!" ให้เป็นสีแดง
        ctx.fillText("เกมจบ!", canvas.width / 2 - 60, canvas.height / 2);
        ctx.font = "20px Arial";
        ctx.fillStyle = "#FFFFFF"; // เปลี่ยนเป็นสีขาว
        ctx.fillText("คะแนนของคุณ: " + score, canvas.width / 2 - 60, canvas.height / 2 + 30);
        ctx.fillText("กด Enter เพื่อเริ่มใหม่", canvas.width / 2 - 80, canvas.height / 2 + 60);
      }
    }

    function startGame() {
      if (!gameStarted) {
        gameStarted = true;
        catchSound.play(); // เล่นเสียง catch.mp3 ทันทีเมื่อเกมเริ่ม
        init();
      }
    }

    function keyDown(e) {
      if (e.key === "ArrowRight") {
        player.dx = player.speed;
      } else if (e.key === "ArrowLeft") {
        player.dx = -player.speed;
      } else if (e.key === "Enter" && gameOver) {
        gameStarted = false; // รีเซ็ตสถานะเริ่มเกม
        init();  // รีเซ็ตเกมเมื่อกด Enter หลังเกมจบ
      } else if (e.key === " ") { // Spacebar เพื่อเริ่มเกม
        startGame();
      }
    }

    function keyUp(e) {
      if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
        player.dx = 0;
      }
    }

    // เริ่มเกมเมื่อโหลดรูปภาพทั้งหมดเสร็จ
    backgroundImg.onload = () => {
      basketImg.onload = () => {
        ballImg.onload = () => {
          drawBackground();
          ctx.font = "30px Arial";
          ctx.fillStyle = "#FFFFFF";
          ctx.fillText("กด Spacebar เพื่อเริ่มเกม!", canvas.width / 2 - 150, canvas.height / 2);
        };
      };
    };

    document.addEventListener("keydown", keyDown);
    document.addEventListener("keyup", keyUp);
  </script>
</body>
</html>

8. การทดลอง สรุปผล ข้อเสนอแนะ

  • การทดลอง: เกมได้ถูกทดสอบโดยผู้เล่นหลายคนเพื่อดูความสนุกสนานและประสิทธิภาพในการควบคุม โดยมีการเก็บข้อมูลเกี่ยวกับคะแนนและการพลาดเพื่อวิเคราะห์
  • สรุปผล: เกมได้รับการตอบรับที่ดีจากผู้เล่น โดยเฉพาะในเรื่องของการเล่นที่ง่ายและกราฟิกที่น่าสนใจ ผู้เล่นหลายคนกล่าวว่ามันเป็นเกมที่ช่วยในการฝึกสมาธิและความเร็วในการตอบสนอง
  • ข้อเสนอแนะ: ควรพัฒนาเกมเพิ่มเติมโดยการเพิ่มความยากระดับต่าง ๆ ฟังก์ชันพิเศษ เช่น โบนัสหรือเวลาจำกัดในการเล่น และเพิ่มตัวเลือกในการปรับแต่ง เช่น การเลือกสีของตะกร้าและลูกบอล

9. อ้างอิง

Gamification in Education. (n.d.). Using Games for Learning

W3Schools. (n.d.). HTML Tutorial

MDN Web Docs. (n.d.). JavaScript Guide

HTML5 Canvas. (n.d.). Canvas API

You may also like...

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *