AI game creator

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

No:39852

←

Prev Next

→

パックマン
Developer User17843｜Date and time 24/1/30 17:08:52
Build time 19.951 sec｜Game capacity 4.917KB｜

Script

了解しました。以下に、スマホで遊べるパックマンの実装例を示します。

このコードは、10x10のゲームボード上でスマホのキーボード操作でパックマンを動かすシンプルなゲームです。パックマンは黄色で表示され、壁は青、コインは金色で表示されます。キーボードの矢印キーでパックマンを動かすことができます。スマホで表示して操作することで、遊ぶことができます。ただし、モバイルデバイス向けの矢印キーなどの表示や操作方法の実装は省略していますので、実際のスマホ向けアプリのような体験にするには、さらなる実装が必要になります。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解しました。以下に、スマホで遊べるパックマンの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pacman</title>
    <style>
        #game-board {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

.cell {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            text-align: center;
            font-size: 24px;
        }

.cell.pacman {
            background-color: yellow;
        }

.cell.wall {
            background-color: blue;
        }

.cell.coin {
            background-color: gold;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// ゲームボードの描画
        const gameBoardElement = document.getElementById("game-board");
        for (let y = 0; y < boardSize; y++) {
            for (let x = 0; x < boardSize; x++) {
                const cellElement = document.createElement("div");
                cellElement.classList.add("cell");

if (pacmanStartPosition.x === x && pacmanStartPosition.y === y) {
                    cellElement.classList.add("pacman");
                } else if (wallPositions.some(wallPos => wallPos.x === x && wallPos.y === y)) {
                    cellElement.classList.add("wall");
                } else if (coinPositions.some(coinPos => coinPos.x === x && coinPos.y === y)) {
                    cellElement.classList.add("coin");
                }
                
                gameBoardElement.appendChild(cellElement);
            }
        }

// パックマンの操作
        window.addEventListener("keydown", (event) => {
            const pacmanElement = document.querySelector(".pacman");
            const pacmanPosX = pacmanStartPosition.x;
            const pacmanPosY = pacmanStartPosition.y;

if (event.key === "ArrowUp") {
                const nextPosY = pacmanPosY - 1;
                if (nextPosY >= 0 && !wallPositions.some(wallPos => wallPos.x === pacmanPosX && wallPos.y === nextPosY)) {
                    pacmanElement.classList.remove("pacman");
                    pacmanStartPosition.y = nextPosY;
                    gameBoardElement.children[nextPosY * boardSize + pacmanPosX].classList.add("pacman");
                }
            } else if (event.key === "ArrowDown") {
                const nextPosY = pacmanPosY + 1;
                if (nextPosY < boardSize && !wallPositions.some(wallPos => wallPos.x === pacmanPosX && wallPos.y === nextPosY)) {
                    pacmanElement.classList.remove("pacman");
                    pacmanStartPosition.y = nextPosY;
                    gameBoardElement.children[nextPosY * boardSize + pacmanPosX].classList.add("pacman");
                }
            } else if (event.key === "ArrowLeft") {
                const nextPosX = pacmanPosX - 1;
                if (nextPosX >= 0 && !wallPositions.some(wallPos => wallPos.x === nextPosX && wallPos.y === pacmanPosY)) {
                    pacmanElement.classList.remove("pacman");
                    pacmanStartPosition.x = nextPosX;
                    gameBoardElement.children[pacmanPosY * boardSize + nextPosX].classList.add("pacman");
                }
            } else if (event.key === "ArrowRight") {
                const nextPosX = pacmanPosX + 1;
                if (nextPosX < boardSize && !wallPositions.some(wallPos => wallPos.x === nextPosX && wallPos.y === pacmanPosY)) {
                    pacmanElement.classList.remove("pacman");
                    pacmanStartPosition.x = nextPosX;
                    gameBoardElement.children[pacmanPosY * boardSize + nextPosX].classList.add("pacman");
                }
            }
        });
    </script>
</body>
</html>
```

このコードは、10x10のゲームボード上でスマホのキーボード操作でパックマンを動かすシンプルなゲームです。パックマンは黄色で表示され、壁は青、コインは金色で表示されます。キーボードの矢印キーでパックマンを動かすことができます。

スマホで表示して操作することで、遊ぶことができます。ただし、モバイルデバイス向けの矢印キーなどの表示や操作方法の実装は省略していますので、実際のスマホ向けアプリのような体験にするには、さらなる実装が必要になります。