A 1st person scary game where you have to find keys and run away from the monsters and escape's game

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

No:15123

135

←

Prev Next

→

A 1st person scary game where you have to find key..ALL
Developer User6337｜Date and time 23/9/6 9:58:06
Build time 44.26 sec｜Game capacity 5.543KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Scary Escape</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        
        #game-container {
            width: 400px;
            height: 400px;
            background-color: darkgray;
            margin: 0 auto;
            position: relative;
        }
        
        #player {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .monster {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
        
        .key {
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
        }
        
        #message {
            margin-top: 20px;
        }
        
        #win-message {
            color: green;
        }
        
        #lose-message {
            color: red;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
        <div class="monster"></div>
        <div class="monster"></div>
        <div class="monster"></div>
        <div class="key"></div>
        <div class="key"></div>
        <div class="key"></div>
    </div>
    <div id="message"></div>
    
    <script>
        // Get necessary elements
        const gameContainer = document.getElementById("game-container");
        const player = document.getElementById("player");
        const monsters = document.getElementsByClassName("monster");
        const keys = document.getElementsByClassName("key");
        const messageContainer = document.getElementById("message");
        
        // Initialize game variables
        let hasWon = false;
        let isGameOver = false;
        let totalKeys = keys.length;
        
        // Move the player
        function movePlayer(event) {
            if (isGameOver || hasWon) return; // Do nothing if the game is over or won
            
            const key = event.keyCode;
            const leftArrow = 37;
            const upArrow = 38;
            const rightArrow = 39;
            const downArrow = 40;
            
            // Move player based on arrow keys
            if (key === leftArrow) {
                move(-50, 0);
            } else if (key === upArrow) {
                move(0, -50);
            } else if (key === rightArrow) {
                move(50, 0);
            } else if (key === downArrow) {
                move(0, 50);
            }
        }
        
        // Function to move player
        function move(x, y) {
            const playerX = player.offsetLeft + x;
            const playerY = player.offsetTop + y;
            
            // Check if player hits the game container borders
            if (playerX < 0 || playerY < 0 || playerX + player.offsetWidth > gameContainer.offsetWidth || playerY + player.offsetHeight > gameContainer.offsetHeight) {
                return; // Do nothing if the player hits the borders
            }
            
            // Check for collisions with keys
            for (let i = 0; i < keys.length; i++) {
                if (isColliding(player, keys[i])) {
                    keys[i].remove(); // Remove the key as the player collects it
                    totalKeys--; // Decrease the number of remaining keys
                    break; // Exit the loop after finding a collision
                }
            }
            
            // Check for collisions with monsters
            for (let i = 0; i < monsters.length; i++) {
                if (isColliding(player, monsters[i])) {
                    endGame(false); // Game over if the player collides with a monster
                    return; // Exit the function to prevent further movement
                }
            }
            
            // Update player position
            player.style.left = playerX + "px";
            player.style.top = playerY + "px";
            
            // Check if the player reaches the exit
            if (totalKeys === 0) {
                endGame(true); // Player wins if all keys are collected
            }
        }
        
        // Check for collision between two elements
        function isColliding(element1, element2) {
            return (
                element1.offsetLeft < element2.offsetLeft + element2.offsetWidth &&
                element1.offsetLeft + element1.offsetWidth > element2.offsetLeft &&
                element1.offsetTop < element2.offsetTop + element2.offsetHeight &&
                element1.offsetTop + element1.offsetHeight > element2.offsetTop
            );
        }
        
        // End the game and display the result message
        function endGame(isWin) {
            isGameOver = true;
            
            if (isWin) {
                hasWon = true;
                messageContainer.innerHTML = "<span id='win-message'>Congratulations! You escaped from the monsters!</span>";
            } else {
                messageContainer.innerHTML = "<span id='lose-message'>Game Over! The monsters got you!</span>";
            }
        }
        
        // Start the game when the page is loaded
        window.onload = function() {
            window.addEventListener("keydown", movePlayer); // Listen for arrow key events
        };
    </script>
</body>
</html>