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

No:24951

55

A horror game where u go into this creepy guys hou..ALL
Developer User9247｜Date and time 23/11/15 4:12:16
Build time 203.195 sec｜Game capacity 7.576KB｜

Horror House Escape

This is a simple horror house escape game implemented as a single HTML file with JavaScript logic enclosed in `
` tags. The game can be played on a smartphone by entering commands in the provided text input. To play the game: - Enter commands (`up`, `down`, `left`, or `right`) in the text input to navigate through the house. - Find the green, yellow, and blue keys by moving the player character over them. - Once all the keys are collected, reach the green exit to escape the neighborhood. - The creepy guy will chase you, adding a sense of urgency to the gameplay. - If you manage to escape successfully, you will find out that John, your friend, is the creepy guy's grandson. The game screen is shown as a 3x3 grid, with the player represented by a red square, walls as black squares, keys as small colored squares, and the exit as a green square. Note: The implementation provided here is a simple text-based game. If you want to incorporate pictograms or more advanced graphics, you will need to explore HTML5 canvas or game development frameworks.

→ 　

0　

0　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

```html
<!DOCTYPE html>
<html>
<head>
    <title>Horror House Escape</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

#output {
            margin-top: 10%;
        }

#input {
            margin-top: 5%;
        }

#game-area {
            margin-top: 5%;
        }

#game-screen {
            width: 300px;
            height: 300px;
            border: 1px solid grey;
            display: inline-block;
            position: relative;
            background-color: #e6e6e6;
        }

.player {
            width: 40px;
            height: 40px;
            background-color: #ff0000;
            position: absolute;
        }

.key {
            width: 20px;
            height: 20px;
            background-color: #ffff00;
            position: absolute;
        }

.wall {
            width: 60px;
            height: 60px;
            background-color: #000;
            position: absolute;
        }

.exit {
            width: 60px;
            height: 60px;
            background-color: #00ff00;
            position: absolute;
        }
    </style>
</head>
<body>
    <h1>Horror House Escape</h1>
    <div id="output"></div>
    <div id="input">
        <input type="text" id="command" placeholder="Enter a command" autofocus>
        <button onclick="executeCommand()">Submit</button>
    </div>
    <div id="game-area">
        <div id="game-screen"></div>
    </div>

<script>
        var gameScreen = document.getElementById("game-screen");
        var outputDiv = document.getElementById("output");
        var commandInput = document.getElementById("command");
        var player = createPlayer();
        var gameStarted = false;

// Game elements
        var walls = [
            createWall(0, 0),
            createWall(2, 0),
            createWall(1, 2),
            createWall(0, 4),
            createWall(2, 4),
            createWall(1, 6),
            createWall(0, 8),
            createWall(2, 8)
        ];

var keys = [
            createKey(1, 1, "#00ff00", "green"),
            createKey(1, 3, "#ffff00", "yellow"),
            createKey(1, 5, "#0000ff", "blue")
        ];

var exit = createExit(1, 7);

function createPlayer() {
            var playerDiv = document.createElement("div");
            playerDiv.classList.add("player");
            playerDiv.style.top = "0px";
            playerDiv.style.left = "0px";
            gameScreen.appendChild(playerDiv);
            return playerDiv;
        }

function createWall(x, y) {
            var wallDiv = document.createElement("div");
            wallDiv.classList.add("wall");
            wallDiv.style.top = (60 * y) + "px";
            wallDiv.style.left = (60 * x) + "px";
            gameScreen.appendChild(wallDiv);
            return { x: x, y: y };
        }

function createKey(x, y, color, type) {
            var keyDiv = document.createElement("div");
            keyDiv.classList.add("key");
            keyDiv.style.top = (60 * y + 20) + "px";
            keyDiv.style.left = (60 * x + 20) + "px";
            keyDiv.style.backgroundColor = color;
            gameScreen.appendChild(keyDiv);
            return { x: x, y: y, type: type };
        }

function createExit(x, y) {
            var exitDiv = document.createElement("div");
            exitDiv.classList.add("exit");
            exitDiv.style.top = (60 * y) + "px";
            exitDiv.style.left = (60 * x) + "px";
            gameScreen.appendChild(exitDiv);
            return { x: x, y: y };
        }

function displayOutput(text) {
            outputDiv.innerHTML = text;
        }

function movePlayer(dx, dy) {
            var playerTop = parseInt(player.style.top);
            var playerLeft = parseInt(player.style.left);
            var newTop = playerTop + dy * 60;
            var newLeft = playerLeft + dx * 60;

var isCollision = walls.some(function (wall) {
                return newTop === wall.y * 60 && newLeft === wall.x * 60;
            });

if (newTop >= 0 && newTop <= 180 && newLeft >= 0 && newLeft <= 120 && !isCollision) {
                player.style.top = newTop + "px";
                player.style.left = newLeft + "px";
                checkGameStatus();
            }
        }

function checkGameStatus() {
            var currentPlayerX = parseInt(player.style.left) / 60;
            var currentPlayerY = parseInt(player.style.top) / 60;

var currentKeys = keys.filter(function (key) {
                return key.x === currentPlayerX && key.y === currentPlayerY;
            });

if (currentKeys.length > 0) {
                var collectedKey = currentKeys[0];
                displayOutput("You found a " + collectedKey.type + " key!");
                gameScreen.removeChild(collectedKey);
                keys.splice(keys.indexOf(collectedKey), 1);
            }

if (exit.x === currentPlayerX && exit.y === currentPlayerY) {
                if (keys.length === 0) {
                    displayOutput("Congratulations! You escaped the neighborhood!");
                    commandInput.disabled = true;
                } else {
                    displayOutput("You need to find all the keys first!");
                }
            }
        }

function executeCommand() {
            if (!gameStarted) {
                displayOutput("You have entered the creepy guy's house. Find your friend John and escape the neighborhood by collecting all the keys!");
                gameStarted = true;
            } else {
                var command = commandInput.value.toLowerCase();
                switch (command) {
                    case "up":
                        movePlayer(0, -1);
                        break;
                    case "down":
                        movePlayer(0, 1);
                        break;
                    case "left":
                        movePlayer(-1, 0);
                        break;
                    case "right":
                        movePlayer(1, 0);
                        break;
                    default:
                        displayOutput("Invalid command! Try 'up', 'down', 'left', or 'right'.");
                        break;
                }
            }
            commandInput.value = "";
        }
    </script>
</body>
</html>
```

This is a simple horror house escape game implemented as a single HTML file with JavaScript logic enclosed in `<script>` tags. The game can be played on a smartphone by entering commands in the provided text input.

To play the game:
- Enter commands (`up`, `down`, `left`, or `right`) in the text input to navigate through the house.
- Find the green, yellow, and blue keys by moving the player character over them.
- Once all the keys are collected, reach the green exit to escape the neighborhood.
- The creepy guy will chase you, adding a sense of urgency to the gameplay.
- If you manage to escape successfully, you will find out that John, your friend, is the creepy guy's grandson.

The game screen is shown as a 3x3 grid, with the player represented by a red square, walls as black squares, keys as small colored squares, and the exit as a green square.

Note: The implementation provided here is a simple text-based game. If you want to incorporate pictograms or more advanced graphics, you will need to explore HTML5 canvas or game development frameworks.