An made generation, and every time you press the button, a new maze is generated Wall:⬛ Player:🙂 Enemy:😡 Exit:🚪's game

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

No:30820

←

Prev Next

→

An made generation, and every time you press the b..ALL
Developer User14891｜Date and time 23/12/24 7:00:04
Build time 20.753 sec｜Game capacity 5.702KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Juego del Laberinto</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Obtener el elemento canvas y su contexto
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

// Variables de juego
        const cellSize = 40; // Tamaño de cada celda en el laberinto
        const mazeSize = 10; // Tamaño del laberinto en número de celdas
        const maze = generateMaze(mazeSize); // Generar el laberinto
        let playerPos = { x: 0, y: 0 }; // Posición del jugador
        let enemyPos = { x: Math.floor(Math.random() * mazeSize), y: Math.floor(Math.random() * mazeSize) }; // Posición del enemigo
        let exitPos = { x: mazeSize - 1, y: mazeSize - 1 }; // Posición de la salida del laberinto

// Dibujar el laberinto
        function drawMaze() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let row = 0; row < mazeSize; row++) {
                for (let col = 0; col < mazeSize; col++) {
                    if (maze[row][col] === 1) {
                        ctx.fillStyle = "#000000"; // Color de las paredes
                        ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
                    }
                }
            }

// Dibujar al jugador
            ctx.fillStyle = "#00ff00";
            ctx.font = "30px Arial";
            ctx.fillText("🙂", playerPos.x * cellSize, playerPos.y * cellSize + cellSize);

// Dibujar al enemigo
            ctx.fillStyle = "#ff0000";
            ctx.font = "30px Arial";
            ctx.fillText("😡", enemyPos.x * cellSize, enemyPos.y * cellSize + cellSize);

// Dibujar la salida
            ctx.fillStyle = "#0000ff";
            ctx.font = "30px Arial";
            ctx.fillText("🚪", exitPos.x * cellSize, exitPos.y * cellSize + cellSize);
        }

// Generar el laberinto utilizando un algoritmo de generación de laberinto
        function generateMaze(size) {
            const maze = [];

for (let row = 0; row < size; row++) {
                maze.push([]);

for (let col = 0; col < size; col++) {
                    maze[row][col] = 1; // Inicialmente todas las celdas son paredes
                }
            }

// Algoritmo de generación recursiva del laberinto
            function generate(row, col) {
                const directions = [{ dx: -2, dy: 0 }, { dx: 2, dy: 0 }, { dx: 0, dy: -2 }, { dx: 0, dy: 2 }];
                directions.sort(() => Math.random() - 0.5);

for (const direction of directions) {
                    const nextRow = row + direction.dy;
                    const nextCol = col + direction.dx;

if (nextRow >= 0 && nextRow < size && nextCol >= 0 && nextCol < size && maze[nextRow][nextCol] === 1) {
                        maze[nextRow][nextCol] = 0; // Eliminar pared entre las celdas
                        maze[row + direction.dy / 2][col + direction.dx / 2] = 0; // Eliminar pared en salto

generate(nextRow, nextCol); // Llamar recursivamente para continuar generando
                    }
                }
            }

generate(0, 0); // Comenzar generación desde la posición inicial

return maze;
        }

// Asignar el tamaño del canvas según el tamaño del laberinto
        canvas.width = mazeSize * cellSize;
        canvas.height = mazeSize * cellSize;

// Dibujar el laberinto inicial
        drawMaze();

// Manejar eventos de teclado para mover al jugador
        document.addEventListener("keydown", function (event) {
            const key = event.keyCode;

// Movimiento hacia arriba
            if (key === 38) {
                if (playerPos.y - 1 >= 0 && maze[playerPos.y - 1][playerPos.x] === 0) {
                    playerPos.y--;
                }
            }

// Movimiento hacia abajo
            if (key === 40) {
                if (playerPos.y + 1 < mazeSize && maze[playerPos.y + 1][playerPos.x] === 0) {
                    playerPos.y++;
                }
            }

// Movimiento hacia la izquierda
            if (key === 37) {
                if (playerPos.x - 1 >= 0 && maze[playerPos.y][playerPos.x - 1] === 0) {
                    playerPos.x--;
                }
            }

// Movimiento hacia la derecha
            if (key === 39) {
                if (playerPos.x + 1 < mazeSize && maze[playerPos.y][playerPos.x + 1] === 0) {
                    playerPos.x++;
                }
            }

// Verificar si el jugador llegó a la salida o fue capturado por el enemigo
            if (playerPos.x === exitPos.x && playerPos.y === exitPos.y) {
                alert("¡Felicidades! Has encontrado la salida.");
                return;
            } else if (playerPos.x === enemyPos.x && playerPos.y === enemyPos.y) {
                alert("¡Oops! Te encontró el enemigo. Game Over.");
                return;
            }

// Actualizar la posición del enemigo
            if (Math.random() >= 0.5) {
                if (enemyPos.y - 1 >= 0 && maze[enemyPos.y - 1][enemyPos.x] === 0) {
                    enemyPos.y--;
                }
            } else {
                if (enemyPos.x - 1 >= 0 && maze[enemyPos.y][enemyPos.x - 1] === 0) {
                    enemyPos.x--;
                }
            }

// Dibujar el laberinto actualizado
            drawMaze();
        });
    </script>
</body>
</html>