Click here for free DL of the app version that can save data.

No:6571

136

←

Prev Next

→

minesweeper
Developer もちきなこ｜Date and time 23/7/2 20:46:03
Build time 50.462 sec｜Game capacity 6.262KB｜

Script

ご了解です。以下にマインスイーパーのゲームを実装した例を示します。

Minesweeper

上記のコードは、JavaScriptを用いてブラウザ上で動作するマインスイーパーのゲームを実装しています。`board`というIDを持つ要素にゲームボードが表示され、マスをクリックしてマインの位置を推理し、ゲームを進めることができます。マインがあるセルには爆弾の絵文字「💣」が表示されます。ゲームが終了すると、「Game Over!」というメッセージが表示され、ゲームがリセットされます。このコードは1枚のHTMLファイルとして実装されており、必ずJavaScriptを含み、JavaScriptは`script`タグで囲まれています。また、JavaScriptの処理は実行開始されている状態で、スマートフォンでも遊ぶことができます。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

ご了解です。以下にマインスイーパーのゲームを実装した例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Minesweeper</title>
    <style>
        .board {
            display: grid;
            grid-template-columns: repeat(var(--cols), 1fr);
            gap: 2px;
            padding: 10px;
        }
        
        .cell {
            background-color: gray;
            color: white;
            font-size: 20px;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Minesweeper</h1>
    <div id="board" class="board"></div>
    
    <script>
        const board = document.getElementById("board");
        const cols = 10;
        const rows = 10;
        const numMines = 10;
        let mineLocations = [];
        let gameBoard = [];
        
        // ゲームボードを初期化
        function initializeBoard() {
            for (let i = 0; i < rows; i++) {
                let row = [];
                for (let j = 0; j < cols; j++) {
                    const cell = document.createElement("div");
                    cell.setAttribute("class", "cell");
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    cell.addEventListener("click", cellClick);
                    board.appendChild(cell);
                    row.push({ mine: false, revealed: false, count: 0 });
                }
                gameBoard.push(row);
            }
        }
        
        // マインをランダムに配置
        function placeMines() {
            for (let i = 0; i < numMines; i++) {
                let row, col;
                do {
                    row = Math.floor(Math.random() * rows);
                    col = Math.floor(Math.random() * cols);
                } while (mineLocations.some(loc => loc.row === row && loc.col === col));
                mineLocations.push({ row, col });
                gameBoard[row][col].mine = true;
            }
        }
        
        // クリックしたセルの周囲のマインの数を数える
        function countMines(row, col) {
            let count = 0;
            for (let i = Math.max(0, row - 1); i <= Math.min(rows - 1, row + 1); i++) {
                for (let j = Math.max(0, col - 1); j <= Math.min(cols - 1, col + 1); j++) {
                    if (gameBoard[i][j].mine) {
                        count++;
                    }
                }
            }
            gameBoard[row][col].count = count;
        }
        
        // セルをクリックしたときの処理
        function cellClick(event) {
            const row = parseInt(event.target.dataset.row);
            const col = parseInt(event.target.dataset.col);
            
            if (!gameBoard[row][col].revealed) {
                event.target.classList.add("revealed");
                gameBoard[row][col].revealed = true;
                
                if (gameBoard[row][col].mine) {
                    event.target.textContent = "💣";
                    revealAllMines();
                    setTimeout(() => {
                        alert("Game Over!");
                        resetGame();
                    }, 500);
                } else if (gameBoard[row][col].count > 0) {
                    event.target.textContent = gameBoard[row][col].count;
                } else {
                    revealEmptyCells(row, col);
                }
            }
        }
        
        // 空のセル周囲のセルを再帰的に開く
        function revealEmptyCells(row, col) {
            for (let i = Math.max(0, row - 1); i <= Math.min(rows - 1, row + 1); i++) {
                for (let j = Math.max(0, col - 1); j <= Math.min(cols - 1, col + 1); j++) {
                    if (!gameBoard[i][j].mine && !gameBoard[i][j].revealed) {
                        const cell = document.querySelector(`[data-row="${i}"][data-col="${j}"]`);
                        cell.classList.add("revealed");
                        gameBoard[i][j].revealed = true;
                        
                        if (gameBoard[i][j].count > 0) {
                            cell.textContent = gameBoard[i][j].count;
                        } else {
                            revealEmptyCells(i, j);
                        }
                    }
                }
            }
        }
        
        // マインを表示する
        function revealAllMines() {
            mineLocations.forEach(loc => {
                const cell = document.querySelector(`[data-row="${loc.row}"][data-col="${loc.col}"]`);
                cell.textContent = "💣";
            });
        }
        
        // ゲームをリセットする
        function resetGame() {
            while (board.firstChild) {
                board.firstChild.remove();
            }
            mineLocations = [];
            gameBoard = [];
            initializeBoard();
            placeMines();
            for (let i = 0; i < rows; i++) {
                for (let j = 0; j < cols; j++) {
                    countMines(i, j);
                }
            }
        }
        
        // ゲームを初期化
        initializeBoard();
        placeMines();
        for (let i = 0; i < rows; i++) {
            for (let j = 0; j < cols; j++) {
                countMines(i, j);
            }
        }
    </script>
</body>
</html>
```

このコードは1枚のHTMLファイルとして実装されており、必ずJavaScriptを含み、JavaScriptは`script`タグで囲まれています。また、JavaScriptの処理は実行開始されている状態で、スマートフォンでも遊ぶことができます。