เกมส์รับลูกบอลจากฟ้า [Catch the Falling Balls from the Sky]

จัดทําโดย นายกษิดิศ วิชัยธรรม วฟ.สมทบ รหัสนักศึกษา 167204132004
คณะวิศวกรรมศาสตร์ สาขาวิศวกรรมไฟฟ้า
รายวิชา 04000104 การโปรเเกรมคอมพิวเตอร์ 1/2567

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

ในยุคดิจิทัลปัจจุบัน เกมได้กลายเป็นส่วนหนึ่งของวัฒนธรรมและความบันเทิง ทั้งเกมที่ให้ความสนุกสนานและเกมที่พัฒนาทักษะต่างๆ ซึ่งเกมกระบะจับสิ่งของที่ตกลงมาจากฟ้าเป็นอีกตัวอย่างหนึ่งของเกมง่ายๆ ที่เป้าหมายคือสร้างความท้าทายในการรวบรวมวัตถุ โดยไอเทมมีหลากหลายสีและให้ความท้าทายที่แตกต่างกันออกไป

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

วัตถุประสงค์ของโปรแกรมนี้คือเพื่อสร้างเกมง่ายๆ ที่สามารถใช้ได้บนเว็บเบราว์เซอร์ โดยให้ผู้เล่นควบคุมตะกร้ารับไอเทม ซึ่งต้องจับไอเทมสีเขียวให้ได้มากที่สุดในขณะที่หลีกเลี่ยงไม่ให้ไอเทมสีเขียวตกถึงพื้น

3. ขอบเขต

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

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

• พัฒนาทักษะด้านการประสานมือและตา
• เสริมสร้างความรวดเร็วในการตัดสินใจ
• ให้ความบันเทิงและความเพลิดเพลินในช่วงเวลาว่าง

5. ความรู้ที่เกี่ยวข้อง

โปรแกรมนี้เกี่ยวข้องกับพื้นฐานการพัฒนาเว็บ ซึ่งประกอบด้วยการใช้งาน HTML สำหรับโครงสร้างหน้าเว็บ, CSS สำหรับการตกแต่งและการจัดรูปแบบ, และ JavaScript เพื่อสร้างปฏิสัมพันธ์และจัดการกับกิจกรรมของผู้เล่น

6. สรุปวิธีการใช้โปรแกรม

6.1 เปิดลิงค์ดังต่อไปนี้ : https://www.onlinegdb.com/edit/ouyIr374s#

6.2 กดปุ่ม run

6.3 ใช้เมาส์เพื่อควบคุมตะกร้าเลื่อนไปรอบๆ หน้าจอเพื่อจับไอเทมสีเขียวที่ตกลงมา คะแนนจะเพิ่มขึ้นเมื่อจับไอเทมสีเขียวได้และเกมจะจบลงเมื่อไอเทมสีเขียวตกถึงพื้น

7. สรุปผลการทดลอง

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

8. การทำงานของโปรแกรม

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

8.1 กำหนดลักษณะการแสดงผลขององค์ประกอบต่าง ๆ ในหน้าเว็บ

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f8ff;
margin: 0;
overflow: hidden;
}
#gameArea {
position: relative;
width: 800px;
height: 600px;
background-color: #c5e1a5;
border: 2px solid #333;
overflow: hidden;
}
.player {
position: absolute;
width: 60px;
height: 30px;
background-color: #ff5722;
border-radius: 10px;
transition: all 0.1s ease;
}
.item {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
}
#score {
font-size: 24px;
position: absolute;
top: 10px;
left: 10px;
color: #333;
}

8.2 การเตรียมตัวแปรและสถานะเริ่มต้นที่จำเป็นต่อการสร้างเกม โดยรวมถึงการเข้าถึงองค์ประกอบ HTML ที่สำคัญและการตั้งค่าต่าง ๆ เช่น คะแนน เรียกใช้ความเร็วในการตก และการจัดการสีของไอเท็มที่จะถูกสร้างขึ้นในเกม

const gameArea = document.getElementById(‘gameArea’);
const player = document.getElementById(‘player’);
const scoreDisplay = document.getElementById(‘score’);
let score = 0;
const fallSpeed = 3;
const itemColors = [‘red’, ‘purple’, ‘green’];
let gameInterval;
let items = [];

8.2.1 ฟังก์ชั่นสร้างไอเท็มใหม่สำหรับเกม

function createItem() {
if (items.length >= 6) return; // Limit number of items on screen
const item = document.createElement(‘div’);
item.className = ‘item’;
const color = itemColors[Math.floor(Math.random() * itemColors.length)];
item.style.backgroundColor = color;
item.style.left = Math.random() * (gameArea.clientWidth – 20) + ‘px’;
item.style.top = ‘0px’;
gameArea.appendChild(item);
items.push(item);
}

8.2.2 ฟังก์ชั่นการควบคุมการเคลื่อนที่ของไอเท็มในเกม

function moveItems() {
items.forEach((item, index) => {
const itemRect = item.getBoundingClientRect();
item.style.top = itemRect.top + fallSpeed + ‘px’;

        if (itemRect.bottom >= gameArea.clientHeight) {
            if (item.style.backgroundColor === 'green') {
                clearInterval(gameInterval);
                alert('Game Over! A green item hit the ground. Your final score is ' + score);
            }
            item.remove();
            items.splice(index, 1);
        }

        const playerRect = player.getBoundingClientRect();
        if (
            itemRect.bottom >= playerRect.top &&
            itemRect.top <= playerRect.bottom &&
            itemRect.left <= playerRect.right &&
            itemRect.right >= playerRect.left
        ) {
            if (item.style.backgroundColor === 'green') {
                score++;
                scoreDisplay.textContent = 'Score: ' + score;
            }
            item.remove();
            items.splice(index, 1);
        }
    });
}

8.2.3 ฟังก์ชั่นเริ่มเกม

function startGame() {
gameInterval = setInterval(() => {
createItem();
moveItems();
}, 100);
}