AI game creator

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

No:10585

←

Prev Next

→

puzzle
Developer User4376｜Date and time 23/8/1 6:45:23
Build time 22.649 sec｜Game capacity 3.694KB｜

Script

了解しました。以下に、スマートフォンで遊べるパズルゲームの例を示します。

このプログラムは、数値のパズルゲームです。サイズが3の場合、1から8までの数値が1マスずつ並ぶパズルが生成されます。空白の位置として用意されている最後のマスをタップすることで、そのマスと隣接する数値のマスを入れ替えることができます。全ての数値が1から8の順に並べられればゲームクリアとなり、アラートが表示されます。お好みでデザインやルールを変更して遊びやすいゲームにカスタマイズしてください。

←

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>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #e9ecef;
        }

#container {
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 5px;
        }

.cell {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            background-color: #dee2e6;
        }

.selected {
            background-color: #aed9e0;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        // パズルのサイズ
        const size = 3;
        // 空白の位置
        let blankIndex = size * size - 1;
        // セルの配列
        const cells = [];

// 初期化
        function initialize() {
            for (let i = 0; i < size * size; i++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.textContent = i + 1;
                cells.push(cell);
                document.getElementById('container').appendChild(cell);
            }
            // 最後のセルを空白にする
            cells[blankIndex].textContent = '';
            cells[blankIndex].classList.add('selected');
        }

// クリックイベントの登録
        function registerClickEvent() {
            cells.forEach((cell, index) => {
                cell.addEventListener('click', () => {
                    // 空白との距離が1の場合、入れ替えを実行
                    if (Math.abs(index - blankIndex) === 1 || Math.abs(index - blankIndex) === size) {
                        swapCells(index);
                        checkComplete();
                    }
                });
            });
        }

// セルの入れ替え
        function swapCells(index) {
            cells[blankIndex].textContent = cells[index].textContent;
            cells[blankIndex].classList.remove('selected');
            cells[index].textContent = '';
            cells[index].classList.add('selected');
            blankIndex = index;
        }

// ゲームの完了判定
        function checkComplete() {
            let complete = true;
            for (let i = 0; i < size * size - 1; i++) {
                if (parseInt(cells[i].textContent) !== i + 1) {
                    complete = false;
                    break;
                }
            }
            if (complete) {
                cells[blankIndex].textContent = size * size;
                cells[blankIndex].classList.remove('selected');
                alert('ゲームクリア！');
            }
        }

initialize();
        registerClickEvent();
    </script>
</body>
</html>
```

お好みでデザインやルールを変更して遊びやすいゲームにカスタマイズしてください。