drawing tool's game | AI game creator

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

No:4340

1737

drawing tool
Developer User3771｜Date and time 23/6/27 20:13:05
Build time 59.215 sec｜Game capacity 5.881KB｜

で作った絵を参考にしてもOKです。ただし、著作権に注意してください。わかりました。私はスマホで遊べるシンプルな迷路ゲームを作ります。HTMLファイルにJavaScriptを含め、scriptタグで囲んで実装します。以下が実際のプログラムです。

ゲーム開始！

このプログラムは、10x10の迷路データからHTMLを生成し、スマホのジャイロセンサーで操作可能な迷路ゲームを実現しています。スタート位置は常に左上にあり、ゴールは右下です。黒いセルは壁、緑のセルはスタート、赤いセルはゴール、白いセルは通路を表します。また、キャラクターはオレンジ色で表現されます。スマホを傾けることで、キャラクターを操作して迷路を進み、ゴールを目指してください。ゴールした場合は「ゴール！」と表示され、ゲームクリアとなります。迷路の外に出ようとした場合や、壁にぶつかった場合は「ゲームオーバー...」と表示され、3秒後に自動的にリロードされます。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

で作った絵を参考にしてもOKです。ただし、著作権に注意してください。

わかりました。私はスマホで遊べるシンプルな迷路ゲームを作ります。HTMLファイルにJavaScriptを含め、scriptタグで囲んで実装します。以下が実際のプログラムです。

```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>迷路ゲーム</title>
    <style>
        /* 迷路のスタイル */
        #maze {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 5px solid black;
        }
        .cell {
            width: 20%;
            height: 20%;
            background: white;
            border: 1px solid black;
        }
        #start {
            background: #00FF00;
        }
        #goal {
            background: #FF0000;
        }
        /* ゲーム中の文言 */
        #message {
            text-align: center;
            font-size: 24px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="maze"></div>
    <div id="message">ゲーム開始！</div>
    <script>
        // 迷路のデータ
        const mazeData = [
            [0, 1, 0, 0, 0, 1, 0, 0, 0, 1],
            [0, 1, 0, 1, 0, 0, 0, 1, 0, 1],
            [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
            [0, 0, 0, 0, 0, 1, 0, 1, 0, 1],
            [1, 1, 1, 1, 0, 0, 0, 1, 0, 0],
            [0, 0, 0, 0, 0, 1, 0, 1, 0, 1],
            [1, 1, 1, 1, 0, 0, 0, 1, 0, 1],
            [0, 0, 0, 1, 0, 1, 0, 1, 0, 1],
            [0, 1, 0, 1, 0, 0, 0, 0, 0, 1],
            [0, 1, 0, 0, 0, 1, 1, 1, 0, 2]
        ];

// ゲームの状態
        let currentX = 0;
        let currentY = 0;
        let isPlaying = true;

// 迷路を表すHTMLを生成する関数
        function generateMaze() {
            const mazeElement = document.getElementById("maze");
            for (let row of mazeData) {
                for (let cellData of row) {
                    const cellElement = document.createElement("div");
                    cellElement.classList.add("cell");
                    if (cellData === 1) {
                        cellElement.style.background = "black";
                    } else if (cellData === 2) {
                        cellElement.id = "goal";
                    }
                    mazeElement.appendChild(cellElement);
                }
            }
            // スタート位置を設定する
            const startCell = mazeElement.children[0];
            startCell.id = "start";
        }

// ゲームオーバー処理
        function gameOver() {
            isPlaying = false;
            const messageElement = document.getElementById("message");
            messageElement.textContent = "ゲームオーバー...";
            setTimeout(function() {
                location.reload();
            }, 3000);
        }

// ゴール処理
        function goal() {
            isPlaying = false;
            const messageElement = document.getElementById("message");
            messageElement.textContent = "ゴール！";
        }

// キャラクターの移動処理
        function move(dx, dy) {
            if (!isPlaying) {
                return;
            }
            const mazeElement = document.getElementById("maze");
            const currentCell = mazeElement.children[currentY * 10 + currentX];
            const nextX = currentX + dx;
            const nextY = currentY + dy;
            if (nextX < 0 || nextX > 9 || nextY < 0 || nextY > 9) {
                // 範囲外に移動しようとした場合はゲームオーバー
                gameOver();
                return;
            }
            const nextCell = mazeElement.children[nextY * 10 + nextX];
            if (nextCell.style.background === "black") {
                // 壁にぶつかった場合は何もしない
                return;
            }
            if (nextCell.id === "goal") {
                // ゴールした場合はゴール処理を実行
                goal();
                return;
            }
            currentCell.style.background = "white";
            currentX = nextX;
            currentY = nextY;
            nextCell.style.background = "orange";
        }

// スマホのジャイロセンサーでの操作処理
        window.addEventListener("deviceorientation", function(event) {
            if (!isPlaying) {
                return;
            }
            if (event.gamma < -30) {
                move(-1, 0); // 左に移動
            } else if (event.gamma > 30) {
                move(1, 0); // 右に移動
            }
            if (event.beta < -30) {
                move(0, -1); // 上に移動
            } else if (event.beta > 30) {
                move(0, 1); // 下に移動
            }
        });

// ゲーム開始
        generateMaze();
    </script>
</body>
</html>
```

このプログラムは、10x10の迷路データからHTMLを生成し、スマホのジャイロセンサーで操作可能な迷路ゲームを実現しています。スタート位置は常に左上にあり、ゴールは右下です。黒いセルは壁、緑のセルはスタート、赤いセルはゴール、白いセルは通路を表します。また、キャラクターはオレンジ色で表現されます。スマホを傾けることで、キャラクターを操作して迷路を進み、ゴールを目指してください。ゴールした場合は「ゴール！」と表示され、ゲームクリアとなります。迷路の外に出ようとした場合や、壁にぶつかった場合は「ゲームオーバー...」と表示され、3秒後に自動的にリロードされます。