เกมลูกบอลกระเด้ง(Ball Bounce Game)

ผู้เขียนบทความ : นายสุกฤต สุขยอด รหัสนักศึกษา 167404130072

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

วิชา : 04000104 การโปรแกรมคอมพิวเตอร์ 1/2567

เกมลูกบอลกระเด้ง (Ball Bounce Game)

-สารบัญ

  1. ความเป็นมา ↩︎
  2. วัตถุประสงค์ ↩︎
  3. ขอบเขต ↩︎
  4. ประโยชน์ที่คาดว่าจะได้รับ ↩︎
  5. ความรู้ที่คาดว่าจะได้รับ ↩︎
  6. ผลการดำเนินการ ↩︎
  7. การทดลอง สรุปผล ข้อเสนอแนะ ↩︎
  8. code game ↩︎
  9. วิดิโออธิบายการทำงานของโปรเเกรม ↩︎

–เนื้อหา

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

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

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

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

3. ขอบเขต3

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

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

  • ผู้เรียนจะได้เรียนรู้การสร้างเกมง่ายๆ ด้วย HTML5 Canvas
  • ผู้เรียนจะได้ฝึกทักษะการเขียน JavaScript
  • ผู้เรียนจะได้ทำความเข้าใจเกี่ยวกับการสร้าง Animation และ Event Handling
  • ผู้เรียนจะได้พัฒนาทักษะการแก้ปัญหาและการคิดเชิงตรรกะ

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

  • HTML5 Canvas: การสร้างกราฟิก การวาดรูปทรง การเคลื่อนไหว
  • JavaScript: ตัวแปร ฟังก์ชัน การควบคุมเงื่อนไข การวนลูป Event Listener
  • DOM: การเข้าถึงและจัดการองค์ประกอบ HTML
  • คอนเซ็ปต์พื้นฐานของเกม: การเคลื่อนไหวของวัตถุ การตรวจจับการชน การเก็บคะแนน

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

  • ได้สร้างเกมลูกบอลกระเด้งที่ทำงานได้ตามที่กำหนด
  • เกมมีกราฟิกที่เรียบง่ายและใช้งานง่าย
  • เกมมีฟังก์ชันการทำงานที่สมบูรณ์

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

  • การทดลอง: ทดสอบการทำงานของเกมในเบราว์เซอร์ต่างๆ เช่น Chrome, Firefox, Edge
    •สรุปผล: เกมทำงานได้เป็นอย่างดีตามที่คาดหวัง ผู้เล่นสามารถควบคุมแถบรับเพื่อป้องกันไม่ให้ลูกบอลตกพื้นได้
  • ข้อเสนอแนะ:
    -สามารถเพิ่มความซับซ้อนของเกมได้ เช่น เพิ่มลูกบอลหลายลูก, เพิ่มอุปสรรค, เพิ่มพาวเวอร์อัพ
    -สามารถปรับปรุงกราฟิกให้สวยงามยิ่งขึ้น
    -สามารถเพิ่มเสียงประกอบเพื่อเพิ่มความสนุกสนาน

8. code game8

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ball Bounce Game</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100vh;
      background-image: url('https://media1.tenor.com/m/YTfzulnmErQAAAAC/uefa-champions.gif');
      background-size: cover;
      position: relative;
    }

    canvas {
      border: 1px solid #000;
      background-color: rgba(255, 255, 255, 0.8);
    }

    #score {
      font-size: 24px;
      margin-bottom: 10px;
    }

    #startButton {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }

    #gameOver {
      display: none;
      font-size: 36px;
      color: red;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="score">คะแนน: 0</div>
  <canvas id="gameCanvas"></canvas>
  <button id="startButton">เริ่มเกม</button>
  <div id="gameOver">เกมจบ!</div>

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

    canvas.width = 800;
    canvas.height = 600;

    const ballRadius = 20; // ขนาดลูกบอล
    const ballImage = new Image();
    ballImage.src = 'https://media.tenor.com/fJjW0Q5fDUMAAAAi/football-soccer.gif'; // URL ของลูกบอล
    let ball = { x: canvas.width / 2, y: canvas.height - 30, dx: 4, dy: -4 }; // ลูกบอลเดียว
    let paddleHeight = 15;
    let paddleWidth = 150; // ความกว้างของแถบรับ
    let paddleX = (canvas.width - paddleWidth) / 2;

    let rightPressed = false;
    let leftPressed = false;
    let score = 0;
    let paddleSpeed = 12; // ความเร็วของแถบรับ
    let gameInterval;

    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    document.getElementById("startButton").addEventListener("click", startGame);

    function startGame() {
      score = 0;
      paddleX = (canvas.width - paddleWidth) / 2;
      ball = { x: canvas.width / 2, y: canvas.height - 30, dx: 4, dy: -4 }; // เริ่มลูกบอลใหม่
      updateScore();
      document.getElementById("gameOver").style.display = "none"; 
      gameInterval = setInterval(draw, 10);
    }

    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 drawBall() {
      ctx.drawImage(ballImage, ball.x - ballRadius, ball.y - ballRadius, ballRadius * 2, ballRadius * 2);
    }

    function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = "red"; // เปลี่ยนสีแถบรับเป็นสีแดง
      ctx.fill();
      ctx.closePath();
    }

    function updateScore() {
      document.getElementById("score").innerText = `คะแนน: ${score}`;
    }

    function endGame() {
      clearInterval(gameInterval);
      document.getElementById("gameOver").style.display = "block";
      document.getElementById("gameOver").innerText = `เกมจบ! คะแนนของคุณ: ${score}`;
    }

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBall();
      drawPaddle();

      if (ball.x + ball.dx > canvas.width - ballRadius || ball.x + ball.dx < ballRadius) {
        ball.dx = -ball.dx;
      }
      if (ball.y + ball.dy < ballRadius) {
        ball.dy = -ball.dy;
      } else if (ball.y + ball.dy > canvas.height - ballRadius) {
        if (ball.x > paddleX && ball.x < paddleX + paddleWidth) {
          ball.dy = -ball.dy;
          score++;
          updateScore();

          // เพิ่มความเร็วของลูกบอลทุกครั้งที่ได้คะแนน
          ball.dx *= 1.1;
          ball.dy *= 1.1;
        } else {
          endGame();
        }
      }

      ball.x += ball.dx;
      ball.y += ball.dy;

      if (rightPressed && paddleX < canvas.width - paddleWidth) {
        paddleX += paddleSpeed;
      } else if (leftPressed && paddleX > 0) {
        paddleX -= paddleSpeed;
      }
    }
  </script>
</body>
</html>

9. วิดิโออธิบายการทำงานของโปรเเกรม9

You may also like...

ใส่ความเห็น

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