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

No:9407

174

←

Prev Next

→

chained puzzle
Developer anonymous｜Date and time 23/7/24 14:49:26
Build time 47.335 sec｜Game capacity 5.311KB｜

Script

了解しました。以下に連鎖パズルのプログラムを実装します。

連鎖パズル

以上が連鎖パズルのプログラムです。スタートボタンをクリックしてから、セルをクリックすると、それを含めた上下左右のセルが黒く塗りつぶされます。全てのセルが黒く塗りつぶされたらクリア、未塗りつぶしのセルが残った場合はゲームオーバーになります。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

了解しました。以下に連鎖パズルのプログラムを実装します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>連鎖パズル</title>
</head>
<body>
    <h1>連鎖パズル</h1>
    <div id="board">
        
    </div>
    <button onclick="startGame()">ゲームスタート</button>

// 盤面のセルの大きさ
        const CELL_SIZE = 60;

// 盤面のセルの状態
        const EMPTY = 0;  // 空のセル
        const FILLED = 1; // 塗りつぶされたセル

// 盤面のデータ
        let board = [];

// ゲームが開始されているかどうか
        let gameStarted = false;

// 初期化処理
        function init() {
            // 盤面のセルを生成
            const boardElement = document.getElementById("board");
            for (let row = 0; row < ROWS; row++) {
                for (let col = 0; col < COLS; col++) {
                    let cell = document.createElement("div");
                    cell.className = "cell";
                    cell.style.width = CELL_SIZE + "px";
                    cell.style.height = CELL_SIZE + "px";
                    boardElement.appendChild(cell);
                }
            }

// セルをクリックしたときの処理を登録
            const cells = document.getElementsByClassName("cell");
            for (let i = 0; i < cells.length; i++) {
                cells[i].addEventListener("click", function() { handleClick(i); });
            }

// 盤面をリセット
            resetBoard();
        }

// 盤面をリセットする関数
        function resetBoard() {
            // 盤面のデータを初期化
            board = new Array(ROWS * COLS).fill(EMPTY);

// 盤面を表示
            const cells = document.getElementsByClassName("cell");
            for (let i = 0; i < cells.length; i++) {
                cells[i].style.backgroundColor = "white";
            }
        }

// ゲームスタートボタンをクリックしたときの処理
        function startGame() {
            // 盤面をリセット
            resetBoard();

// ゲーム開始フラグを立てる
            gameStarted = true;
        }

// セルをクリックしたときの処理
        function handleClick(index) {
            if (!gameStarted) {
                return; // ゲームが開始されていない場合は処理を終了
            }

// クリックしたセルの上下左右のセルを塗りつぶす
            paintAdjacentCells(index);

// 盤面の状態に応じて処理を分岐
            if (isBoardFulfilled()) {
                // 盤面が全て塗りつぶされた場合はクリア
                alert("クリア！");
                resetBoard();
            } else {
                // 盤面が未塗りつぶしのセルを含む場合はゲームオーバー
                alert("ゲームオーバー");
                resetBoard();
            }
        }

// クリックしたセルの上下左右のセルを塗りつぶす関数
        function paintAdjacentCells(index) {
            const cells = document.getElementsByClassName("cell");

// クリックしたセルを塗りつぶす
            cells[index].style.backgroundColor = "black";
            board[index] = FILLED;

// クリックしたセルの位置を取得
            const row = Math.floor(index / COLS);
            const col = index % COLS;

// 上のセルを塗りつぶす
            if (row > 0 && board[index - COLS] !== FILLED) {
                cells[index - COLS].style.backgroundColor = "black";
                board[index - COLS] = FILLED;
            }

// 下のセルを塗りつぶす
            if (row < ROWS - 1 && board[index + COLS] !== FILLED) {
                cells[index + COLS].style.backgroundColor = "black";
                board[index + COLS] = FILLED;
            }

// 左のセルを塗りつぶす
            if (col > 0 && board[index - 1] !== FILLED) {
                cells[index - 1].style.backgroundColor = "black";
                board[index - 1] = FILLED;
            }

// 右のセルを塗りつぶす
            if (col < COLS - 1 && board[index + 1] !== FILLED) {
                cells[index + 1].style.backgroundColor = "black";
                board[index + 1] = FILLED;
            }
        }

// 盤面が全て塗りつぶされているかどうかを判定する関数
        function isBoardFulfilled() {
            return board.every(cell => cell === FILLED);
        }

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