ผู้เขียนบทความ : นางสาว วิโรชา ชูหมวด รหัส 16740413026
คณะวิศวะกรรมศาสตร์ : สาขาวิศวะกรรมไฟฟ้า
วิชา : การโปรเเกรมคอมพิวเตอร์ 01000104 1/2567
1.ความเป็นมา
เกมเขาวงกตเป็นหนึ่งในเกมที่ได้รับความนิยมมาอย่างยาวนาน เนื่องจากเป็นเกมที่สามารถทดสอบทักษะการแก้ปัญหาและการตัดสินใจของผู้เล่นได้อย่างดี ปัจจุบันเกมเขาวงกตถูกพัฒนาให้สามารถเล่นได้บนหลายแพลตฟอร์ม ตั้งแต่เกมกระดานไปจนถึงเกมในระบบดิจิทัล ด้วยความเรียบง่ายของแนวคิดเกมเขาวงกต โปรแกรมนี้จะถูกพัฒนาโดยใช้ภาษา HTML, CSS, และ JavaScript ซึ่งเหมาะสมสำหรับการสร้างเกมที่สามารถรันบนเว็บบราวเซอร์ ทำให้ผู้เล่นสามารถเข้าถึงได้ง่ายผ่านอุปกรณ์ที่มีการเชื่อมต่ออินเทอร์เน็ต
2.วัตถุประสงค์
1.เพื่อพัฒนาเกมเขาวงกตที่สามารถเล่นได้ผ่านเว็บบราวเซอร์ โดยใช้ภาษา HTML, CSS, และ JavaScript 2.เพื่อฝึกฝนทักษะการพัฒนาโปรแกรมที่ใช้เทคโนโลยีฝั่งไคลเอนต์ 3.เพื่อสร้างเกมที่เน้นการฝึกทักษะการแก้ปัญหาและการคิดเชิงตรรกะของผู้เล่น 4.เพื่อให้ผู้เล่นสามารถเล่นเกมได้โดยไม่ต้องติดตั้งซอฟต์แวร์เพิ่มเติม
3.ขอบเขต
- เกมจะถูกพัฒนาโดยใช้ภาษา HTML, CSS, และ JavaScript
- เกมจะประกอบไปด้วยเขาวงกตในรูปแบบ 2D
- ผู้เล่นสามารถบังคับตัวละครให้เดินผ่านเขาวงกตเพื่อค้นหาทางออก
- ระดับความยากของเขาวงกตจะเพิ่มขึ้นตามลำดับ
- ระบบจะมีการบันทึกเวลาที่ผู้เล่นใช้ในการแก้ปัญหาในแต่ละด่าน
- สามารถเล่นเกมผ่านเว็บบราวเซอร์ได้บนทุกอุปกรณ์ที่รองรับ HTML5
4.ประโยชน์ที่คาดว่าจะได้รับ
- ผู้พัฒนาโครงงานจะได้รับความรู้และประสบการณ์ในการสร้างเกมด้วยภาษา HTML, CSS, และ JavaScript
- ผู้เล่นจะได้รับความสนุกสนานและพัฒนาทักษะการแก้ปัญหา
- ผู้เล่นจะได้รับความรู้สึกท้าทายในการค้นหาทางออกจากเขาวงกต
- โครงงานนี้สามารถพัฒนาต่อยอดเพื่อเพิ่มฟีเจอร์ใหม่ ๆ เช่น คะแนนสูงสุด การจัดอันดับผู้เล่น หรือการเชื่อมต่อกับฐานข้อมูล
5.ความรู้ที่เกี่ยวข้อง
- ภาษา HTML: ใช้ในการสร้างโครงสร้างของหน้าเว็บและองค์ประกอบต่าง ๆ ในเกม
- ภาษา CSS: ใช้ในการออกแบบรูปแบบและการแสดงผลของเกม
- ภาษา JavaScript: ใช้ในการควบคุมตรรกะของเกมและการทำงานต่าง ๆ เช่น การเคลื่อนที่ของตัวละครในเขาวงกต
- การออกแบบ User Interface (UI): เพื่อให้เกมมีการแสดงผลที่เข้าใจง่ายและใช้งานสะดวก
- การพัฒนาเกม 2D: ความรู้ในการออกแบบและพัฒนาเกมที่มีการเคลื่อนที่ในสองมิติ
6.วิธีการใช้งานโปรเเกรม
1.บันทึกโค้ด HTML ที่คุณมีในไฟล์ที่มีนามสกุล .html (เช่น maze-game.html) หรือhttps://onlinegdb.com/m-hnlplMK 2.เปิดไฟล์ HTML ด้วยเว็บบราวเซอร์ที่คุณต้องการ เช่น Google Chrome, Firefox, หรือ Microsoft Edge 3.เกมจะแสดงขึ้นบนหน้าจอพร้อมกับเขาวงกตและตัวผู้เล่น
7.วิธีการเล่น
1.กด run เเล้วคลิกที่เกม 1 ครั้ง 2.จากนั้นตัวผู้เล่น จะปรากฏเป็นสีแดง และ จุดหมายปลายทาง เป็นสีเขียวใช้ ปุ่มลูกศรบนแป้นพิมพ์ เพื่อเคลื่อนที่ตัวผู้เล่นผ่านเขาวงกตพยายามหาทางไปยังจุดหมายปลายทางเพื่อผ่านด่าน
4.เมื่อสามารถเดินทางมาถึงจุดหมายได้จะปรากฎข้อความว่า “คุณชนะ ไปด่านถัด” ดังรูป
8.code game
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>เกมเขาวงกต</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
#maze {
display: grid;
grid-template-columns: repeat(10, 40px);
grid-template-rows: repeat(10, 40px);
gap: 1px;
background-color: #333;
}
.cell {
width: 40px;
height: 40px;
background-color: #fff;
}
.wall {
background-color: #000;
}
.player {
background-color: red;
}
.finish {
background-color: green;
}
</style>
</head>
<body>
<h1>เกมเขาวงกต</h1>
<div id="maze"></div>
<script>
const mazes = [
[
[0, 1, 0, 0, 0, 0, 0, 1, 0, 0],
[0, 1, 1, 1, 1, 0, 0, 1, 1, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 1, 0],
[1, 1, 1, 0, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
[1, 1, 1, 1, 1, 0, 1, 1, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 0, 0, 0],
],
[
[0, 1, 1, 0, 0, 0, 0, 1, 0, 0],
[0, 1, 0, 1, 1, 0, 0, 1, 1, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 1, 0],
[0, 1, 1, 0, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
[0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 1, 0, 0, 0, 0, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 0, 0, 0],
],
[
[0, 1, 1, 1, 0, 0, 0, 1, 0, 0],
[0, 0, 0, 1, 1, 1, 0, 1, 1, 0],
[1, 1, 0, 0, 0, 0, 0, 0, 1, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
[0, 1, 1, 1, 1, 0, 1, 1, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
[1, 1, 1, 1, 1, 1, 1, 0, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 0, 0, 0],
],
// คุณสามารถเพิ่มด่านใหม่ได้ที่นี่
];
let currentLevel = 0;
const player = { x: 0, y: 0 };
const finish = { x: 9, y: 9 };
const mazeDiv = document.getElementById('maze');
function drawMaze() {
mazeDiv.innerHTML = '';
const maze = mazes[currentLevel];
for (let y = 0; y < maze.length; y++) {
for (let x = 0; x < maze[y].length; x++) {
const cell = document.createElement('div');
cell.classList.add('cell');
if (maze[y][x] === 1) {
cell.classList.add('wall');
}
if (player.x === x && player.y === y) {
cell.classList.add('player');
}
if (finish.x === x && finish.y === y) {
cell.classList.add('finish');
}
mazeDiv.appendChild(cell);
}
}
}
function movePlayer(dx, dy) {
const newX = player.x + dx;
const newY = player.y + dy;
const maze = mazes[currentLevel];
if (newX >= 0 && newX < maze[0].length && newY >= 0 && newY < maze.length && maze[newY][newX] === 0) {
player.x = newX;
player.y = newY;
if (player.x === finish.x && player.y === finish.y) {
alert("คุณชนะ! ด่านถัดไป");
currentLevel++;
if (currentLevel >= mazes.length) {
alert("คุณชนะทั้งหมดแล้ว!");
currentLevel = 0; // รีเซ็ตกลับไปที่ด่านแรก
}
player.x = 0;
player.y = 0; // รีเซ็ตตำแหน่งผู้เล่น
drawMaze();
} else {
drawMaze();
}
}
}
window.addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowUp':
movePlayer(0, -1);
break;
case 'ArrowDown':
movePlayer(0, 1);
break;
case 'ArrowLeft':
movePlayer(-1, 0);
break;
case 'ArrowRight':
movePlayer(1, 0);
break;
}
});
drawMaze();
</script>
</body>
</html>
