เกม Minesweeper

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

Minesweeper เป็นเกมที่มีต้นกำเนิดในยุค 1980s โดยเริ่มต้นจากเกมกระดาษก่อนที่จะถูกพัฒนาเป็นเกมคอมพิวเตอร์ มีชื่อเสียงมากในช่วงที่ Windows 3.1 เปิดตัวและเป็นหนึ่งในเกมที่มาพร้อมกับระบบปฏิบัติการ Windows โดยเกมนี้มีรากฐานมาจากแนวเกมที่เรียกว่า “grid-based puzzle” ซึ่งเน้นการใช้ตรรกะและการคาดเดาต่อมาได้พัฒนาจนกลายเป็นเกมที่เรารู้จักในปัจจุบัน

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

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

3. ขอบเขต

1.เกม Minesweeper มักมีขนาดกระดานที่แตกต่างกัน เช่น 8×8, 10×10 หรือ 16×16 และมีจำนวนเหมืองที่แตกต่างกัน ขอบเขตของเกมยังรวมถึงกฎการเปิดเซลล์และการจัดการกับการเปิดเผยเซลล์ที่มีจำนวนเหมืองรอบข้าง

2.ใช้ภาษา HTML, CSS, และ JavaScript ในการพัฒนา เกมมีปุ่มสำหรับเริ่มเล่นใหม่เมื่อเล่นแพ้

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

1.พัฒนาทักษะการคิดเชิงกลยุทธ์: เกมช่วยฝึกการวิเคราะห์และวางแผน

2.เสริมสร้างสมาธิ: ผู้เล่นต้องให้ความสนใจเพื่อหลีกเลี่ยงการแพ้

3.ความสนุกสนาน: เกมเป็นวิธีการผ่อนคลายและความบันเทิง

4. พัฒนาทักษะการเขียนโปรแกรมพื้นฐาน และความสามารถในการใช้ CSS เพื่อการแสดงผลที่สวยงาม

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

1.คณิตศาสตร์: การนับจำนวนเหมืองรอบข้าง

2.ตรรกศาสตร์: การวิเคราะห์สถานการณ์และทำการตัดสินใจ

3.โปรแกรมมิ่ง: การพัฒนาเกมโดยใช้ภาษา JavaScript, HTML และ CSS

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

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

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

1.เริ่มเกมโดยเปิดโปรแกรม

2.คลิกเซลล์เพื่อเปิดเผย

3.ใช้ข้อมูลที่เปิดเผยเพื่อวางแผนกลยุทธ์ในการเปิดเซลล์

8. การทดลอง

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

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

1.การใช้กลยุทธ์การเปิดเผยเซลล์: ใช้ข้อมูลที่เปิดเผยมาอย่างชาญฉลาด

2.การจำตำแหน่งที่เคยเปิด: บันทึกตำแหน่งเพื่อไม่ให้ทำผิดซ้ำ

3.เพิ่มระบบจัดอันดับ บันทึกคะแนนหรือเวลาที่ใช้ในการเล่นและแสดงคะแนนสูงสุด (High Scores) เพื่อเพิ่มความสนุกและการท้าทายให้กับผู้เล่น

4.เพิ่มระดับความยากสามารถเพิ่มฟีเจอร์ให้ผู้เล่นเลือกระดับความยากของเกมได้ เช่น Easy, Medium, และ Hard โดยการเปลี่ยนขนาดบอร์ดและจำนวนระเบิดตามระดับความยาก

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

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

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

  • เกม Minesweeper (Wikipedia)
  • เอกสารทางเทคนิคเกี่ยวกับการพัฒนาเกม
  • บทความเกี่ยวกับกลยุทธ์การเล่น Minesweeper

Code Game

Code ไฟล์ index.html

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minesweeper</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Minesweeper</h1>
    <div id="game"></div>
    <script src="script.js"></script>
</body>
</html>

Code ไฟล์ script.js

const rows = 10;
const cols = 10;
const mines = 10;

let board = [];
let revealed = 0;

function createBoard() {
    for (let i = 0; i < rows; i++) {
        board[i] = [];
        for (let j = 0; j < cols; j++) {
            board[i][j] = {
                isMine: false,
                isRevealed: false,
                adjacentMines: 0
            };
        }
    }

    for (let i = 0; i < mines; i++) {
        let x, y;
        do {
            x = Math.floor(Math.random() * rows);
            y = Math.floor(Math.random() * cols);
        } while (board[x][y].isMine);
        board[x][y].isMine = true;
    }

    for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
            if (board[i][j].isMine) {
                continue;
            }
            let count = 0;
            for (let x = -1; x <= 1; x++) {
                for (let y = -1; y <= 1; y++) {
                    const newX = i + x;
                    const newY = j + y;
                    if (newX >= 0 && newX < rows && newY >= 0 && newY < cols && board[newX][newY].isMine) {
                        count++;
                    }
                }
            }
            board[i][j].adjacentMines = count;
        }
    }
}

function renderBoard() {
    const gameDiv = document.getElementById("game");
    gameDiv.innerHTML = '';

    for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
            const cell = document.createElement('div');
            cell.className = 'cell';
            cell.addEventListener('click', () => revealCell(i, j));
            gameDiv.appendChild(cell);
        }
    }
}

function revealCell(i, j) {
    if (board[i][j].isRevealed) return;

    board[i][j].isRevealed = true;
    revealed++;

    const cell = document.querySelectorAll('.cell')[i * cols + j];
    cell.classList.add('revealed');

    if (board[i][j].isMine) {
        cell.classList.add('mine');
        cell.textContent = '💣';
        alert("Game Over!");
        return;
    }

    if (board[i][j].adjacentMines > 0) {
        cell.textContent = board[i][j].adjacentMines;
        cell.setAttribute('data-adjacent', board[i][j].adjacentMines);
    } else {
        for (let x = -1; x <= 1; x++) {
            for (let y = -1; y <= 1; y++) {
                const newX = i + x;
                const newY = j + y;
                if (newX >= 0 && newX < rows && newY >= 0 && newY < cols) {
                    revealCell(newX, newY);
                }
            }
        }
    }
}

createBoard();
renderBoard();

Code ไฟล์ style..css

body {
    font-family: Arial, sans-serif;
    background-color: #2ee972; 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}


h1 {
color: #333;
}

#game {
display: grid;
grid-template-columns: repeat(10, 40px);
gap: 2px;
    background-color: rgba(226, 26, 26, 0.8); /* พื้นหลังโปร่งใส */
    border-radius: 10px; /* ทำให้มุมมน */
    padding: 10px; /* เพิ่ม padding */
    box-shadow: 0 4px 20px rgba(224, 240, 6, 0.973); /* เพิ่มเงา */
    }
    
.cell {
width: 40px;
height: 40px;
background-color: #d3d3d3;
border: 1px solid #999;
text-align: center;
line-height: 40px;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
}

.cell:hover {
background-color: #0edae9;
transform: scale(1.05);
}

.cell.revealed {
background-color: #e9e65d;
}

.cell.mine {
background-color: #ff6961; 
color: white;
}

.cell[data-adjacent] {
font-weight: bold;
}

.cell[data-adjacent="1"] {
color: blue;
}

.cell[data-adjacent="2"] {
color: green;
}

.cell[data-adjacent="3"] {
color: red;
}

.cell[data-adjacent="4"] {
color: darkblue;
}

.cell[data-adjacent="5"] {
color: rgba(219, 18, 176, 0.856);
}

.cell[data-adjacent="6"] {
color: teal;
}

.cell[data-adjacent="7"] {
color: black;
}

.cell[data-adjacent="8"] {
color: rgb(201, 223, 9);
}

วิดีโออธิบายโค้ดเกม Minesweeper

You may also like...

ใส่ความเห็น

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