スマホでも動く3D迷路のスクリーンセーバー's game

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

No:20693

←

Prev Next

→

スマホでも動く3D迷路のスクリーンセーバー
Developer User9126｜Date and time 23/10/10 18:38:28
Build time 38.413 sec｜Game capacity 5.775KB｜

Script

了解です。以下にスマートフォンでも動作する3D迷路のスクリーンセーバーの実装例を示します。

このコードは、`createMaze`関数でランダムな幅と高さの迷路を作成し、`generateMaze`関数でプレイヤーキャラクターの初期位置を設定すると同時に迷路を生成します。`drawMaze`関数で迷路とプレイヤーキャラクターを描画し、`movePlayer`関数でプレイヤーキャラクターの移動を制御します。`mousedown`イベントでスマートフォンのタッチ操作を受け付け、プレイヤーキャラクターの移動方向を決定します。このコードを1枚のHTMLファイルとして保存し、スマートフォンのウェブブラウザで開くことで、3D迷路のスクリーンセーバーとして遊ぶことができます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にスマートフォンでも動作する3D迷路のスクリーンセーバーの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        canvas {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="mazeCanvas"></canvas>
    <script>
        const canvas = document.getElementById('mazeCanvas');
        const context = canvas.getContext('2d');

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

const size = Math.min(canvas.width, canvas.height);
        const rows = 20;
        const cols = 20;
        const cellSize = size / Math.max(rows, cols);

let maze = createMaze(rows, cols);
        let player = { x: 0, y: 0 };

generateMaze(maze, player);

function createMaze(rows, cols) {
            const maze = [];

for (let i = 0; i < rows; i++) {
                const row = [];

for (let j = 0; j < cols; j++) {
                    row.push(true);
                }

maze.push(row);
            }

return maze;
        }

function generateMaze(maze, player) {
            const stack = [];

player.x = Math.floor(Math.random() * cols);
            player.y = Math.floor(Math.random() * rows);
            maze[player.y][player.x] = false;

stack.push(player);

while (stack.length > 0) {
                const current = stack.pop();
                const { x, y } = current;
                const neighbors = getNeighbors(current);

if (neighbors.length > 0) {
                    stack.push(current);
                    const randomNeighbor = neighbors[Math.floor(Math.random() * neighbors.length)];

removeWall(maze, current, randomNeighbor);
                    maze[randomNeighbor.y][randomNeighbor.x] = false;
                    player.x = randomNeighbor.x;
                    player.y = randomNeighbor.y;
                    stack.push(randomNeighbor);
                }
            }
        }

function getNeighbors(cell) {
            const { x, y } = cell;
            const neighbors = [];

if (x > 0) neighbors.push({ x: x - 1, y });
            if (x < cols - 1) neighbors.push({ x: x + 1, y });
            if (y > 0) neighbors.push({ x, y: y - 1 });
            if (y < rows - 1) neighbors.push({ x, y: y + 1 });

return neighbors.filter(neighbor => maze[neighbor.y][neighbor.x]);
        }

function drawMaze() {
            context.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < rows; i++) {
                for (let j = 0; j < cols; j++) {
                    const x = j * cellSize;
                    const y = i * cellSize;

if (maze[i][j]) {
                        context.fillRect(x, y, cellSize, cellSize);
                    }
                }
            }

const playerSize = cellSize * 0.8;
            const playerX = (player.x * cellSize) + (cellSize * 0.1);
            const playerY = (player.y * cellSize) + (cellSize * 0.1);
            const playerHalfSize = playerSize / 2;
            
            context.beginPath();
            context.arc(playerX + playerHalfSize, playerY + playerHalfSize, playerHalfSize, 0, Math.PI * 2);
            context.fill();
        }

function handleTouchStart(event) {
            const touchX = event.touches[0].clientX;
            const touchY = event.touches[0].clientY;

if (touchX < canvas.width / 2) {
                movePlayer(-1, 0);
            } else {
                movePlayer(1, 0);
            }

if (touchY < canvas.height / 2) {
                movePlayer(0, -1);
            } else {
                movePlayer(0, 1);
            }

event.preventDefault();
        }

function movePlayer(dx, dy) {
            const newX = player.x + dx;
            const newY = player.y + dy;

if (newX >= 0 && newX < cols && newY >= 0 && newY < rows && !maze[newY][newX]) {
                player.x = newX;
                player.y = newY;
            }
        }

document.addEventListener('touchstart', handleTouchStart, { passive: false });

function gameLoop() {
            drawMaze();
            requestAnimationFrame(gameLoop);
        }

gameLoop();
    </script>
</body>
</html>
```

このコードは、`createMaze`関数でランダムな幅と高さの迷路を作成し、`generateMaze`関数でプレイヤーキャラクターの初期位置を設定すると同時に迷路を生成します。`drawMaze`関数で迷路とプレイヤーキャラクターを描画し、`movePlayer`関数でプレイヤーキャラクターの移動を制御します。`touchstart`イベントでスマートフォンのタッチ操作を受け付け、プレイヤーキャラクターの移動方向を決定します。

このコードを1枚のHTMLファイルとして保存し、スマートフォンのウェブブラウザで開くことで、3D迷路のスクリーンセーバーとして遊ぶことができます。