เกมบิงโก (Bingo game)

ผู้เขียนบทความ : นายณัฐชนนท์ หัชบูรณ์ รหัส 16740410056

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

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

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

เกมบิงโกมีต้นกำเนิดจากอิตาลีในศตวรรษที่ 16 โดยมีชื่อว่า “Il Gioco del Lotto d’Italia” ซึ่งคล้ายกับการเล่นลอตเตอรี่ ต่อมาในศตวรรษที่ 18 เกมนี้ได้รับความนิยมในฝรั่งเศสในชื่อ “Le Lotto”

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

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

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

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

3. ขอบเขต

  • จำนวนผู้เล่น : เกมบิงโกสามารถเล่นได้ตั้งแต่ 2 คนขึ้นไป โดยทั่วไปแล้วมักเล่นในกลุ่มขนาดใหญ่ เช่น 10-100 คน
  • รูปแบบของเกม : บิงโกคลาสสิก: การเล่นด้วยการ์ดที่มีหมายเลขและการเรียกหมายเลขบิงโก 75 ลูก: ใช้การ์ด 5×5 และหมายเลข 1-75 บิงโก 90 ลูก: การเล่นที่นิยมในสหราชอาณาจักร ใช้การ์ด 3 แถว 9 คอลัมน์ บิงโก
  • กฎและเงื่อนไขการเล่น : กฎของเกมสามารถปรับเปลี่ยนได้ตามกลุ่มผู้เล่นหรือประเภทของบิงโกที่เล่น เช่น วิธีการชนะอาจมีความแตกต่างกัน เช่น การชนะในแถว, คอลัมน์ หรือรูปแบบต่างๆ (เช่น รูปตัว X หรือเส้นทแยงมุม)

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

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

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

  • ความรู้พื้นฐานเกี่ยวกับ HTML โครงสร้าง HTML: เข้าใจการใช้แท็กต่างๆ เช่น <html>,<head>,<tr>,<td>อื่นๆ เพื่อสร้างโครงสร้างของหน้าเว็บ
  • ความรู้พื้นฐานเกี่ยวกับ CSS : การออกแบบสไตล์: ใช้ CSS ในการตกแต่งหน้าเว็บ เช่น การกำหนดสีพื้นหลัง, สีของข้อความ, ขนาดตัวอักษร, และการจัดตำแหน่งของเนื้อหา
  • ความรู้เกี่ยวกับ JavaScript : การจัดการเหตุการณ์ (Event Handling): เข้าใจการใช้ addEventListener เพื่อเชื่อมต่อการกระทำของผู้ใช้กับฟังก์ชันที่กำหนด

6. การดำเนินงาน

  1. โครงสร้าง HTML • HTML Boilerplate: ส่วนแรกของโค้ดเป็นโครงสร้างพื้นฐานของเอกสาร HTML โดยมีการกำหนด สำหรับข้อมูลเมตาและสไตล์ และ สำหรับเนื้อหาหลักของหน้าเว็บ
    • ส่วนหัว (Heading): มี สำหรับชื่อเกมและ สำหรับชื่อการ์ดบิงโกแต่ละใบ
    • การ์ดบิงโก: มี สำหรับการ์ดบิงโกสองใบ พร้อมตารางที่ใช้ สำหรับแสดงหมายเลขบิงโก
  1. สไตล์ (CSS) • การออกแบบ: สไตล์ถูกกำหนดเพื่อให้เกมมีความน่าสนใจ โดยใช้ CSS เพื่อปรับแต่งสีพื้นหลัง, ขอบ, และการจัดวางองค์ประกอบ
    • การเปลี่ยนแปลงสี: CSS ยังทำให้มีการเปลี่ยนแปลงสีของเซลล์เมื่อมีการเลือกหรือหมายเลขที่ยังไม่ออก

3.JavaScript ตัวแปรและสถานะเกม ตัวแปร:
• bingoNumbers: เก็บหมายเลขที่ถูกสุ่มแล้ว
• drawnNumbers: เก็บหมายเลขที่ถูกสุ่มออกมาแล้วเพื่อให้สามารถตรวจสอบได้
• gameOver: ตัวแปรที่ใช้ตรวจสอบว่าเกมจบหรือยัง
• Draw Number : จะสุ่มหมายเลขใหม่และอัปเดตสถานะของเกม
• ปุ่ม Reset Game : จะคืนค่าทุกอย่างและเริ่มเกมใหม่

3.1 generateBingoCard(cardId):
• สร้างบัตรบิงโกใหม่ โดยสุ่มหมายเลข 1-75 สำหรับแต่ละเซลล์ในตาราง 5×5
• ทำเครื่องหมายช่องกลางว่าเป็น “FREE” และทำให้เซลล์ที่ยังไม่ได้สุ่มเป็น “disabled”
• เพิ่มเหตุการณ์คลิกให้แต่ละเซลล์เพื่อตรวจสอบการคลิกและการเลือกหมายเลข

3.2 drawNumber():
• สุ่มหมายเลขใหม่จาก 1-75 และเพิ่มหมายเลขนั้นไปยัง bingoNumbers และ drawnNumbers
• แสดงหมายเลขที่ถูกสุ่มในหน้าเว็บ
• เปลี่ยนสถานะของเซลล์ในบัตรบิงโกให้สามารถคลิกได้หากหมายเลขนั้นถูกสุ่ม

3.3 checkWin():
• ตรวจสอบว่าผู้เล่นชนะหรือไม่ โดยการตรวจสอบแถว, คอลัมน์, และเส้นทแยงมุม ว่ามีหมายเลขที่ถูกเลือก
• หากมีการชนะ จะทำการแสดงข้อความยืนยันในหน้าเว็บ

3.4 resetGame():
• รีเซ็ตตัวแปรทั้งหมดกลับไปสู่สถานะเริ่มต้น และสร้างบัตรบิงโกใหม่สำหรับการเริ่มเกมใหม่

  1. การดำเนินการเมื่อโหลดหน้า • window.onload: เมื่อหน้าโหลด จะสร้างบัตรบิงโกสองใบให้ผู้เล่น
  1. การโต้ตอบของผู้ใช้ • ผู้เล่นสามารถคลิกที่เซลล์ในบัตรบิงโกเพื่อทำเครื่องหมายหมายเลขที่ถูกสุ่มออกมา และปุ่ม “Draw Number” จะสุ่มหมายเลขใหม่และอัปเดตสถานะของเกม
    • ปุ่ม “Reset Game” จะคืนค่าทุกอย่างและเริ่มเกมใหม่

8. การทดลอง (Testing)

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

9.เทคนิคการประยุกต์เพื่อเพิ่มประสิทธิภาพ

9.1ปรับปรุงการสุ่มหมายเลขและการทำงานของเกม

• การสุ่มหมายเลขแบบจัดลำดับล่วงหน้า (Pre-shuffle Numbers):
• แทนที่จะสุ่มหมายเลขทุกครั้งที่กดปุ่ม Draw Number คุณสามารถทำการสุ่มหมายเลขทั้งหมด 1-75 ล่วงหน้าแล้วจัดเก็บไว้ในอาร์เรย์ และดึงตัวเลขจากอาร์เรย์นั้นทีละตัว วิธีนี้จะช่วยลดการทำงานของฟังก์ชันสุ่มทุกครั้งที่กดปุ่ม

9.2ลดการใช้งานทรัพยากร DOM

• การใช้ Event Delegation:
• แทนที่จะกำหนด event listener สำหรับทุก td ของบิงโกการ์ด คุณสามารถใช้ Event Delegation โดยติดตั้ง event listener ไว้ที่ระดับ table และตรวจสอบว่าเซลล์ใดถูกคลิกโดยดูจาก event.target ซึ่งจะช่วยลดจำนวน event listeners ที่สร้างขึ้นและเพิ่มประสิทธิภาพ

การเพิ่มประสิทธิภาพการตรวจสอบการชนะ

• ลดการคำนวณซ้ำซ้อนในฟังก์ชัน checkWin:
• แทนที่จะตรวจสอบการชนะของแถว คอลัมน์ และเส้นทแยงมุมทุกครั้งที่ทำเครื่องหมายช่อง คุณสามารถเก็บข้อมูลสถานะของแถว/คอลัมน์ในตัวแปร เช่น นับจำนวนของเซลล์ที่ถูกทำเครื่องหมายในแต่ละแถวหรือคอลัมน์ และอัปเดตตัวแปรนั้นทุกครั้งที่มีการทำเครื่องหมายใหม่ ซึ่งจะช่วยลดการตรวจสอบที่ไม่จำเป็น

10.สรุปผลและข้อเสนอแนะ

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

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

ข้อเสนอแนะ

  1. ปรับปรุงการสุ่มหมายเลขล่วงหน้า: ทำการสุ่มหมายเลข 1-75 ล่วงหน้าแล้วเก็บไว้ในอาร์เรย์ ช่วยลดการทำงานของฟังก์ชันสุ่มเมื่อกดปุ่มดึงหมายเลข
  2. ลดจำนวน Event Listeners: ใช้เทคนิค Event Delegation เพื่อลดการสร้าง event listeners สำหรับทุกๆ เซลล์ของบิงโกการ์ด ช่วยลดการใช้งานหน่วยความจำและปรับปรุงประสิทธิภาพการทำงานของหน้าเว็บ
  3. เพิ่มประสิทธิภาพการตรวจสอบการชนะ: แทนที่จะตรวจสอบทุกแถว คอลัมน์ และเส้นทแยงมุมทุกครั้งที่ทำเครื่องหมาย ให้เก็บสถานะของแถวและคอลัมน์ในตัวแปรแล้วอัปเดตทุกครั้งที่มีการทำเครื่องหมายใหม่ เพื่อลดการคำนวณที่ไม่จำเป็น

11. ข้อมูลอ้างอิง

https://th.theasianparent.com/bingo-game-for-kids

Code ของโปรแกรม

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bingo Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f8ff; /* สีพื้นหลัง */
            padding: 20px;
        }

        h1 {
            color: #333;
        }

        .bingo-card {
            display: inline-block;
            margin: 20px;
        }

        table {
            margin: 0 auto;
            border-collapse: collapse;
            border-radius: 10px; /* มุมโค้ง */
            overflow: hidden; /* ซ่อนขอบของตาราง */
        }

        table, th, td {
            border: 2px solid #4CAF50; /* ขอบตาราง */
        }

        td {
            width: 60px;
            height: 60px;
            text-align: center;
            vertical-align: middle;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            transition: background-color 0.3s; /* เพิ่มการเปลี่ยนแปลงสี */
            background-color: #e0f7fa; /* สีพื้นหลังของเซลล์ */
            cursor: pointer;
        }

        td.marked {
            background-color: #4CAF50; /* สีเซลล์ที่ถูกเลือก */
            color: white; /* เปลี่ยนสีตัวอักษรเมื่อเลือก */
        }

        td.disabled {
            background-color: #ddd; /* สีเซลล์ที่ยังไม่สามารถคลิก */
            cursor: not-allowed;
        }

        td.not-drawn {
            background-color: #ffcccb; /* สีสำหรับหมายเลขที่ยังไม่ออก */
        }

        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 18px;
            background-color: #4CAF50; /* สีปุ่ม */
            color: white; /* สีตัวอักษรในปุ่ม */
            border: none;
            border-radius: 5px; /* มุมโค้งของปุ่ม */
            cursor: pointer;
            transition: background-color 0.3s; /* เพิ่มการเปลี่ยนแปลงสีของปุ่ม */
        }

        button:hover {
            background-color: #45a049; /* สีของปุ่มเมื่อเอาเมาส์ไปวาง */
        }

        #bingo-status {
            color: #d32f2f; /* สีสถานะการชนะ */
            font-size: 24px;
            font-weight: bold;
        }

        #drawn-number {
            font-size: 20px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Bingo Game</h1>
    
    <div class="bingo-card" id="bingo-card-1">
        <h2>Bingo Card 1</h2>
        <table id="bingoTable1"></table>
    </div>

    <div class="bingo-card" id="bingo-card-2">
        <h2>Bingo Card 2</h2>
        <table id="bingoTable2"></table>
    </div>

    <p id="drawn-number"></p>
    <p id="bingo-status"></p>
    
    <button onclick="drawNumber()">Draw Number</button>
    <button onclick="resetGame()">Reset Game</button>

    <script>
        let bingoNumbers = [];
        let drawnNumbers = [];
        let gameOver = false;

        function generateBingoCard(cardId) {
            const bingoTable = document.getElementById(cardId);
            bingoTable.innerHTML = ''; // ลบข้อมูลเก่าในตารางก่อน

            const usedNumbers = new Set();

            for (let row = 0; row < 5; row++) {
                const tr = document.createElement('tr');
                for (let col = 0; col < 5; col++) {
                    const td = document.createElement('td');
                    if (row === 2 && col === 2) {
                        td.textContent = 'FREE';
                        td.classList.add('marked'); // ทำให้ช่องกลางถูกเลือก
                    } else {
                        let randomNumber;
                        do {
                            randomNumber = Math.floor(Math.random() * 75) + 1;
                        } while (usedNumbers.has(randomNumber));
                        usedNumbers.add(randomNumber);
                        td.textContent = randomNumber;
                    }

                    td.classList.add('disabled');

                    td.addEventListener('click', () => {
                        // เช็คว่าเกมยังไม่จบและหมายเลขถูกสุ่มแล้ว
                        if (!gameOver) {
                            if (drawnNumbers.includes(parseInt(td.textContent))) {
                                // หากหมายเลขถูกสุ่มแล้ว
                                if (!td.classList.contains('marked')) {
                                    td.classList.add('marked');
                                    checkWin();
                                }
                            } else {
                                // หากหมายเลขยังไม่ถูกสุ่มออก
                                td.classList.add('not-drawn'); // เปลี่ยนสีเมื่อหมายเลขยังไม่ออก
                                alert("This number hasn't been drawn yet!");
                            }
                        }
                    });

                    tr.appendChild(td);
                }
                bingoTable.appendChild(tr);
            }
        }

        function drawNumber() {
            if (bingoNumbers.length === 75) {
                alert('All numbers have been drawn!');
                return;
            }

            let randomNumber;
            do {
                randomNumber = Math.floor(Math.random() * 75) + 1;
            } while (bingoNumbers.includes(randomNumber));

            bingoNumbers.push(randomNumber);
            drawnNumbers.push(randomNumber);
            document.getElementById('drawn-number').textContent = 'Number drawn: ' + randomNumber;

            for (let cardId = 1; cardId <= 2; cardId++) {
                const table = document.getElementById('bingoTable' + cardId);
                for (let row = 0; row < 5; row++) {
                    for (let col = 0; col < 5; col++) {
                        const cell = table.rows[row].cells[col];
                        if (parseInt(cell.textContent) === randomNumber) {
                            cell.classList.remove('disabled');
                        }
                    }
                }
            }
        }

        function checkWin() {
            for (let cardId = 1; cardId <= 2; cardId++) {
                const table = document.getElementById('bingoTable' + cardId);
                const size = 5;
                let win = false;

                // ตรวจสอบแถว
                for (let row = 0; row < size; row++) {
                    let rowMarked = true;
                    for (let col = 0; col < size; col++) {
                        if (!table.rows[row].cells[col].classList.contains('marked')) {
                            rowMarked = false;
                            break;
                        }
                    }
                    if (rowMarked) {
                        win = true;
                        break;
                    }
                }

                // ตรวจสอบคอลัมน์
                for (let col = 0; col < size; col++) {
                    let colMarked = true;
                    for (let row = 0; row < size; row++) {
                        if (!table.rows[row].cells[col].classList.contains('marked')) {
                            colMarked = false;
                            break;
                        }
                    }
                    if (colMarked) {
                        win = true;
                        break;
                    }
                }

                // ตรวจสอบเส้นทแยงมุม
                let diag1Marked = true;
                for (let i = 0; i < size; i++) {
                    if (!table.rows[i].cells[i].classList.contains('marked')) {
                        diag1Marked = false;
                        break;
                    }
                }
                if (diag1Marked) win = true;

                let diag2Marked = true;
                for (let i = 0; i < size; i++) {
                    if (!table.rows[i].cells[size - 1 - i].classList.contains('marked')) {
                        diag2Marked = false;
                        break;
                    }
                }
                if (diag2Marked) win = true;

                if (win) {
                    document.getElementById('bingo-status').textContent = 'Bingo on Card ' + cardId + '!';
                    gameOver = true;
                }
            }
        }

        function resetGame() {
            // รีเซ็ตค่าต่าง ๆ
            bingoNumbers = [];
            drawnNumbers = [];
            gameOver = false;

            document.getElementById('bingo-status').textContent = '';
            document.getElementById('drawn-number').textContent = '';

            // สร้างบิงโกการ์ดใหม่
            generateBingoCard('bingoTable1');
            generateBingoCard('bingoTable2');
        }

        window.onload = function() {
            generateBingoCard('bingoTable1');
            generateBingoCard('bingoTable2');
        };
    </script>
</body>
</html>

You may also like...

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *