ผู้เขียนบทความ : นายปรเมศวร์ จันทรโชติ 167404132015
คณะวิศวกรรมศาสตร์ : สาขาวิชาวิศวกรรมไฟฟ้า
วิชา : 04000104 การโปรแกรมคอมพิวเตอร์ 1/2567
1.ความเป็นมา
เกม “Castle Defense” เกิดขึ้นจากความต้องการที่จะสร้างเกมที่มีความสนุกสนานและท้าทาย โดยมีแนวคิดในการป้องกันสิ่งที่มีค่า ซึ่งในที่นี้คือปราสาท โดยผู้เล่นจะต้องตอบสนองต่อเหตุการณ์ที่เกิดขึ้นอย่างรวดเร็ว ด้วยการคลิกที่รูปร่างที่ตกลงมาเพื่อทำลายและรักษาพลังชีวิตของปราสาท
แนวคิดการสร้างเกมนี้ได้รับแรงบันดาลใจจากเกมแนวป้องกัน (Defense Games) ที่มีอยู่มากมายในตลาดปัจจุบัน โดยเฉพาะเกมที่ผู้เล่นมีบทบาทในการปกป้องฐานที่มั่นจากการโจมตีของศัตรู เกมประเภทนี้ได้รับความนิยมในกลุ่มผู้เล่นหลายวัย เนื่องจากให้ความสนุกสนานและความท้าทายในการเล่น
การพัฒนาเกม “Castle Defense” ใช้เทคโนโลยีเว็บที่เข้าถึงได้ง่าย เช่น HTML, CSS และ JavaScript ซึ่งทำให้ผู้เล่นสามารถเข้าถึงเกมได้โดยไม่ต้องติดตั้งโปรแกรมเพิ่มเติม นอกจากนี้ การใช้เทคโนโลยีเหล่านี้ยังช่วยให้นักพัฒนาสามารถสร้างและปรับปรุงเกมได้อย่างรวดเร็วและง่ายดาย
ในขั้นตอนการพัฒนา ทีมงานมุ่งเน้นไปที่การสร้างประสบการณ์ที่ดีให้กับผู้เล่น โดยพยายามทำให้เกมมีความน่าสนใจ มีกราฟิกที่สวยงาม และเสียงที่เข้ากับบรรยากาศของเกม การสร้างคะแนนและระบบพลังชีวิตของปราสาททำให้เกมมีความท้าทายและผู้เล่นต้องใช้กลยุทธ์ในการเล่นเพื่อให้สามารถเก็บคะแนนสูงสุด
สุดท้ายนี้ เกม “Castle Defense” ไม่เพียงแต่สร้างความสนุกสนานให้กับผู้เล่น แต่ยังช่วยให้ผู้เล่นได้ฝึกฝนทักษะการตอบสนองและการคิดเชิงกลยุทธ์ พร้อมทั้งสร้างความตื่นเต้นในการเล่นเกม
2.วัตถุประสงค์
เพื่อสร้างเกมป้องกันปราสาทที่ให้ผู้เล่นมีส่วนร่วมในการป้องกันปราสาทจากรูปร่างที่ตกลงมา โดยผู้เล่นจะต้องคลิกที่รูปร่างเพื่อทำลายและรักษาพลังชีวิต (HP) ของปราสาทให้อยู่ในระดับสูงสุดเพื่อให้ได้คะแนนสูงสุด
3.ขอบเขตการทำงาน
- การออกแบบและพัฒนาเกมในรูปแบบ HTML, CSS, และ JavaScript
- การสร้างกราฟิกและเสียงพื้นฐานสำหรับเกม
- การสร้างระบบการสร้างและทำลายรูปร่างที่ตกลงมาจากด้านบน
- การแสดงคะแนนและพลังชีวิตของปราสาท
4.อุปกรณ์และเครื่องมือที่ใช้
- เครื่องมือพัฒนา: โปรแกรมแก้ไขโค้ด (เช่น Visual Studio Code, Sublime Text)
- เว็บเบราว์เซอร์: Chrome, Firefox หรือ Safari สำหรับทดสอบเกม
- กราฟิก: ใช้โปรแกรมสร้างกราฟิกพื้นฐาน (เช่น Photoshop, GIMP) สำหรับสร้างภาพหรือเสียงพื้นฐาน
5.ความรู้ที่คาดว่าจะได้รับ
- ความเข้าใจในพื้นฐานการพัฒนาเว็บ
- การใช้ HTML, CSS และ JavaScript ในการสร้างเกม
- การจัดการกับเหตุการณ์ (Event Handling) ใน JavaScript
- การทำงานกับ DOM (Document Object Model) ในการปรับปรุงส่วนต่างๆ ของหน้าเว็บแบบไดนามิก
6.ประโยชน์ที่คาดว่าจะได้รับ
- ผู้เล่นจะพัฒนาทักษะการตอบสนองและการตัดสินใจอย่างรวดเร็ว
- การเรียนรู้เกี่ยวกับการทำงานของโปรแกรมในแบบเรียลไทม์
- การส่งเสริมความคิดสร้างสรรค์ในการพัฒนาเกม
7.สรุป
เกม “Castle Defense” เป็นเกมที่มอบประสบการณ์การเล่นที่สนุกสนานและท้าทาย โดยผู้เล่นจะต้องคลิกที่รูปร่างที่ตกลงมาเพื่อทำลายและป้องกันปราสาทของตนเองจากการลดพลังชีวิต
8.วิธีการเล่นเกม
- กดปุ่ม “เริ่มเกม” เพื่อเริ่มเกม
- รูปร่างจะเริ่มตกลงมาจากด้านบน ผู้เล่นต้องคลิกที่รูปร่างเพื่อทำลาย
- รักษาพลังชีวิตของปราสาทโดยไม่ให้ HP ลดเหลือ 0
- คะแนนจะเพิ่มขึ้นเมื่อผู้เล่นทำลายรูปร่าง
9.ผลการดำเนินการ
เกมนี้สร้างขึ้นสำเร็จตามวัตถุประสงค์ และผู้เล่นสามารถเข้าถึงเกมได้ง่ายผ่านเว็บเบราว์เซอร์ ผลการทดสอบแสดงให้เห็นว่าผู้เล่นสามารถสนุกสนานและมีส่วนร่วมในการเล่นเกม โดยมีการตอบสนองที่รวดเร็วต่อเหตุการณ์ที่เกิดขึ้น
อ้างอิง และ CODE GMAE
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Castle Design</title>
<style>
body {
margin: 0;
height: 100vh;
overflow: hidden;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.castle {
position: absolute;
left: 0;
bottom: 0;
width: 250px;
height: 150px;
background-color: #b5651d;
border: 2px solid black;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.wall {
position: absolute;
top: 0;
width: 100%;
height: 20px;
background-color: black;
display: flex;
justify-content: space-between;
}
.wall-block {
width: 20px;
height: 20px;
background-color: #b5651d;
}
.tower {
position: absolute;
top: -90px;
width: 30px;
height: 90px;
background-color: #b5651d;
border: 2px solid black;
}
.tower-left {
left: 20px;
}
.tower-right {
right: 20px;
}
.tower-top {
width: 100%;
height: 20px;
background-color: black;
position: absolute;
top: 0;
display: flex;
justify-content: space-between;
}
.tower-top::before, .tower-top::after {
content: "";
width: 10px;
height: 10px;
background-color: #b5651d;
}
.gate {
width: 50px;
height: 80px;
background-color: black;
margin: 0 auto;
position: relative;
z-index: 1;
}
.hp-container {
position: absolute;
top: -130px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.hp-bar {
width: 100%;
height: 10px;
background-color: red;
}
.hp-text {
color: black;
font-weight: bold;
margin-bottom: 5px;
}
.shape {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
font-size: 12px;
}
.square {
background-color: blue;
}
.circle {
background-color: green;
border-radius: 50%;
}
.game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
color: red;
display: none;
}
.start-button, .restart-button {
position: absolute;
top: 20px;
padding: 10px 20px;
font-size: 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.start-button:hover, .restart-button:hover {
background-color: #45a049;
}
.restart-button {
display: none;
}
.score {
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
font-weight: bold;
color: black;
}
</style>
</head>
<body>
<audio id="hit-sound" src="hit.mp3"></audio>
<audio id="game-over-sound" src="game-over.mp3"></audio>
<div class="score" id="score">คะแนน: 0</div>
<button class="start-button" id="start-button">เริ่มเกม</button>
<button class="restart-button" id="restart-button">เริ่มใหม่</button>
<div class="castle" id="castle" style="display: none;">
<div class="hp-container">
<div class="hp-text" id="hp-text">HP: 100</div>
<div class="hp-bar" id="hp-bar" style="width: 100%;"></div>
</div>
<div class="wall">
<div class="wall-block"></div>
<div class="wall-block"></div>
<div class="wall-block"></div>
<div class="wall-block"></div>
<div class="wall-block"></div>
</div>
<div class="tower tower-left">
<div class="tower-top"></div>
</div>
<div class="tower tower-right">
<div class="tower-top"></div>
</div>
<div class="gate"></div>
</div>
<div class="game-over" id="game-over">Game Over</div>
<script>
let hp = 100;
let score = 0;
let shapeInterval;
let shapeCreationRate = 3000;
function updateHPDisplay() {
const hpBar = document.getElementById('hp-bar');
const hpText = document.getElementById('hp-text');
hpBar.style.width = hp + '%';
hpText.textContent = 'HP: ' + hp;
if (hp > 50) {
hpBar.style.backgroundColor = 'red';
} else if (hp > 20) {
hpBar.style.backgroundColor = 'orange';
} else {
hpBar.style.backgroundColor = 'yellow';
}
if (hp <= 0) {
hp = 0;
hpBar.style.width = '0%';
displayGameOver();
}
}
function updateScoreDisplay() {
const scoreText = document.getElementById('score');
scoreText.textContent = 'คะแนน: ' + score;
}
function displayGameOver() {
const gameOverText = document.getElementById('game-over');
gameOverText.style.display = 'block';
clearInterval(shapeInterval);
document.getElementById('restart-button').style.display = 'block';
document.querySelectorAll('.shape').forEach(shape => shape.remove());
const gameOverSound = document.getElementById('game-over-sound');
gameOverSound.play();
}
function createShape() {
const shape = document.createElement('div');
shape.classList.add('shape');
let shapeHP;
if (Math.random() < 0.5) {
shape.classList.add('square');
shapeHP = 30;
} else {
shape.classList.add('circle');
shapeHP = 50;
}
shape.dataset.hp = shapeHP;
shape.innerText = shapeHP;
shape.style.top = (window.innerHeight - 30) + 'px';
shape.style.right = '0px';
document.body.appendChild(shape);
shape.addEventListener('click', () => {
const hitSound = document.getElementById('hit-sound');
hitSound.play();
let points = 0;
if (shape.classList.contains('square')) {
points = 1;
} else if (shape.classList.contains('circle')) {
points = 3;
}
let currentShapeHP = parseInt(shape.dataset.hp);
currentShapeHP -= 10;
shape.dataset.hp = currentShapeHP;
shape.innerText = currentShapeHP;
if (currentShapeHP <= 0) {
shape.remove();
score += points;
updateScoreDisplay();
if (score % 50 === 0) {
shapeCreationRate = Math.max(200, shapeCreationRate - 100);
clearInterval(shapeInterval);
shapeInterval = setInterval(createShape, shapeCreationRate);
}
}
});
const castleRect = document.getElementById('castle').getBoundingClientRect();
const castleCenterX = castleRect.left + castleRect.width / 2;
const castleCenterY = castleRect.top + castleRect.height / 2;
const interval = setInterval(() => {
const shapeRect = shape.getBoundingClientRect();
const dx = castleCenterX - shapeRect.left;
const dy = castleCenterY - shapeRect.top;
const angle = Math.atan2(dy, dx);
shape.style.left = shapeRect.left + Math.cos(angle) * 5 + 'px';
shape.style.top = shapeRect.top + Math.sin(angle) * 5 + 'px';
if (
shapeRect.left <= castleRect.right &&
shapeRect.bottom >= castleRect.top &&
shapeRect.top <= castleRect.bottom
) {
hp -= parseInt(shape.dataset.hp);
shape.remove();
updateHPDisplay();
clearInterval(interval);
}
if (shapeRect.left < -30) {
shape.remove();
clearInterval(interval);
}
}, 20);
}
function startGame() {
document.getElementById('start-button').style.display = 'none';
document.getElementById('castle').style.display = 'block';
document.getElementById('restart-button').style.display = 'none';
hp = 100;
score = 0;
shapeCreationRate = 3000;
updateHPDisplay();
updateScoreDisplay();
shapeInterval = setInterval(createShape, shapeCreationRate);
}
function restartGame() {
hp = 100;
score = 0;
shapeCreationRate = 3000;
updateHPDisplay();
updateScoreDisplay();
document.getElementById('game-over').style.display = 'none';
document.getElementById('restart-button').style.display = 'none';
shapeInterval = setInterval(createShape, shapeCreationRate);
document.querySelectorAll('.shape').forEach(shape => shape.remove());
}
document.getElementById('start-button').addEventListener('click', startGame);
document.getElementById('restart-button').addEventListener('click', restartGame);
</script>
</body>
</html>
วิดิโออธิบาย CODE
วิดิโอตัวอย่างการเล่นเกม
ลิ้งค์เข้าเล่นเกม : https://onlinegdb.com/w4l3PgP-t
