1.ความเป็นมา
“Space Invaders” ซึ่งเป็นเกมคลาสสิคที่มีประวัติศาสตร์ยาวนาน เกมนี้ถูกสร้างขึ้นครั้งแรกในปี 1978 โดย Tomohiro Nishikado ซึ่งทำงานให้กับบริษัท Taito ในประเทศญี่ปุ่น เป็นเกมที่มีประวัติศาสตร์ยาวนานและมีผลกระทบต่อวงการเกมอย่างมาก เกมนี้เป็นสัญลักษณ์ของความสำเร็จในยุคแรกของเกมอาร์เคด และมีอิทธิพลต่อการพัฒนาเกมในอนาคตอย่างต่อเนื่อง
2.วัตถุประสงค์
1.ทำลายศัตรู: ผู้เล่นต้องยิงและทำลายเอเลี่ยนหรือศัตรูที่เคลื่อนที่ลงมาจากด้านบน โดยทำให้จำนวนเอเลี่ยนในสนามลดลงจนหมด
2.ป้องกันไม่ให้ศัตรูเข้าถึงฐาน: ผู้เล่นต้องควบคุมยานอวกาศเพื่อป้องกันไม่ให้ศัตรูถึงพื้น ซึ่งถ้าศัตรูเข้าถึงระดับที่กำหนด ผู้เล่นจะต้องแพ้เกม
3.สะสมคะแนน: ผู้เล่นจะได้รับคะแนนจากการทำลายเอเลี่ยน ซึ่งสามารถใช้เป็นเกณฑ์ในการแข่งขันกับตัวเองหรือผู้เล่นคนอื่น
4.เพิ่มระดับความยาก: เมื่อผู้เล่นทำลายเอเลี่ยนทั้งหมดแล้ว เกมจะเข้าสู่ระดับใหม่ โดยเอเลี่ยนอาจมีจำนวนเพิ่มขึ้นหรือเคลื่อนที่เร็วขึ้น ทำให้เกมมีความท้าทายมากขึ้น
5.สร้างความบันเทิง: จุดมุ่งหมายหลักคือการให้ความสนุกสนานและความตื่นเต้นแก่ผู้เล่น ผ่านการเล่นที่รวดเร็วและต้องใช้การตอบสนองที่ดี
6พัฒนาทักษะ: เกมช่วยให้ผู้เล่นพัฒนาทักษะในการควบคุมและการประสานงานระหว่างมือและตา รวมถึงการวางแผนกลยุทธ์ในการเล่น
3.ขอบเขต
1. ด้านการเล่นเกม (Gameplay)
- วัตถุประสงค์: ทำลายเอเลี่ยนทั้งหมดก่อนที่พวกเขาจะถึงฐานของผู้เล่น
- การเคลื่อนไหว: ผู้เล่นสามารถเคลื่อนยานอวกาศไปซ้ายและขวา เพื่อหลบหลีกการโจมตีและยิงเอเลี่ยน
- การยิง: ผู้เล่นสามารถยิงกระสุนเพื่อต่อสู้กับเอเลี่ยน และต้องระมัดระวังไม่ให้กระสุนหมด
2. ด้านระดับความยาก
- ระดับ: การเพิ่มความยากตามจำนวนเอเลี่ยนที่เหลืออยู่และความเร็วในการเคลื่อนไหวของพวกเขา
- ระบบคะแนน: ผู้เล่นจะได้รับคะแนนตามจำนวนเอเลี่ยนที่ทำลายได้
3. ด้านการควบคุม
- การควบคุม: ผู้เล่นใช้แป้นพิมพ์ในการเคลื่อนที่และยิง โดยควรมีการตอบสนองที่รวดเร็ว
4. ประโยชน์ที่คาดว่าจะได้รับ
- ผู้เล่นจะมีความสนุกสนานและความบันเทิงจากการเล่น
- พัฒนาทักษะการคิดวิเคราะห์และการตัดสินใจ
5. ความรู้ที่เกี่ยวข้อง
- HTML: สำหรับสร้างโครงสร้างของเกม
- CSS: สำหรับจัดรูปแบบและการออกแบบของหน้าเกม
- JavaScript: สำหรับการสร้างตรรกะของเกมและการโต้ตอบกับผู้เล่น
6. การดำเนินงาน
1. การเริ่มเกม
- โหลดภาพ: โหลดภาพสำหรับยานอวกาศและเอเลี่ยน
- สร้างพื้นผิว: ตั้งค่า Canvas เพื่อให้แสดงผลกราฟิกของเกม
- สร้างเริ่มต้น: กำหนดค่าต่างๆ เช่น ตำแหน่งเริ่มต้นของยาน, จำนวนเอเลี่ยน, และคะแนน
2. การควบคุม
- การเคลื่อนที่ของยาน: รับการกดปุ่ม (เช่น ลูกศรซ้าย/ขวา) เพื่อตรวจสอบการเคลื่อนที่ของยาน
- การยิงกระสุน: รับการกดปุ่ม (เช่น Space) เพื่อให้ยานยิงกระสุนไปยังเอเลี่ยน
7. วิธีการใช้งานโปรแกรม
1. การติดตั้งและเปิดโปรแกรม
- ดาวน์โหลดไฟล์: ดาวน์โหลดไฟล์ทั้งหมดที่เกี่ยวข้องกับเกม (HTML, CSS, JavaScript, รูปภาพ) ไปยังเครื่องคอมพิวเตอร์ของคุณ
- เปิดไฟล์ HTML: เปิดไฟล์ HTML ในเว็บเบราว์เซอร์ (เช่น Chrome, Firefox) โดยดับเบิลคลิกที่ไฟล์
2. เริ่มเล่นเกม
- เริ่มเกม: เมื่อเกมเปิดขึ้น ให้ดูที่หน้าจอสำหรับปุ่มหรือคำแนะนำในการเริ่มเกม (เช่น “Press Space to Start”)
8. การทดลอง
1. การเตรียมการทดลอง
- ตั้งค่าอุปกรณ์: ตรวจสอบว่าเกมทำงานได้ในเบราว์เซอร์ที่รองรับ (เช่น Chrome, Firefox)
- เตรียมทีมทดลอง: เชิญผู้เล่นที่มีประสบการณ์และไม่มีประสบการณ์ในการเล่นเกมประเภทนี้
2. ขั้นตอนการทดลอง
- เริ่มเล่นเกม: ให้ผู้เล่นเริ่มเกมโดยการกดปุ่มที่กำหนด
9. เทคนิคการประยุกต์เพื่อเพิ่มประสิทธิภาพ
1. การปรับปรุง AI ของเอเลี่ยน
- การเคลื่อนที่ที่ซับซ้อน: ทำให้เอเลี่ยนมีพฤติกรรมที่หลากหลาย เช่น การโจมตีที่มีการวางแผนหรือการหลบหลีก
- การทำงานร่วมกัน: ให้เอเลี่ยนสามารถทำงานร่วมกันเพื่อโจมตีผู้เล่นในรูปแบบที่ซับซ้อนมากขึ้น
10. สรุปผลและข้อเสนอแนะ
การพัฒนาเกมนี้ยังมีพื้นที่สำหรับการปรับปรุงและเพิ่มประสิทธิภาพ โดยการนำข้อเสนอแนะไปปรับใช้สามารถช่วยเพิ่มประสบการณ์ของผู้เล่นและสร้างความสนุกสนานที่ยั่งยืนในการเล่นเกมนี้ได้มากขึ้น
ข้อเสนอแนะ
- เพิ่มความหลากหลาย: ควรเพิ่มเอเลี่ยนชนิดใหม่และมินิเกมเพื่อให้มีความหลากหลายในการเล่น
- ปรับปรุง AI ของศัตรู: การทำให้ AI ของเอเลี่ยนมีพฤติกรรมที่หลากหลายและซับซ้อนมากขึ้นจะช่วยเพิ่มความท้าทาย
11. ข้อมูลอ้างอิง
โค้ดเกม Space Invaders
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport", content="width=device-width, initial-scale=1.0">
<title>Space Invaders</title>
<link rel="stylesheet" href="space.css">
<script src="space.js"></script>
</head>
<body>
<h1>Space Invaders</h1>
<canvas id="board"></canvas>
<div id="game-controls">
<button id="start-btn" onclick="startGame()">Start</button>
<button id="reset-btn" onclick="resetGame()">Reset</button>
<button id="stop-btn" onclick="stopGame()">Stop</button>
</body>
</html>
CSS
body {
font-family:'Courier New', Courier, monospace;
text-align: center;
}
#board {
background-color: black;
}
JAVASCRIPT
//board
let tileSize = 32;
let rows = 16;
let columns = 16;
let board;
let boardWidth = tileSize * columns; // 32 * 16
let boardHeight = tileSize * rows; // 32 * 16
let context;
//ship
let shipWidth = tileSize * 2;
let shipHeight = tileSize;
let shipX = tileSize * columns / 2 - tileSize;
let shipY = tileSize * rows - tileSize * 2;
let ship = {
x: shipX,
y: shipY,
width: shipWidth,
height: shipHeight
};
let shipImg;
let shipVelocityX = tileSize; // ship moving speed
//aliens
let alienArray = [];
let alienWidth = tileSize * 2;
let alienHeight = tileSize;
let alienX = tileSize;
let alienY = tileSize;
let alienImg;
let alienRows = 2;
let alienColumns = 3;
let alienCount = 0; // number of aliens to defeat
let alienVelocityX = 1; // alien moving speed
//bullets
let bulletArray = [];
let bulletVelocityY = -10; // bullet moving speed
let score = 0;
let gameOver = false;
let isGameRunning = false;
let gameInterval;
window.onload = function() {
board = document.getElementById("board");
board.width = boardWidth;
board.height = boardHeight;
context = board.getContext("2d");
// Load images
shipImg = new Image();
shipImg.src = "./ship.png";
shipImg.onload = function() {
context.drawImage(shipImg, ship.x, ship.y, ship.width, ship.height);
};
alienImg = new Image();
alienImg.src = "./alien.png";
createAliens();
document.addEventListener("keydown", moveShip);
document.addEventListener("keyup", shoot);
}
// Start the game
function startGame() {
if (!isGameRunning) {
isGameRunning = true;
score = 0; // Reset score
alienCount = 0; // Reset alien count
gameOver = false; // Reset game over state
alienArray = [];
bulletArray = [];
createAliens();
gameInterval = requestAnimationFrame(update);
console.log("Game Started");
}
}
// Stop the game
function stopGame() {
if (isGameRunning) {
cancelAnimationFrame(gameInterval);
isGameRunning = false;
console.log("Game Stopped");
}
}
// Reset the game
function resetGame() {
stopGame(); // หยุดเกมก่อน
score = 0;
alienCount = 0;
gameOver = false;
alienArray = [];
bulletArray = [];
ship.x = shipX; // รีเซ็ตตำแหน่งเรือ
createAliens(); // สร้างเอเลี่ยนใหม่
// เคลียร์หน้าจอและวาดเรือใหม่
context.clearRect(0, 0, board.width, board.height);
context.drawImage(shipImg, ship.x, ship.y, ship.width, ship.height);
console.log("Game Reset");
}
// Update the game state
function update() {
if (gameOver) {
return;
}
context.clearRect(0, 0, board.width, board.height);
// Ship
context.drawImage(shipImg, ship.x, ship.y, ship.width, ship.height);
// Aliens
for (let i = 0; i < alienArray.length; i++) {
let alien = alienArray[i];
if (alien.alive) {
alien.x += alienVelocityX;
// If alien touches the borders
if (alien.x + alien.width >= board.width || alien.x <= 0) {
alienVelocityX *= -1;
alien.x += alienVelocityX * 2;
// Move all aliens up by one row
for (let j = 0; j < alienArray.length; j++) {
alienArray[j].y += alienHeight;
}
}
context.drawImage(alienImg, alien.x, alien.y, alien.width, alien.height);
if (alien.y >= ship.y) {
gameOver = true;
}
}
}
// Bullets
for (let i = 0; i < bulletArray.length; i++) {
let bullet = bulletArray[i];
bullet.y += bulletVelocityY;
context.fillStyle = "white";
context.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
// Bullet collision with aliens
for (let j = 0; j < alienArray.length; j++) {
let alien = alienArray[j];
if (!bullet.used && alien.alive && detectCollision(bullet, alien)) {
bullet.used = true;
alien.alive = false;
alienCount--;
score += 100;
}
}
}
// Clear bullets
while (bulletArray.length > 0 && (bulletArray[0].used || bulletArray[0].y < 0)) {
bulletArray.shift(); // Removes the first element of the array
}
// Next level
if (alienCount == 0) {
score += alienColumns * alienRows * 100; // Bonus points
alienColumns = Math.min(alienColumns + 1, columns / 2 - 2); // Cap at 6
alienRows = Math.min(alienRows + 1, rows - 4); // Cap at 12
alienVelocityX += 0.2; // Increase the alien movement speed
alienArray = [];
bulletArray = [];
createAliens();
}
// Score
context.fillStyle = "white";
context.font = "16px courier";
context.fillText("Score: " + score, 5, 20);
// Request next frame
gameInterval = requestAnimationFrame(update);
}
function moveShip(e) {
if (gameOver) {
return;
}
if (e.code == "ArrowLeft" && ship.x - shipVelocityX >= 0) {
ship.x -= shipVelocityX; // Move left one tile
} else if (e.code == "ArrowRight" && ship.x + shipVelocityX + ship.width <= board.width) {
ship.x += shipVelocityX; // Move right one tile
}
}
function createAliens() {
for (let c = 0; c < alienColumns; c++) {
for (let r = 0; r < alienRows; r++) {
let alien = {
img: alienImg,
x: alienX + c * alienWidth,
y: alienY + r * alienHeight,
width: alienWidth,
height: alienHeight,
alive: true
};
alienArray.push(alien);
}
}
alienCount = alienArray.length;
}
function shoot(e) {
if (gameOver) {
return;
}
if (e.code == "Space") {
// Shoot
let bullet = {
x: ship.x + shipWidth * 15 / 32,
y: ship.y,
width: tileSize / 8,
height: tileSize / 2,
used: false
};
bulletArray.push(bullet);
}
}
function detectCollision(a, b) {
return a.x < b.x + b.width && // a's top left corner doesn't reach b's top right corner
a.x + a.width > b.x && // a's top right corner passes b's top left corner
a.y < b.y + b.height && // a's top left corner doesn't reach b's bottom left corner
a.y + a.height > b.y; // a's bottom left corner passes b's top left corner
}
วิดีโออธิบาย
