ผู้เขียนบทความ:นาย ภีรเดช ชัยโชติ วฟ. 167404130038
คณะวิศวกรรมศาสตร์ สาขาวิศวกรรมไฟฟ้า
วิชา :04-000-104 การโปรเเกรมคอมพิวเตอร์ การศึกษาภาคที่1/2567
1.ความเป็นมา
เกมกระโดด (Jump Game) ถือเป็นหนึ่งในแนวเกมที่ได้รับความนิยมอย่างแพร่หลายในหมู่ผู้เล่นทุกเพศทุกวัย ด้วยการเล่นที่ง่ายและเน้นความสนุกสนานในการกระโดดข้ามสิ่งกีดขวาง แนวเกมนี้มักถูกออกแบบให้มีความท้าทายที่เพิ่มขึ้นเรื่อย ๆ ซึ่งจะทำให้ผู้เล่นพยายามทำคะแนนให้สูงขึ้นอยู่ตลอดเวลา
2.วัตถุประสงค์
สร้างความสนุกและความท้าทายให้กับผู้เล่นวัตถุประสงค์หลักของเกมกระโดดคือการมอบความสนุกสนานให้กับผู้เล่น โดยการควบคุมตัวละครให้กระโดดผ่านสิ่งกีดขวางหรืออุปสรรคต่าง ๆ เพื่อไปยังจุดหมาย การผ่านแต่ละด่านหรือการทำคะแนนสูงสุดสร้างแรงกระตุ้นให้ผู้เล่นพยายามเล่นเกมต่อไปเพื่อเอาชนะตัวเองหรือผู้อื่น
3.ขอบเขตการทำงาน
3.1การควบคุมตัวละคร: ผู้เล่นควบคุมตัวละครให้กระโดดเพื่อหลบสิ่งกีดขวาง
3.2คะเเนน: ผู้เล่นสะสมคะเเนนจากการเล่นโดยพยายามทำระยะทางให้ได้ไกลที่สุด
3.3การจบเกม เกมจบเมื่อผู้เล่นพลาดหรือชนสิ่งกีดขวางสามารถเริ่มใหม่ได้
4.ประโยชน์ที่คิดว่าจะได้รับจากเกมนี้
4.1การประสานงานระหว่างมือและตา: ผู้เล่นต้องใช้สายตาควบคู่กับการควบคุมมือเพื่อให้ตัวละครกระโดดได้อย่างถูกจังหวะ
4.2ความเพลิดเพลินและผ่อนคลาย: เป็นเกมที่เล่นง่ายและสนุก ช่วยลดความเครียดและสร้างความเพลิดเพลินได้
4.3ฝึกการควบคุมจังหวะ: ช่วยให้ผู้เล่นเรียนรู้การจัดการกับเวลาและจังหวะอย่างมีประสิทธิภาพ
5.ความรู้เกี่ยวข้อง
5.1 Visual Studio Code (index.html)
หน้า index.html เป็นไฟล์ที่ใช้เริ่มต้นในการทำงานเว็บไซต์โดยทั่วไป เราจะเรียกไฟล์นี้เมื่อเราต้องการเข้าถึงเว็บไซต์ของคุณ หากไม่มีการระบุหน้าอื่นที่เฉพาะเจาะจง เมื่อคุณพิมพ์ชื่อเว็บไซต์ลงในแถบที่อยู่ของเว็บเบราว์เซอร์ ระบบจะค้นหาไฟล์ index.html นี้โดยอัตโนมัติ
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Jumping Obstacle Game</title>
<link rel=”stylesheet” href=”ระ.css”>
</head>
<body>
<div class=”game-container”>
<div id=”character”></div>
<div id=”obstacle”></div>
<div id=”score”>Score: 0</div>
</div>
<script src=”เดช.js”></script>
</body>
</html>
5.2 Visual Studio Code (mact.css)
เป็นไฟล์ที่อธิบายวิธีแสดงองค์ประกอบ HTML บนหน้าจอกระดาษ ฯลฯ ด้วย HTML คุณสามารถกำหนดสไตล์ที่ฝังไว้หรือสไตล์ที่สามารถกำหนดได้ในสไตล์ชีตภายนอก สำหรับการฝังสไตล์ </style> มีการใช้แท็ก สไตล์ชีตภายนอกถูกจัดเก็บไว้ในไฟล์ที่มีนามสกุล .CSS ด้วย CSS ภายนอก คุณสามารถรวมไว้ในหน้า HTML หลายหน้าเพื่ออัปเดตสไตล์ของหน้าเหล่านั้น แม้แต่ไฟล์ CSS ไฟล์เดียวก็สามารถใช้งานรูปแบบเว็บไซต์ที่สมบูรณ์ได้body {
body ,html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #b8c3c7;
font-family: Arial, sans-serif,;
}
.game-container {
position: relative;
width: 800px;
height: 500px;
border: 2px solid #333;
overflow: hidden;
background-color: #0cebeb;
}
#character {
position: absolute;
bottom: 1px;
left: 100px;
width: 100px;
height: 100px;
background-color: #ee0c1f;
border-radius: 100px;
}
#obstacle {
position: absolute;
bottom: 1px;
right: 1px;
width: 60px;
height: 60px;
background-color: #1506f0;
border-radius: 5px;
animation: moveObstacle 2s infinite linear;
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 18px;
color: #333;
}
/* Animation for moving the obstacle */
@keyframes moveObstacle {
0% { right: 0; }
100% { right: 800px; }
}
5.3 Visual Studio Code (ku.css)
JS (JavaScript) คือไฟล์ที่มีโค้ด JavaScript สำหรับดำเนินการบนหน้าเว็บ ไฟล์ JavaScript ถูกจัดเก็บด้วยนามสกุล .JS ภายในเอกสาร HTML คุณสามารถฝังโค้ด JavaScript โดยใช้ปุ่ม </script> แท็กหรือรวมไฟล์ JS คล้ายกับไฟล์ CSS ไฟล์ JS สามารถรวมไว้ในเอกสาร HTML หลายฉบับเพื่อให้โค้ดกลับมาใช้ใหม่ได้ JavaScript สามารถใช้เพื่อจัดการ HTML DOM
document.addEventListener(“DOMContentLoaded”, () => {
const character = document.getElementById(“character”);
const obstacle = document.getElementById(“obstacle”);
const scoreDisplay = document.getElementById(“score”);
let score = 0;
let isJumping = false;
function jump() {
if (isJumping) return;
isJumping = true;
let jumpHeight = 0;
let jumpInterval = setInterval(() => {
if (jumpHeight >= 150) {
clearInterval(jumpInterval);
let fallInterval = setInterval(() => {
if (jumpHeight <= 0) {
clearInterval(fallInterval);
isJumping = false;
}
jumpHeight -= 5;
character.style.bottom = jumpHeight + “px”;
}, 20);
}
jumpHeight += 5;
character.style.bottom = jumpHeight + “px”;
}, 20);
}
function checkCollision() {
let characterRect = character.getBoundingClientRect();
let obstacleRect = obstacle.getBoundingClientRect();
if (
characterRect.left < obstacleRect.left + obstacleRect.width &&
characterRect.left + characterRect.width > obstacleRect.left &&
characterRect.top < obstacleRect.top + obstacleRect.height &&
characterRect.top + characterRect.height > obstacleRect.top
) {
return true;
}
return false;
}
function gameLoop() {
if (checkCollision()) {
alert(`Game Over! Your score: ${score}`);
score = 0;
} else {
score++;
scoreDisplay.textContent = `Score: ${score}`;
}
requestAnimationFrame(gameLoop);
}
document.addEventListener(“keydown”, (e) => {
if (e.code === “Space”) {
jump();
}
});
gameLoop();
});
6.ผลการดำเนินงาน
ระบบทำงานได้เสถียร ตัวละครกระโดดข้ามสิ่งกีดขวางและทำคะแนนได้ตามที่ออกแบบไม่มีปัญหาหรือข้อผิดพลาดที่ส่งผลต่อการเล่นเกม และเหมาะกับผู้เล่นทุกวัยผู้เล่นพัฒนาทักษะการตอบสนองและการตัดสินใจได้จากการเล่น
7.วิธีการใช้งานโปรแกรม
7.1กดเข้าเกมตัวเกมจะเล่นให้โดยอัติโนมัติ
7.2กด space bar เพื่อให้ตัวลครกระโดด
7.3จะมี score ขึ้นมานับคะเเนน
7.4เมื่อชนเข้ากับสิ่งของจะถือว่าเเพ้
7.5เเลกดคำว่า ok เพื่อเริ่มใหม่
8.ผลการทดลอง
9.สรุปผลการทดลอง
การทดลองเกมกระโดดแสดงให้เห็นว่า ระบบเกมสามารถทำงานได้ตามที่วางแผนไว้ ตัวละครสามารถกระโดดข้ามสิ่งกีดขวางได้อย่างราบรื่นและเกมไม่มีปัญหาหรือข้อบกพร่องที่ และยังช่วยพัฒนาทักษะการตอบสนองและการวางแผนในการเล่น
10.ข้อมูลอ้างอิง
https://chatgpt.com/c/6708ece7-079c-800d-8e76-fe39b3897639
https://codegeniusacademy.com/scratch
วิดีโออธิบายโค้ด
