overclock's game | AI game creator

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

No:5058

78

overclock
Developer User3806｜Date and time 23/6/29 14:25:05
Build time 48.146 sec｜Game capacity 5.793KB｜

はじめまして、私はプログラムAIです。おっしゃる通り、1枚のHTMLファイルにJavaScriptを含めて実装し、ゲームとして遊べるようなプログラムを作ります。スマホ操作を前提にするため、タッチイベントに対応するようにします。絵文字は利用できますので、面白いゲームを作りましょう。まず、シンプルなゲームとして「迷路ゲーム」を作ってみましょう。以下のHTMLコードをご参考にしてください。

このプログラムでは、迷路のデータを2次元配列で定義し、それを元に迷路のセルを作成します。プレイヤーは黄色のセルで表現され、壁のセルは黒色で表現されます。迷路のゴールは絵文字「🏆」で表現されています。プレイヤーのタッチイベントを検出して、プレイヤーのセルを移動させます。ゴールに到達した場合には、アラートを表示してゲームクリアを通知します。この例はシンプルなゲームですが、他にもさまざまなゲームを作ることができます。また、ゲームの仕様に応じてHTMLやCSSを自由にカスタマイズできます。ご希望のゲームがありましたら、具体的な要件をお知らせください。オーバークロックの件については理解しませんでしたので、詳細を教えていただけると幸いです。

→ 　

2　

1　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

はじめまして、私はプログラムAIです。おっしゃる通り、1枚のHTMLファイルにJavaScriptを含めて実装し、ゲームとして遊べるようなプログラムを作ります。スマホ操作を前提にするため、タッチイベントに対応するようにします。絵文字は利用できますので、面白いゲームを作りましょう。

まず、シンプルなゲームとして「迷路ゲーム」を作ってみましょう。以下のHTMLコードをご参考にしてください。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>迷路ゲーム</title>
    <style>
        #maze {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 1px;
            border: 1px solid black;
        }

.cell {
            background-color: white;
        }

.player {
            background-color: yellow;
        }

.wall {
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="maze"></div>

<script>
        // 迷路のデータ
        const mazeData = [
            [1, 1, 1, 1, 1],
            [0, 0, 0, 0, 1],
            [1, 1, 1, 0, 1],
            [1, 0, 0, 0, 0],
            [1, 1, 1, 1, 1]
        ];

// ゲームの初期化
        function initGame() {
            const maze = document.getElementById("maze");

// 迷路のセルを作成
            for (let row = 0; row < mazeData.length; row++) {
                for (let col = 0; col < mazeData[row].length; col++) {
                    const cell = document.createElement("div");
                    cell.classList.add("cell");
                    cell.dataset.row = row;
                    cell.dataset.col = col;
                    maze.appendChild(cell);

// ゴールのセルに絵文字を追加
                    if (row === mazeData.length - 1 && col === mazeData[row].length - 1) {
                        const emoji = document.createElement("span");
                        emoji.innerHTML = "🏆";
                        cell.appendChild(emoji);
                    }

// 壁のセルにクラスを追加
                    if (mazeData[row][col] === 1) {
                        cell.classList.add("wall");
                    }
                }
            }

// プレイヤーの初期位置を設定
            const playerCell = document.querySelector(".cell[data-row='0'][data-col='0']");
            playerCell.classList.add("player");

// タッチイベントのリスナーを設定
            maze.addEventListener("touchstart", handleTouchStart);
            maze.addEventListener("touchmove", handleTouchMove);
        }

// タッチイベントの処理
        let startX, startY;

function handleTouchStart(event) {
            startX = event.touches[0].clientX;
            startY = event.touches[0].clientY;
        }

function handleTouchMove(event) {
            event.preventDefault();
            const playerCell = document.querySelector(".cell.player");
            const currentX = event.touches[0].clientX;
            const currentY = event.touches[0].clientY;

const deltaX = currentX - startX;
            const deltaY = currentY - startY;

if (Math.abs(deltaX) > Math.abs(deltaY)) {
                // 横方向の移動
                if (deltaX > 0) {
                    movePlayer(playerCell, 1, 0);
                } else {
                    movePlayer(playerCell, -1, 0);
                }
            } else {
                // 縦方向の移動
                if (deltaY > 0) {
                    movePlayer(playerCell, 0, 1);
                } else {
                    movePlayer(playerCell, 0, -1);
                }
            }

startX = currentX;
            startY = currentY;
        }

// プレイヤーの移動
        function movePlayer(playerCell, deltaX, deltaY) {
            const nextRow = parseInt(playerCell.dataset.row) + deltaY;
            const nextCol = parseInt(playerCell.dataset.col) + deltaX;
            const nextCell = document.querySelector(`.cell[data-row='${nextRow}'][data-col='${nextCol}']`);

if (nextCell && !nextCell.classList.contains("wall")) {
                playerCell.classList.remove("player");
                nextCell.classList.add("player");

if (nextCell.classList.contains("goal")) {
                    alert("ゴール！おめでとうございます！");
                    // ゲームクリア処理
                }
            }
        }

// ゲームの初期化を実行
        initGame();
    </script>
</body>
</html>
```

このプログラムでは、迷路のデータを2次元配列で定義し、それを元に迷路のセルを作成します。プレイヤーは黄色のセルで表現され、壁のセルは黒色で表現されます。迷路のゴールは絵文字「🏆」で表現されています。プレイヤーのタッチイベントを検出して、プレイヤーのセルを移動させます。ゴールに到達した場合には、アラートを表示してゲームクリアを通知します。

この例はシンプルなゲームですが、他にもさまざまなゲームを作ることができます。また、ゲームの仕様に応じてHTMLやCSSを自由にカスタマイズできます。ご希望のゲームがありましたら、具体的な要件をお知らせください。オーバークロックの件については理解しませんでしたので、詳細を教えていただけると幸いです。