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

No:40789

40

Un juego donde estamos en una especie de laberinto..ALL
Developer User18058｜Date and time 24/2/4 5:20:42
Build time 29.82 sec｜Game capacity 8.819KB｜

Juego del Laberinto

El código HTML y JS anterior implementa un juego simple de laberinto. El jugador es representado por un pictograma y está ubicado en la esquina superior izquierda del laberinto. Un bot también es representado por un pictograma y está ubicado en la esquina inferior derecha del laberinto. El objetivo del juego es mover al jugador a través del laberinto sin ser tocado por el bot. Si el bot toca al jugador, el juego termina y se muestra un mensaje de "Has perdido". El laberinto está compuesto por una serie de paredes (representadas como elementos con la clase 'wall') que bloquean el movimiento del jugador y bot. El jugador puede moverse utilizando las teclas de dirección (arriba, abajo, izquierda, derecha) en el dispositivo móvil. El movimiento del bot es aleatorio y se realiza cada segundo. El código está escrito en un solo archivo HTML y utiliza etiquetas de script para envolver el código JavaScript. Se implementa un bucle de juego que controla el movimiento del bot y verifica las colisiones entre el jugador y el bot. Cuando se produce una colisión, el juego se detiene y se muestra un mensaje al jugador. Es importante asegurarse de tener imágenes de los pictogramas del jugador y el bot en el mismo directorio que el archivo HTML y reemplazar los nombres de los archivos de imagen en las propiedades `background-image` del CSS correspondiente a los elementos `player` y `bot`. ¡Espero que disfrutes el juego! Buena suerte escapando del laberinto.

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Juego del Laberinto</title>
    <style>
        body {
            background-color: #f0f0f0;
            text-align: center;
        }

#game-container {
            margin-top: 20px;
            display: inline-block;
        }

#player {
            width: 50px;
            height: 50px;
            background-image: url('pictograma-jugador.png');
            background-size: cover;
            position: absolute;
            z-index: 2;
        }

#bot {
            width: 50px;
            height: 50px;
            background-image: url('pictograma-bot.png');
            background-size: cover;
            position: absolute;
            z-index: 2;
        }

.wall {
            width: 50px;
            height: 50px;
            background-color: #333;
            position: absolute;
        }
    </style>
</head>
<body>
    <h1>Juego del Laberinto</h1>

<div id="game-container">
        <div id="player"></div>
        <div id="bot"></div>
        <div class="wall" style="top: 0; left: 100px;"></div>
        <div class="wall" style="top: 50px; left: 100px;"></div>
        <div class="wall" style="top: 100px; left: 100px;"></div>
        <div class="wall" style="top: 150px; left: 100px;"></div>
        <div class="wall" style="top: 200px; left: 100px;"></div>
        <div class="wall" style="top: 250px; left: 100px;"></div>
        <div class="wall" style="top: 300px; left: 50px;"></div>
        <div class="wall" style="top: 300px; left: 100px;"></div>
        <div class="wall" style="top: 300px; left: 150px;"></div>
        <div class="wall" style="top: 250px; left: 150px;"></div>
        <div class="wall" style="top: 200px; left: 150px;"></div>
        <div class="wall" style="top: 150px; left: 150px;"></div>
        <div class="wall" style="top: 100px; left: 150px;"></div>
        <div class="wall" style="top: 50px; left: 150px;"></div>
        <div class="wall" style="top: 150px; left: 300px;"></div>
        <div class="wall" style="top: 200px; left: 300px;"></div>
        <div class="wall" style="top: 250px; left: 300px;"></div>
        <div class="wall" style="top: 300px; left: 300px;"></div>
        <div class="wall" style="top: 350px; left: 300px;"></div>
        <div class="wall" style="top: 400px; left: 300px;"></div>
        <div class="wall" style="top: 450px; left: 300px;"></div>
        <div class="wall" style="top: 500px; left: 300px;"></div>
        <div class="wall" style="top: 500px; left: 350px;"></div>
        <div class="wall" style="top: 500px; left: 400px;"></div>
        <div class="wall" style="top: 450px; left: 400px;"></div>
        <div class="wall" style="top: 400px; left: 400px;"></div>
        <div class="wall" style="top: 350px; left: 400px;"></div>
        <div class="wall" style="top: 350px; left: 450px;"></div>
        <div class="wall" style="top: 350px; left: 500px;"></div>
        <div class="wall" style="top: 300px; left: 500px;"></div>
        <div class="wall" style="top: 250px; left: 500px;"></div>
        <div class="wall" style="top: 200px; left: 500px;"></div>
        <div class="wall" style="top: 150px; left: 500px;"></div>
        <div class="wall" style="top: 100px; left: 500px;"></div>
        <div class="wall" style="top: 50px; left: 500px;"></div>
        <div class="wall" style="top: 0; left: 500px;"></div>
        <div class="wall" style="top: 100px; left: 450px;"></div>
        <div class="wall" style="top: 100px; left: 400px;"></div>
        <div class="wall" style="top: 150px; left: 400px;"></div>
        <div class="wall" style="top: 200px; left: 400px;"></div>
        <div class="wall" style="top: 250px; left: 400px;"></div>
        <div class="wall" style="top: 250px; left: 450px;"></div>
        <div class="wall" style="top: 250px; left: 500px;"></div>
        <div class="wall" style="top: 300px; left: 500px;"></div>
        <div class="wall" style="top: 300px; left: 400px;"></div>
        <div class="wall" style="top: 300px; left: 350px;"></div>
        <div class="wall" style="top: 250px; left: 350px;"></div>
    </div>

<script>
        document.addEventListener("DOMContentLoaded", function() {
            var player = document.getElementById('player');
            var bot = document.getElementById('bot');
            var walls = document.getElementsByClassName('wall');
            var gameContainer = document.getElementById('game-container');
            var mazeWidth = gameContainer.offsetWidth;
            var mazeHeight = gameContainer.offsetHeight;

var playerPosition = {
                x: 0,
                y: 0
            };

var botPosition = {
                x: mazeWidth - 50,
                y: mazeHeight - 50
            };

var gameLoop;

function movePlayer(event) {
                var key = event.keyCode || event.which;

// Move player up
                if (key === 38 && playerPosition.y > 0) {
                    playerPosition.y -= 50;
                }

// Move player down
                if (key === 40 && playerPosition.y < mazeHeight - 50) {
                    playerPosition.y += 50;
                }

// Move player left
                if (key === 37 && playerPosition.x > 0) {
                    playerPosition.x -= 50;
                }

// Move player right
                if (key === 39 && playerPosition.x < mazeWidth - 50) {
                    playerPosition.x += 50;
                }

player.style.top = playerPosition.y + 'px';
                player.style.left = playerPosition.x + 'px';

checkCollision();
            }

function moveBot() {
                var randomDirection = Math.floor(Math.random() * 4);

// Move bot up
                if (randomDirection === 0 && botPosition.y > 0) {
                    botPosition.y -= 50;
                }

// Move bot down
                if (randomDirection === 1 && botPosition.y < mazeHeight - 50) {
                    botPosition.y += 50;
                }

// Move bot left
                if (randomDirection === 2 && botPosition.x > 0) {
                    botPosition.x -= 50;
                }

// Move bot right
                if (randomDirection === 3 && botPosition.x < mazeWidth - 50) {
                    botPosition.x += 50;
                }

bot.style.top = botPosition.y + 'px';
                bot.style.left = botPosition.x + 'px';

checkCollision();
            }

function checkCollision() {
                if (playerPosition.x === botPosition.x && playerPosition.y === botPosition.y) {
                    stopGame();
                    alert('Te han atrapado. ¡Has perdido!');
                }
            }

function startGame() {
                document.addEventListener('keydown', movePlayer);
                gameLoop = setInterval(moveBot, 1000);
            }

function stopGame() {
                document.removeEventListener('keydown', movePlayer);
                clearInterval(gameLoop);
            }

startGame();
        });
    </script>
</body>
</html>
```

El código HTML y JS anterior implementa un juego simple de laberinto. El jugador es representado por un pictograma y está ubicado en la esquina superior izquierda del laberinto. Un bot también es representado por un pictograma y está ubicado en la esquina inferior derecha del laberinto. El objetivo del juego es mover al jugador a través del laberinto sin ser tocado por el bot. Si el bot toca al jugador, el juego termina y se muestra un mensaje de "Has perdido".

El laberinto está compuesto por una serie de paredes (representadas como elementos con la clase 'wall') que bloquean el movimiento del jugador y bot. El jugador puede moverse utilizando las teclas de dirección (arriba, abajo, izquierda, derecha) en el dispositivo móvil. El movimiento del bot es aleatorio y se realiza cada segundo.

El código está escrito en un solo archivo HTML y utiliza etiquetas de script para envolver el código JavaScript. Se implementa un bucle de juego que controla el movimiento del bot y verifica las colisiones entre el jugador y el bot. Cuando se produce una colisión, el juego se detiene y se muestra un mensaje al jugador.

Es importante asegurarse de tener imágenes de los pictogramas del jugador y el bot en el mismo directorio que el archivo HTML y reemplazar los nombres de los archivos de imagen en las propiedades `background-image` del CSS correspondiente a los elementos `player` y `bot`.

¡Espero que disfrutes el juego! Buena suerte escapando del laberinto.