เกมยิงจรวดสุดมัน(Galaga clone)

จัดทำโดย นาย ฐปนน สินธุ์ประดิษฐ วฟ. 167404130021

คณะวิศกรรมศาสตร์ สาขาวิศวกรรมไฟฟ้า

รายวิชา 04000104 การโปรเเกรมคอมพิวเตอร์ 1/2567

1.ความเป็นมา

เกม Galaga เป็นเกมยิงอาร์เคดแนวย้อนยุคที่ได้รับความนิยมในยุค 80s ซึ่งพัฒนาโดย Namco (ปัจจุบันคือ Bandai Namco Entertainment) ผู้เล่นจะควบคุมยานอวกาศเพื่อทำลายฝูงศัตรูที่บินลงมาจากด้านบนของหน้าจอ เกมนี้มีความท้าทายและเป็นที่รู้จักกันดีในเรื่องของการควบคุมที่ง่ายและกราฟิกแบบพิกเซล การสร้างโครงงานเกม Galaga Clone ขึ้นมาในภาษา HTML, CSS, และ JavaScript เพื่อให้ผู้พัฒนาได้เรียนรู้วิธีสร้างเกมแนวยิงแบบง่ายและนำเสนอเทคนิคที่เกี่ยวข้องกับการพัฒนาเกม

2.วัตถุประสงค์

โครงงานนี้มีวัตถุประสงค์เพื่อ:

• พัฒนาเกมยิงยานอวกาศที่เป็น Galaga Clone ขึ้นมาโดยใช้ภาษา HTML, CSS และ JavaScript
• เรียนรู้การจัดการกราฟิกสองมิติบนเว็บเบราว์เซอร์ผ่านการใช้แท็ก <canvas> ของ HTML
• เพิ่มความรู้ในการเขียนโปรแกรมเชิงโต้ตอบผ่านการควบคุมผู้เล่นและการสร้างปฏิสัมพันธ์ในเกม
• สร้างประสบการณ์การเล่นเกมที่สนุกสนานและท้าทายผู้เล่น

3.ขอบเขต

โครงงานนี้ครอบคลุม:

• การออกแบบยานของผู้เล่นและศัตรู รวมถึงการสร้างภาพระเบิดเมื่อยานถูกทำลาย
• การพัฒนาระบบการยิงกระสุน ทั้งของผู้เล่นและศัตรู พร้อมทั้งการตรวจสอบการชน (collision detection)
• การสร้างเอฟเฟกต์การเพิ่มความเร็วของยานและกระสุนเมื่อคะแนนเพิ่มขึ้นตามเกณฑ์ที่กำหนด
• การพัฒนาอินเทอร์เฟซพื้นฐาน เช่น หน้าจอเริ่มเกม หน้าจอเกมโอเวอร์ และการแสดงคะแนน
• การเพิ่มเสียงประกอบและเพลงพื้นหลังเพื่อเพิ่มบรรยากาศในการเล่นเกม

4.ประโยชน์ที่คาดว่าจะได้รับ

ผู้พัฒนาจะได้ฝึกฝนทักษะการเขียนโปรแกรม HTML, CSS และ JavaScript ในระดับสูงขึ้น โดยเน้นที่การพัฒนาเกมผู้เล่นจะได้รับความสนุกสนานและท้าทายจากเกมที่พัฒนาขึ้น รวมถึงการได้เรียนรู้กลไกของเกมแนวยิงอาร์เคดสามารถนำความรู้ที่ได้รับไปประยุกต์ใช้ในการพัฒนาเกมอื่นๆ หรือการทำงานกับกราฟิกบนเว็บในโปรเจ็กต์อื่นๆ

5.ความรู้ที่คาดว่าจะได้รับ

• ความรู้เกี่ยวกับการสร้างและควบคุมองค์ประกอบกราฟิกบนเว็บผ่าน <canvas> ของ HTML
• ทักษะการจัดการอีเวนต์และการควบคุมการเคลื่อนไหวของผู้เล่นในเกม
• ความเข้าใจเกี่ยวกับการทำงานร่วมกันของ HTML, CSS และ JavaScript ในการสร้างประสบการณ์การเล่นเกม
• การจัดการเสียงในเกมผ่าน <audio> และการสร้างเอฟเฟกต์พิเศษ เช่น การระเบิด

6.ผลการดำเนินการ

ผลการดำเนินการ

การพัฒนาโปรเจกต์ Galaga Clone ด้วยภาษา HTML, CSS และ JavaScript สามารถสรุปผลการดำเนินการได้ดังนี้:

1. ระบบการควบคุมที่ทำงานได้อย่างสมบูรณ์:
   • ระบบการควบคุมยานของผู้เล่นด้วยปุ่มลูกศรซ้าย-ขวาทำงานได้อย่างราบรื่น สามารถเคลื่อนยานไปซ้ายและขวาได้ตามที่ตั้งใจ และการยิงกระสุนด้วยการกดปุ่ม Space Bar ก็ทำงานได้อย่างถูกต้อง
2. การแสดงผลกราฟิก:
   • ภาพของยานผู้เล่น ศัตรู และเอฟเฟกต์ระเบิดแสดงผลได้ดีตามที่กำหนดไว้ในโค้ด เกมสามารถวาดวัตถุต่าง ๆ ลงบน canvas ได้อย่างถูกต้อง และเมื่อผู้เล่นทำลายศัตรูจะเกิดเอฟเฟกต์ระเบิดที่สร้างความสมจริงให้กับเกม
3. การเพิ่มระดับความยากอัตโนมัติ:
   • ระบบเพิ่มความเร็วของศัตรูและกระสุนตามคะแนนที่ผู้เล่นสะสม ทำให้เกมมีความท้าทายมากขึ้นเมื่อผู้เล่นได้คะแนนสูง เกมจะเริ่มยากขึ้นอย่างเป็นลำดับตามความสามารถของผู้เล่น
4. ระบบเสียง:
   • เสียงดนตรีพื้นหลังถูกเพิ่มเข้ามาในเกมและทำงานได้อย่างราบรื่น ทำให้เกมมีความสนุกสนานและเพิ่มบรรยากาศให้ผู้เล่น
5. การจบเกมและการรีสตาร์ท:
   • เมื่อผู้เล่นโดนกระสุนของศัตรูหรือชนเข้ากับศัตรู ระบบจะจบเกมโดยแสดงข้อความ “GAME OVER” และผู้เล่นสามารถกดปุ่ม “RESTART” เพื่อเริ่มเล่นใหม่ได้
6. การแสดงคะแนนแบบเรียลไทม์:
   • คะแนนของผู้เล่นจะอัปเดตตลอดเวลาที่ผู้เล่นกำลังเล่นเกมและทำลายศัตรู คะแนนจะแสดงผลในตำแหน่งที่ชัดเจน ทำให้ผู้เล่นสามารถติดตามคะแนนของตนเองได้อย่างง่ายดาย
7. การทำงานโดยรวม:
   • ตัวเกมสามารถทำงานได้ครบถ้วนตามฟังก์ชันที่วางไว้ ไม่พบข้อผิดพลาดร้ายแรง (bugs) ในระหว่างการทดสอบ การทำงานของระบบเป็นไปอย่างลื่นไหล ไม่มีปัญหาด้านประสิทธิภาพ

โดยสรุปแล้ว ผลการดำเนินการพัฒนาเกม Galaga Clone ประสบความสำเร็จตามที่วางแผนไว้ ตัวเกมมีความสนุก ท้าทาย และสามารถเล่นได้อย่างไม่มีปัญหา

7.วิธีการใช้งานโปรเเกรม

เปิดโปรแกรมเกม:

เปิดไฟล์ HTML ของเกมในเว็บเบราว์เซอร์ที่รองรับ HTML5 เช่น Google Chrome, Firefox, หรือ Edge เพื่อเริ่มต้นเล่นเกม

หน้าจอเริ่มต้น:

เมื่อเปิดเกมขึ้นมาจะมีหน้าจอเริ่มต้นแสดงข้อความ “Welcome to Galaga Clone” และปุ่ม “START”

คลิกที่ปุ่ม “START” เพื่อเริ่มเกม

การควบคุม:

• ใช้ปุ่มลูกศรซ้ายและขวาเพื่อควบคุมการเคลื่อนที่ของยาน
• กดปุ่มเว้นวรรคเพื่อยิงกระสุน

การเล่น: ยิงศัตรูที่ตกลงมาเพื่อสะสมคะแนน โดยเกมจะเร่งความเร็วของศัตรูและกระสุนตามคะแนนที่เพิ่มขึ้น

จบเกม: หากยานของผู้เล่นถูกกระสุนศัตรู เกมจะจบลงและแสดงข้อความ “GAME OVER”

เริ่มใหม่: กดปุ่ม “RESTART” เพื่อเริ่มเกมใหม่

การใช้งานโปรแกรมง่ายและเข้าใจได้ง่าย ทำให้ผู้เล่นสามารถเริ่มเล่นเกมได้ทันที

ข้อสังเกตเพิ่มเติม:

• ยานของศัตรูจะค่อยๆ เคลื่อนที่เร็วขึ้นตามคะแนนที่ผู้เล่นได้รับ
• ผู้เล่นต้องพยายามหลบกระสุนจากศัตรูและทำลายศัตรูให้ได้มากที่สุดเพื่อสะสมคะแนนสูง

8.Code game

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Galaga Clone </title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: black;
        }
        canvas {
            display: block;
            background-color: black;
            margin: 0 auto;
            border: 1px solid white;
        }
        #score {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            font-size: 24px;
            font-family: Arial, sans-serif;
        }
        #gameOver {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: red;
            font-size: 48px;
            font-family: Arial, sans-serif;
            display: none;
        }
        #restartButton {
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10px 20px;
            font-size: 24px;
            background-color: lime;
            color: black;
            border: none;
            display: none;
            cursor: pointer;
        }
        #startScreen {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-align: center;
        }
        #startButton {
            padding: 10px 20px;
            font-size: 24px;
            background-color: green;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <canvas id="gameCanvas" style="display:none;"></canvas>
    <div id="startScreen">
        <h1>Welcome to Galaga Clone</h1>
        <button id="startButton">START</button>
    </div>
    <div id="score" style="display:none;">Score: 0</div>
    <div id="gameOver">GAME OVER</div>
    <button id="restartButton">RESTART</button>

    <audio id="backgroundMusic" loop>
        <source src="music.mp3" type="audio/mp3">
        Your browser does not support the audio element.
    </audio>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const gameOverText = document.getElementById('gameOver');
        const restartButton = document.getElementById('restartButton');
        const scoreDisplay = document.getElementById('score');
        const backgroundMusic = document.getElementById('backgroundMusic');
        const startScreen = document.getElementById('startScreen');
        const startButton = document.getElementById('startButton');
        canvas.width = 800;
        canvas.height = 600;

        const shipImage = new Image();
        shipImage.src = 'ship.png';

        const enemyImage = new Image();
        enemyImage.src = 'enemy.png';

        const explosionImage = new Image();
        explosionImage.src = 'explosion.png'; // โหลดภาพระเบิด

        let ship = {
            x: canvas.width / 2 - 25,
            y: canvas.height - 70,
            width: 50,
            height: 50,
            speed: 4,
            movingLeft: false,
            movingRight: false
        };

        let bullets = [];       
        let enemyBullets = [];  
        let enemies = [];       
        let explosions = [];     // เก็บการระเบิด
        let score = 0;          
        let gameRunning = false;  
        const bulletSpeed = 5;
        const enemyBulletSpeedBase = 1.5;
        const enemySpeedBase = 0.5;
        const speedIncreaseFactor = 0.01;
        const enemyShootCooldown = 1000;
	const initialBulletSpeed = 5; // ความเร็วเริ่มต้น
	const bulletSpeedIncreaseFactor = 0.5; // ค่าที่ใช้ในการเพิ่มความเร็วของกระสุน 
        let lastEnemyShotTime = {}; 
	
	function calculateBulletSpeed() {
    return initialBulletSpeed + (Math.floor(score / 100) * bulletSpeedIncreaseFactor); // เพิ่มความเร็วทุกๆ 20 คะแนน
}
        function resetGame() {
            ship.x = canvas.width / 2 - 25;
            ship.y = canvas.height - 70;
            bullets = [];
            enemyBullets = [];
            enemies = [];
            explosions = [];      // รีเซ็ตการระเบิด
            score = 0; 
            gameRunning = true;
            gameOverText.style.display = 'none';
            restartButton.style.display = 'none';
            scoreDisplay.innerText = `Score: ${score}`; 
            scoreDisplay.style.display = 'block';
            playMusic();
            gameLoop();
        }

        function createEnemy() {
            const enemy = {
                x: Math.random() * (canvas.width - 40) + 20,
                y: -20,
                width: 40,
                height: 40,
                shotsFired: 0
            };
            enemies.push(enemy);
        }

        function drawShip() {
            ctx.drawImage(shipImage, ship.x, ship.y, ship.width, ship.height);
        }

        function drawBullets() {
            for (let bullet of bullets) {
                ctx.fillStyle = 'red';
                ctx.fillRect(bullet.x, bullet.y, 5, 10);
            }
        }

        function drawEnemyBullets() {
            for (let bullet of enemyBullets) {
                ctx.fillStyle = 'yellow';
                ctx.fillRect(bullet.x, bullet.y, 5, 10);
            }
        }

        function drawEnemy(enemy) {
            ctx.drawImage(enemyImage, enemy.x, enemy.y, enemy.width, enemy.height);
        }

        function drawEnemies() {
            for (let enemy of enemies) {
                drawEnemy(enemy);
            }
        }

       function drawExplosions() {
    for (let explosion of explosions) {
        ctx.fillStyle = 'orange';
        ctx.beginPath();
        // ปรับขนาดเป็น 100
        const size = 100; // กำหนดให้ size เป็น 100
        ctx.arc(explosion.x + size / 2, explosion.y + size / 2, size / 2, 0, Math.PI * 2);
        ctx.fill();
        explosion.lifetime--;
    }
}

        function checkCollision(rect1, rect2) {
            return (
                rect1.x < rect2.x + rect2.width &&
                rect1.x + rect1.width > rect2.x &&
                rect1.y < rect2.y + rect2.height &&
                rect1.y + rect1.height > rect2.y
            );
        }

        function updateExplosions() {
            // ลบการระเบิดที่เก่าเกินไป
            explosions = explosions.filter(explosion => explosion.lifetime > 0);
            for (let explosion of explosions) {
                explosion.lifetime--; // ลดอายุการใช้งาน
            }
        }

        function updateBullets() {
    bullets = bullets.filter(bullet => bullet.y > 0);
    const bulletSpeed = calculateBulletSpeed(); // คำนวณความเร็วกระสุน

    for (let i = 0; i < bullets.length; i++) {
        bullets[i].y -= bulletSpeed; // ใช้ความเร็วกระสุนที่คำนวณไว้
        for (let j = 0; j < enemies.length; j++) {
            if (checkCollision(bullets[i], enemies[j])) {
                bullets.splice(i, 1);
                explosions.push({ x: enemies[j].x, y: enemies[j].y, lifetime: 15, size: 100 });
                enemies.splice(j, 1);
                score += 10;
                scoreDisplay.innerText = `Score: ${score}`;
                i--;
                break;
            }
        }
    }
}

        function updateEnemyBullets() {
            enemyBullets = enemyBullets.filter(bullet => bullet.y < canvas.height);
            for (let bullet of enemyBullets) {
                bullet.y += enemyBulletSpeedBase;
                if (checkCollision(bullet, ship)) {
                    explosions.push({ x: ship.x, y: ship.y, lifetime: 30, size: 100}); // เพิ่มเอฟเฟกต์ระเบิดเมื่อโดนยิง
                    gameOver();
                }
            }
        }

        function updateEnemies() {
            enemies = enemies.filter(enemy => enemy.y < canvas.height);
            const currentEnemySpeed = enemySpeedBase + (score * speedIncreaseFactor);
            
            for (let enemy of enemies) {
                enemy.y += currentEnemySpeed;
                if (checkCollision(enemy, ship)) {
                    explosions.push({ x: ship.x, y: ship.y, lifetime: 30 }); // เพิ่มเอฟเฟกต์ระเบิดเมื่อศัตรูชน
                    gameOver();
                }

                const now = Date.now();
                
                if (now - (lastEnemyShotTime[enemy.x] || 0) > enemyShootCooldown) {
                    if (Math.random() < 0.02) { 
                        enemyBullets.push({
                            x: enemy.x + enemy.width / 2 - 2.5,
                            y: enemy.y + enemy.height,
                            width: 5,
                            height: 10
                        });
                        lastEnemyShotTime[enemy.x] = now;
                    }
                }
            }
        }

        function updateShip() {
            if (ship.movingLeft && ship.x > 0) {
                ship.x -= ship.speed;
            }
            if (ship.movingRight && ship.x < canvas.width - ship.width) {
                ship.x += ship.speed;
            }
        }

        function gameLoop() {
            if (!gameRunning) return;
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            drawShip();
            drawBullets();
            drawEnemyBullets();
            drawEnemies();
            drawExplosions(); // วาดเอฟเฟกต์ระเบิด

            updateExplosions(); // อัปเดตการระเบิด
            updateShip();
            updateBullets();
            updateEnemyBullets();
            updateEnemies();

            requestAnimationFrame(gameLoop);
        }

        function gameOver() {
            gameRunning = false;
            backgroundMusic.pause();
            gameOverText.style.display = 'block';
            restartButton.style.display = 'block';
        }

        function playMusic() {
            backgroundMusic.play();
        }

        startButton.addEventListener('click', function() {
            startScreen.style.display = 'none';
            document.getElementById('gameCanvas').style.display = 'block';
            resetGame();
        });

        restartButton.addEventListener('click', function() {
            resetGame();
        });

        window.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowLeft') {
                ship.movingLeft = true;
            } else if (event.key === 'ArrowRight') {
                ship.movingRight = true;
            } else if (event.key === ' ') {
                bullets.push({
                    x: ship.x + ship.width / 2 - 2.5,
                    y: ship.y,
                    width: 5,
                    height: 10
                });
            }
        });

        window.addEventListener('keyup', function(event) {
            if (event.key === 'ArrowLeft') {
                ship.movingLeft = false;
            } else if (event.key === 'ArrowRight') {
                ship.movingRight = false;
            }
        });

        setInterval(createEnemy, 800);
    </script>
</body>
</html>

9.การทดลอง สรุปผล ข้อเสนอแนะ

• การทดลอง: การทดสอบเกมได้ดำเนินการโดยให้ผู้ใช้หลายคนเข้ามาทดลองเล่น พบว่าเกมทำงานได้ดีบนเว็บเบราว์เซอร์สมัยใหม่ เช่น Google Chrome และ Firefox การควบคุมยานและการยิงกระสุนเป็นไปอย่างราบรื่น มีเพียงบางกรณีที่การทำงานของเสียงอาจช้าหรือหยุดชั่วคราวในบางเบราว์เซอร์
• สรุปผล: เกมสามารถทำงานได้ตามวัตถุประสงค์ ผู้เล่นได้รับประสบการณ์การเล่นเกมที่ท้าทายและสนุกสนาน และผู้พัฒนาสามารถเรียนรู้เทคนิคการพัฒนาเกมบนเว็บอย่างครบถ้วน
• ข้อเสนอแนะ: ควรเพิ่มฟีเจอร์เพิ่มเติม เช่น ศัตรูระดับบอสหรือไอเท็มช่วยเหลือ เพื่อเพิ่มความท้าทายให้กับผู้เล่น นอกจากนี้อาจปรับปรุงประสิทธิภาพในการโหลดและแสดงผลของเกมในอุปกรณ์ที่มีทรัพยากรต่ำ

10.การนำไปประยุกต์ใช้กับวิศกรรมไฟฟ้า

การนำไปประยุกต์ใช้กับวิศวกรรมไฟฟ้า

แม้ว่าโปรเจกต์เกม Galaga Clone จะพัฒนาด้วยเทคโนโลยีเว็บ (HTML, CSS, JavaScript) ซึ่งเน้นด้านการพัฒนาเกมและแอปพลิเคชันทางซอฟต์แวร์ แต่หลักการต่าง ๆ ที่ใช้ในโปรเจกต์นี้สามารถประยุกต์ใช้กับการเรียนรู้และการทำงานในสาขาวิศวกรรมไฟฟ้าได้ในหลาย ๆ ด้าน ดังนี้:

1. การประยุกต์ใช้ไมโครคอนโทรลเลอร์:
   • หลักการควบคุมการเคลื่อนที่ของยานในเกมสามารถประยุกต์ใช้ในระบบไมโครคอนโทรลเลอร์สำหรับควบคุมการทำงานของมอเตอร์หรืออุปกรณ์ไฟฟ้า เช่น การควบคุมมอเตอร์แบบสองทิศทาง (forward และ backward) ที่คล้ายกับการควบคุมการเคลื่อนที่ซ้าย-ขวาของยานในเกม
2. การประมวลผลสัญญาณ (Signal Processing):
   • การตรวจจับการชนของยานผู้เล่นและศัตรูในเกม ซึ่งต้องใช้การตรวจสอบพิกัดของวัตถุในเกม เปรียบได้กับการประมวลผลสัญญาณหรือข้อมูลที่ได้จากเซ็นเซอร์ต่าง ๆ ในระบบวิศวกรรมไฟฟ้า เช่น การตรวจจับการชนกันในระบบอัตโนมัติ (Automation System)
3. การควบคุมอุปกรณ์ผ่านปุ่มกด (Button Control):
   • ระบบควบคุมการเล่นเกมผ่านปุ่มคีย์บอร์ด (Keyboard) สามารถประยุกต์ใช้ในงานออกแบบวงจรไฟฟ้าที่มีการควบคุมผ่านปุ่มกดหรือสวิตช์ต่าง ๆ ในการควบคุมอุปกรณ์หรือระบบไฟฟ้า
4. การออกแบบระบบอัตโนมัติ:
   • หลักการของระบบเกมที่มีการเพิ่มระดับความยากโดยอัตโนมัติตามคะแนนที่สะสม สามารถนำไปประยุกต์ใช้ในระบบไฟฟ้าอัตโนมัติที่ต้องปรับเปลี่ยนการทำงานของระบบตามเงื่อนไขที่กำหนด เช่น การปรับกำลังการจ่ายไฟตามความต้องการใช้งาน
5. การจำลองระบบ (Simulation):
   • เกมนี้สามารถใช้เป็นแนวทางในการสร้างระบบจำลองการทำงาน (Simulation) ที่สามารถนำไปประยุกต์ใช้ในวิศวกรรมไฟฟ้า เช่น การจำลองวงจรไฟฟ้า หรือการจำลองระบบควบคุม เพื่อใช้ในการทดสอบและพัฒนาโดยไม่ต้องสร้างอุปกรณ์จริง
6. การเขียนโปรแกรมควบคุม (Control Systems Programming):
   • การเขียนโค้ดควบคุมในเกม เช่น การเคลื่อนไหว การตรวจจับการชน และการยิงกระสุน สามารถประยุกต์ใช้ในการเขียนโปรแกรมควบคุมในระบบควบคุมต่าง ๆ ของงานวิศวกรรมไฟฟ้า เช่น การเขียนโปรแกรมเพื่อควบคุมการทำงานของระบบไฟฟ้า หรือเครื่องจักรไฟฟ้าผ่านการโปรแกรมในไมโครคอนโทรลเลอร์ (Microcontroller)
7. การสร้างอินเตอร์เฟซผู้ใช้งาน (User Interface):
   • การออกแบบอินเตอร์เฟซผู้เล่น (UI) ในเกม เช่น ปุ่มเริ่มเกม ปุ่มรีสตาร์ท และการแสดงคะแนน สามารถนำไปประยุกต์ใช้ในการออกแบบอินเตอร์เฟซผู้ใช้สำหรับระบบควบคุมไฟฟ้าในงานอุตสาหกรรม ที่ช่วยให้ผู้ปฏิบัติงานสามารถควบคุมและตรวจสอบการทำงานของระบบได้ง่ายขึ้น

โดยสรุป การพัฒนาเกม Galaga Clone ไม่เพียงแค่พัฒนาทักษะด้านการเขียนโปรแกรม แต่ยังสามารถเชื่อมโยงกับหลักการพื้นฐานทางวิศวกรรมไฟฟ้าและการควบคุมอัตโนมัติได้อย่างมีประสิทธิภาพ โดยสามารถนำไปประยุกต์ใช้ในหลาย ๆ ด้านของงานวิศวกรรมไฟฟ้าได้เช่นกัน

11.อ้างอิง

1.MDN Web Docs. (2023). HTML <canvas> element. Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas

2.MDN Web Docs. (2023). Introduction to the DOM. Retrieved from https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

3.MDN Web Docs. (2023). JavaScript Game Development. Retrieved from https://developer.mozilla.org/en-US/docs/Games

4.W3Schools. (2023). JavaScript HTML DOM Events. Retrieved from https://www.w3schools.com/js/js_htmldom_events.asp

5.GameDev Academy. (2023). How to Build a Simple Game Using HTML5 and JavaScript. Retrieved from https://gamedevacademy.org/how-to-build-a-simple-game-using-html5-and-javascript

6.CodePen. (2023). HTML5 Galaga Clone Example. Retrieved from https://codepen.io/

7.Namco Museum Archives. (2023). Galaga: Game History. Retrieved from https://www.bandainamcoent.com/

วิดีโออธิบายการเขียนโค้ดสร้างเกมเเละการทำงานพร้อมสาธิตการเล่น