เกมหลบสิ่งกีดขวาง (Obstacle dodge game)

ผู้เขียน : นายสรวิศ เหมโลหะ รหัสนักศึกษา 167404130071

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

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

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

เกมหลบสิ่งกีดขวางเป็นเกมรูปแบบง่ายๆไม่ซับซ้อนช่วยพัฒนาทักษะการตัดสินใจ,การแก้ปัญหาเฉพาะหน้า ในบทความนี้เราจะนำเสนอเกมหลบสิ่งกีดขวางที่เขียนโดย HTML,CSS และJavaScript เป็นภาษาที่เข้าใจง่ายและใช้ในการพัฒนาเบราว์เซอร์ได้อย่างมีประสิทธิภาพ

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

1.เพื่อพัฒนาเกมหลบสิ่งกีดขวาง

2.เพื่อเรียนรู้วิธีการสร้างเบราว์เซอร์

3.เพื่อเรียนรู้การใช้ภาษา HTML,CSS และJavaScript

3.ขอบเขต

1.พัฒนาเกมหลบสิ่งกีดขวาง

2.ใช้ภาษา HTML,CSS และJavaScript ในการพัฒนาเกมและหน้าเบราว์เซอร์

3.ตัวเกมสามารถทำงานได้อย่างมีประสิทธิภาพ

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

1.ผู้พัฒนาเข้าใจพื้นฐานการใช้ HTML,CSS และJavaScript

2.มีความรู้ความเข้าใจในการพัฒนาเบราว์เซอร์

5.ความรู้ที่เกี่ยวข้อง

1. *HTML (HyperText Markup Language)*: ใช้ในการสร้างโครงสร้างพื้นฐานของหน้าเว็บ

2. *CSS (Cascading Style Sheets)*: ใช้สำหรับตกแต่งและจัดรูปแบบของหน้าเว็บ

3. *JavaScript*: ใช้ในการพัฒนาเกมและควบคุมการทำงานของเกม การโต้ตอบกับผู้เล่น

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

1.พัฒนาเกมหลบสิ่งกีดขวางสำเร็จ

2.หน้าเว็บไซต์มีความเสถียรตอบสนองได้ดี

7.ผลการทดลอง

1.เกมสามารถเล่นได้อย่างลื่นไหลบน Google ChromeและMicrosoft Edge

2.เกมมีความเสถียรและสามารถตอบสนองกับผู้เล่นได้ดี

8.สรุปผลการทดลอง

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

9.เอกสารอ้างอิง

1.HTML (Hyper Text Markup Language) จาก : https://searchstudio.co.th/th/seo/what-is-html/

2.JavaScript จาก : https://developer.mozilla.org/en-US/docs/Web/JavaScript

3.CSS (Cascading Style Sheets) จาก : https://www.w3schools.com/html/html_css.asp

10.วีดีโอแนะนำเกมและโปรแกรม

โปรแกรม

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>เกมหลบสิ่งกีดขวาง</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f3f3f3;
    }
    canvas {
      border: 1px solid #000;
      background-color: #eaacac;
    }
    #resetButton {
      display: none;
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>
<body onload="startGame()"> 

<script>
var player;
var obstacles = [];
var score;

function startGame() {
  player = new component(30, 30, "blue", 10, 120);
  score = new component("30px", "Consolas", "black", 280, 40, "text");
  gameArea.start();
}

var gameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('keydown', function (e) {
      gameArea.keys = (gameArea.keys || []);
      gameArea.keys[e.keyCode] = true;
    });
    window.addEventListener('keyup', function (e) {
      gameArea.keys[e.keyCode] = false;
    });
  },
  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  },
  stop: function() {
    clearInterval(this.interval);
    document.getElementById("resetButton").style.display = "block";
  }
}

function component(width, height, color, x, y, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    var ctx = gameArea.context;
    if (this.type == "text") {
      ctx.font = this.width + " " + this.height;
      ctx.fillStyle = color;
      ctx.fillText(this.text, this.x, this.y);
    } else {
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
    this.hitBoundary();
  }
  this.hitBoundary = function() {
    var bottom = gameArea.canvas.height - this.height;
    var right = gameArea.canvas.width - this.width;
    if (this.y > bottom) { this.y = bottom; }
    if (this.y < 0) { this.y = 0; }
    if (this.x > right) { this.x = right; }
    if (this.x < 0) { this.x = 0; }
  }
  this.crashWith = function(otherobj) {
    var myleft = this.x;
    var myright = this.x + this.width;
    var mytop = this.y;
    var mybottom = this.y + this.height;
    var otherleft = otherobj.x;
    var otherright = otherobj.x + otherobj.width;
    var othertop = otherobj.y;
    var otherbottom = otherobj.y + otherobj.height;
    var crash = true;
    if ((mybottom < othertop) ||
       (mytop > otherbottom) ||
       (myright < otherleft) ||
       (myleft > otherright)) {
      crash = false;
    }
    return crash;
  }
}

function updateGameArea() {
  for (i = 0; i < obstacles.length; i += 1) {
    if (player.crashWith(obstacles[i])) {
      gameArea.stop();
      return;
    }
  }
  gameArea.clear();
  gameArea.frameNo += 1;
  if (gameArea.frameNo == 1 || everyInterval(150)) {
    var x = gameArea.canvas.width;
    var minHeight = 20;
    var maxHeight = 200;
    var height = Math.floor(Math.random() * (maxHeight - minHeight + 1) + minHeight);
    var minGap = 50;
    var maxGap = 200;
    var gap = Math.floor(Math.random() * (maxGap - minGap + 1) + minGap);
    obstacles.push(new component(10, height, "green", x, 0));
    obstacles.push(new component(10, x - height - gap, "green", x, height + gap));
  }
  for (i = 0; i < obstacles.length; i += 1) {
    obstacles[i].x += -1;
    obstacles[i].update();
  }
  score.text = "SCORE: " + gameArea.frameNo;
  score.update();
  movePlayer();
  player.newPos();
  player.update();
}

function everyInterval(n) {
  if ((gameArea.frameNo / n) % 1 == 0) { return true; }
  return false;
}

function movePlayer() {
  player.speedX = 0;
  player.speedY = 0;
  if (gameArea.keys && gameArea.keys[37]) { player.speedX = -1; }
  if (gameArea.keys && gameArea.keys[39]) { player.speedX = 1; }
  if (gameArea.keys && gameArea.keys[38]) { player.speedY = -1; }
  if (gameArea.keys && gameArea.keys[40]) { player.speedY = 1; }
}

function resetGame() {
  document.getElementById("resetButton").style.display = "none";
  obstacles = [];
  startGame();
}
</script>

<p>The score increases as long as you survive. Use arrow keys to move the blue player square.</p>
<button id="resetButton" onclick="resetGame()">Reset Game</button>

</body>
</html>

Tags:

You may also like...

ใส่ความเห็น

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