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

No:36694

←

Prev Next

→

Maze Game
Developer User16822｜Date and time 24/1/18 9:04:46
Build time 15.745 sec｜Game capacity 4.489KB｜

Script

Juego de Laberinto

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Maze Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        #maze {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            position: relative;
            margin: 0 auto;
            margin-top: 20px;
        }
        #maze .wall {
            background-color: black;
            width: 40px;
            height: 40px;
            position: absolute;
            border-radius: 50%;
        }
        #maze .start {
            background-color: green;
        }
        #maze .end {
            background-color: red;
        }
        #maze .player {
            background-image: url('player.png');
            background-size: contain;
            width: 40px;
            height: 40px;
            position: absolute;
        }
    </style>
</head>
<body>
    <h1>Juego de Laberinto</h1>
    <div id="maze">
        <div class="wall" style="top: 60px; left: 60px;"></div>
        <div class="wall" style="top: 60px; left: 180px;"></div>
        <div class="wall" style="top: 60px; left: 300px;"></div>
        <div class="wall" style="top: 60px; left: 380px;"></div>
        <div class="wall" style="top: 120px; left: 180px;"></div>
        <div class="wall" style="top: 180px; left: 60px;"></div>
        <div class="wall" style="top: 180px; left: 240px;"></div>
        <div class="wall" style="top: 120px; left: 300px;"></div>
        <div class="wall" style="top: 240px; left: 60px;"></div>
        <div class="wall" style="top: 240px; left: 120px;"></div>
        <div class="wall" style="top: 300px; left: 240px;"></div>
        <div class="wall" style="top: 240px; left: 380px;"></div>
        <div class="wall" style="top: 300px; left: 380px;"></div>
        <div class="wall" style="top: 300px; left: 300px;"></div>
        <div class="wall" style="top: 360px; left: 60px;"></div>
        <div class="wall" style="top: 360px; left: 180px;"></div>
        <div class="wall" style="top: 360px; left: 240px;"></div>
        <div class="wall" style="top: 360px; left: 380px;"></div>
        <div class="start" style="top: 20px; left: 20px;"></div>
        <div class="end" style="top: 340px; left: 340px;"></div>
        <div id="player" class="player" style="top: 20px; left: 20px;"></div>
    </div>

function handleOrientation(event) {
            let left = event.gamma * 3; // sensitivity
            let top = event.beta * 3; // sensitivity

x += left;
            y += top;

// Limit the player movements within the maze boundaries
            if (x < 0) x = 0;
            if (y < 0) y = 0;
            if (x > maze.offsetWidth - player.offsetWidth) {
                x = maze.offsetWidth - player.offsetWidth;
            }
            if (y > maze.offsetHeight - player.offsetHeight) {
                y = maze.offsetHeight - player.offsetHeight;
            }

// Check collision with walls
            for (let i = 0; i < walls.length; i++) {
                if (collision(player, walls[i])) {
                    // Undo the movement
                    x -= left;
                    y -= top;
                    break;
                }
            }

// Check if reached the end of the maze
            if (collision(player, end)) {
                alert('¡Has ganado!');
                x = 20; // reset start position
                y = 20; // reset start position
            }

// Set the new position of the player
            player.style.left = x + 'px';
            player.style.top = y + 'px';
        }

function collision(player, element) {
            const rect1 = player.getBoundingClientRect();
            const rect2 = element.getBoundingClientRect();
            return (
                rect1.top < rect2.bottom &&
                rect1.bottom > rect2.top &&
                rect1.left < rect2.right &&
                rect1.right > rect2.left
            );
        }
    </script>
</body>
</html>