ผู้เขียน : นายสรวิศ เหมโลหะ รหัสนักศึกษา 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>
