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

No:5236

3345

←

Prev Next

→

Minesweeper! There are no mines.
Developer User3589｜Date and time 23/6/29 20:30:55
Build time 65.306 sec｜Game capacity 7.474KB｜

Script

了解しました。機雷掃海艇というゲームを作成してみます。以下がHTMLファイルのコードです。

機雷掃海艇

このHTMLファイルをブラウザで開くと、機雷掃海艇というゲームがプレイできます。ユーザーがクリックすることでセルを開き、機雷に当たるとゲームオーバーになります。隣接するセルにはいくつの機雷があるかが表示されます。ただし、絵文字を使用するにはブラウザやテキストエディタの環境によって表示が異なる場合があるので、表示が崩れる可能性があります。その場合は別の絵文字を使用するか、文字列での表示に切り替えるなどの対応が必要です。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

了解しました。機雷掃海艇というゲームを作成してみます。

以下がHTMLファイルのコードです。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>機雷掃海艇</title>
    <style>
        body {
            text-align: center;
        }
        #gameboard {
            display: inline-block;
        }
        .cell {
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 1px solid black;
            font-size: 20px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <h1>機雷掃海艇</h1>
    <div id="gameboard"></div>

// ゲームボードの状態を保持する配列
        let board = [];

// 機雷の位置を保持する配列
        let mines = [];

// ゲームボードの描画
        function drawBoard() {
            const gameboardElement = document.getElementById("gameboard");
            gameboardElement.innerHTML = "";

for (let row = 0; row < numRows; row++) {
                for (let col = 0; col < numCols; col++) {
                    const cell = document.createElement("div");
                    cell.classList.add("cell");
                    cell.dataset.row = row;
                    cell.dataset.col = col;
                    cell.addEventListener("click", cellClickHandler);
                    gameboardElement.appendChild(cell);
                }
                gameboardElement.appendChild(document.createElement("br"));
            }
        }

// 機雷を設置する
        function placeMines() {
            for (let i = 0; i < numMines; i++) {
                let row, col;
                do {
                    row = Math.floor(Math.random() * numRows);
                    col = Math.floor(Math.random() * numCols);
                } while (board[row][col].hasMine);

board[row][col].hasMine = true;
                mines.push({ row, col });
            }
        }

// 指定したセルの周囲の機雷の数を取得
        function getNumSurroundingMines(row, col) {
            let count = 0;

for (let dr = -1; dr <= 1; dr++) {
                for (let dc = -1; dc <= 1; dc++) {
                    if (dr === 0 && dc === 0) continue;

const newRow = row + dr;
                    const newCol = col + dc;

if (newRow >= 0 && newRow < numRows && newCol >= 0 && newCol < numCols && board[newRow][newCol].hasMine) {
                        count++;
                    }
                }
            }

return count;
        }

// ゲームの初期化
        function initializeGame() {
            board = [];

// 初期状態は全てのセルが表示されている状態とする
            for (let row = 0; row < numRows; row++) {
                const rowData = [];
                for (let col = 0; col < numCols; col++) {
                    rowData.push({
                        hasMine: false,
                        isHidden: false,
                        numSurroundingMines: 0
                    });
                }
                board.push(rowData);
            }

mines = [];
            placeMines();

// 周囲の機雷の数を計算
            for (let row = 0; row < numRows; row++) {
                for (let col = 0; col < numCols; col++) {
                    if (!board[row][col].hasMine) {
                        board[row][col].numSurroundingMines = getNumSurroundingMines(row, col);
                    }
                }
            }

drawBoard();
        }

// セルがクリックされた時の処理
        function cellClickHandler(event) {
            const clickedCell = event.target;
            const row = parseInt(clickedCell.dataset.row, 10);
            const col = parseInt(clickedCell.dataset.col, 10);
            const cellData = board[row][col];

if (cellData.hasMine) {
                // ゲームオーバーの処理
                gameOver();
            } else if (!cellData.isHidden) {
                // 既にクリックされたセルは無視する
                return;
            } else {
                // クリックされたセルの情報を更新
                cellData.isHidden = false;
                clickedCell.classList.remove("cell");
                clickedCell.classList.add("revealed-cell");

if (cellData.numSurroundingMines === 0) {
                    // クリックされたセルの周囲のセルを再帰的に開く
                    revealSurroundingCells(row, col);
                }
            }
        }

// 周囲のセルを再帰的に開く
        function revealSurroundingCells(row, col) {
            for (let dr = -1; dr <= 1; dr++) {
                for (let dc = -1; dc <= 1; dc++) {
                    if (dr === 0 && dc === 0) continue;

const newRow = row + dr;
                    const newCol = col + dc;

if (newRow >= 0 && newRow < numRows && newCol >= 0 && newCol < numCols) {
                        const cell = document.querySelector(`[data-row="${newRow}"][data-col="${newCol}"]`);
                        const cellData = board[newRow][newCol];

if (!cellData.isHidden) continue;

cellData.isHidden = false;
                        cell.classList.remove("cell");
                        cell.classList.add("revealed-cell");

if (cellData.numSurroundingMines === 0) {
                            revealSurroundingCells(newRow, newCol);
                        }
                    }
                }
            }
        }

// ゲームオーバーの処理
        function gameOver() {
            // 全てのセルを表示する
            for (let row = 0; row < numRows; row++) {
                for (let col = 0; col < numCols; col++) {
                    const cell = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
                    const cellData = board[row][col];

if (cellData.hasMine) {
                        cell.innerHTML = "💣";
                        cell.classList.remove("cell");
                        cell.classList.add("revealed-cell");
                    } else {
                        cell.innerHTML = cellData.numSurroundingMines;
                    }
                }
            }

alert("ゲームオーバー！");
        }

// ゲームの初期化
        initializeGame();
    </script>
</body>
</html>
```

このHTMLファイルをブラウザで開くと、機雷掃海艇というゲームがプレイできます。ユーザーがクリックすることでセルを開き、機雷に当たるとゲームオーバーになります。隣接するセルにはいくつの機雷があるかが表示されます。

ただし、絵文字を使用するにはブラウザやテキストエディタの環境によって表示が異なる場合があるので、表示が崩れる可能性があります。その場合は別の絵文字を使用するか、文字列での表示に切り替えるなどの対応が必要です。