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

No:20661

←

Prev Next

→

パズルゲーム簡単
Developer User9120｜Date and time 23/10/10 15:01:21
Build time 31.002 sec｜Game capacity 4.276KB｜

Script

了解です。以下に簡単なパズルゲームの実装例を記述します。

パズルゲーム

このコードは、3x3のパズルゲームを実装しています。各セルをクリックすると、空きセルとの位置関係からセルを移動し、揃えることを目指します。ゲームクリアすると、「ゲームクリア！」というアラートが表示され、ゲームが再開されます。ご参考までにお使いください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

了解です。以下に簡単なパズルゲームの実装例を記述します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>パズルゲーム</title>
    <style>
        .game-container {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
            border: 3px solid black;
            margin: 20px auto;
        }
        .game-cell {
            width: 33.33%;
            height: 33.33%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>パズルゲーム</h1>
    <div class="game-container">
        <div class="game-cell" onclick="move(1)"></div>
        <div class="game-cell" onclick="move(2)"></div>
        <div class="game-cell" onclick="move(3)"></div>
        <div class="game-cell" onclick="move(4)"></div>
        <div class="game-cell" onclick="move(5)"></div>
        <div class="game-cell" onclick="move(6)"></div>
        <div class="game-cell" onclick="move(7)"></div>
        <div class="game-cell" onclick="move(8)"></div>
        <div class="game-cell" onclick="move(9)"></div>
    </div>
    <script>
        // ゲームの状態を表す配列
        const gameBoard = ["1", "2", "3", "4", "5", "6", "7", "8", " "];
        let emptyCellIndex = 8; // 空きセルの位置（初期値は9）
    
        // ゲームの初期化
        function init() {
            shuffle();
            updateBoard();
        }
    
        // ゲームボードの表示を更新する
        function updateBoard() {
            const cells = document.getElementsByClassName("game-cell");
            for (let i = 0; i < gameBoard.length; i++) {
                cells[i].innerText = gameBoard[i];
            }
        }
    
        // ゲームボードをシャッフルする
        function shuffle() {
            for (let i = gameBoard.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [gameBoard[i], gameBoard[j]] = [gameBoard[j], gameBoard[i]];
            }
            emptyCellIndex = gameBoard.indexOf(" ");
        }
    
        // ゲームの状態を判定する
        function checkWin() {
            const winPattern = ["1", "2", "3", "4", "5", "6", "7", "8", " "];
            return gameBoard.join("") === winPattern.join("");
        }
    
        // 素のままの配列では比較できないため、配列の値を一つずつ比較する関数を定義
        function arraysMatch(arr1, arr2) {
            for (let i = 0; i < arr1.length; i++) {
                if (arr1[i] !== arr2[i]) return false;
            }
            return true;
        }
    
        // ゲームを再開する
        function restart() {
            shuffle();
            updateBoard();
        }
    
        // セルを移動する
        function move(index) {
            // 空きセルと移動先セルの位置情報を取得
            const targetCellIndex = index - 1;
    
            // 移動方向と位置関係を判定
            const moveDiff = targetCellIndex - emptyCellIndex;
            const isAdjacent = (moveDiff === 1 && emptyCellIndex % 3 !== 2) || (moveDiff === -1 && emptyCellIndex % 3 !== 0) || Math.abs(moveDiff) === 3;
    
            // 移動処理
            if (isAdjacent) {
                [gameBoard[emptyCellIndex], gameBoard[targetCellIndex]] = [gameBoard[targetCellIndex], gameBoard[emptyCellIndex]];
                emptyCellIndex = targetCellIndex;
                updateBoard();
    
                if (checkWin()) {
                    alert("ゲームクリア！");
                    restart();
                }
            }
        }
    
        // ゲームの初期化
        init();
    </script>
</body>
</html>
```

このコードは、3x3のパズルゲームを実装しています。各セルをクリックすると、空きセルとの位置関係からセルを移動し、揃えることを目指します。ゲームクリアすると、「ゲームクリア！」というアラートが表示され、ゲームが再開されます。

ご参考までにお使いください。