procedural generation's game

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

No:8015

1154

←

Prev Next

→

procedural generation
Developer User3840｜Date and time 23/7/11 23:49:21
Build time 27.377 sec｜Game capacity 4.558KB｜

Script

了解です。以下に、プロシージャル生成を利用したゲームの実装例を示します。このゲームでは、ランダムな迷路を生成し、プレーヤーがキャラクターを操作してゴールを目指すことになります。あ

このコードでは、プレーヤーの操作によりキャラクターが上下左右に移動します。黒い部分が通れない壁、黄色い部分がプレーヤー、緑色の部分がゴールです。ゲームはゴールに到達するとアラートが表示され、ページがリロードされることで再度ゲームをプレイできます。プロシージャル生成によってランダムな迷路が生成されるため、何度でも遊ぶことができます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、プロシージャル生成を利用したゲームの実装例を示します。このゲームでは、ランダムな迷路を生成し、プレーヤーがキャラクターを操作してゴールを目指すことになります。
あ
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>プロシージャル生成ゲーム</title>
    <style>
        .cell {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            display: inline-block;
        }
        .player {
            background-color: yellow;
position:absolute;
        }
        .goal {
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="maze"></div>
    <script>
        // 迷路のサイズ
        const mazeWidth = 10;
        const mazeHeight = 10;
        
        // 迷路を描画する関数
        function drawMaze(maze) {
            const mazeElement = document.getElementById("maze");
            mazeElement.innerHTML = "";
            for (let y = 0; y < mazeHeight; y++) {
                for (let x = 0; x < mazeWidth; x++) {
                    const cell = document.createElement("div");
                    cell.className = "cell";
                    if (maze[y][x] === 1) {
                        cell.style.backgroundColor = "black";
                    } else if (maze[y][x] === 2) {
                        cell.className += " player";
                    } else if (maze[y][x] === 3) {
                        cell.className += " goal";
                    }
                    mazeElement.appendChild(cell);
                }
                mazeElement.appendChild(document.createElement("br"));
            }
        }
        
        // キー入力に応じてキャラクターを移動する関数
        function movePlayer(event) {
            const key = event.key;
            const playerY = playerPosition[0];
            const playerX = playerPosition[1];
        
            let newY = playerY;
            let newX = playerX;
            if (key === "ArrowUp" && playerY > 0 && maze[playerY - 1][playerX] !== 1) {
                newY--;
            } else if (key === "ArrowDown" && playerY < mazeHeight - 1 && maze[playerY + 1][playerX] !== 1) {
                newY++;
            } else if (key === "ArrowLeft" && playerX > 0 && maze[playerY][playerX - 1] !== 1) {
                newX--;
            } else if (key === "ArrowRight" && playerX < mazeWidth - 1 && maze[playerY][playerX + 1] !== 1) {
                newX++;
            }
        
            if (newY !== playerY || newX !== playerX) {
                maze[playerY][playerX] = 0;
                if (maze[newY][newX] === 3) {
                    alert("ゴール！");
                    location.reload();
                }
                maze[newY][newX] = 2;
                playerPosition[0] = newY;
                playerPosition[1] = newX;
                drawMaze(maze);
            }
        }
        
        // プロシージャル生成による迷路の生成
        const maze = [];
        for (let y = 0; y < mazeHeight; y++) {
            const row = [];
            for (let x = 0; x < mazeWidth; x++) {
                row.push(1);
            }
            maze.push(row);
        }
        
        const startX = Math.floor(Math.random() * mazeWidth);
        const startY = Math.floor(Math.random() * mazeHeight);
        maze[startY][startX] = 2;
        const goalX = Math.floor(Math.random() * mazeWidth);
        const goalY = Math.floor(Math.random() * mazeHeight);
        maze[goalY][goalX] = 3;
        
        const playerPosition = [startY, startX];
        drawMaze(maze);
        
        // キー操作時にキャラクターを移動させるイベントリスナーを追加
        document.addEventListener("keydown", movePlayer);
    </script>
</body>
</html>
```

このコードでは、プレーヤーの操作によりキャラクターが上下左右に移動します。黒い部分が通れない壁、黄色い部分がプレーヤー、緑色の部分がゴールです。ゲームはゴールに到達するとアラートが表示され、ページがリロードされることで再度ゲームをプレイできます。

プロシージャル生成によってランダムな迷路が生成されるため、何度でも遊ぶことができます。