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

No:35989

106

Horror game when you wake up in the game There’s a..ALL
Developer User16706｜Date and time 24/1/16 6:05:05
Build time 17.773 sec｜Game capacity 5.476KB｜

Horror Game - Waking Nightmare

Explanation: This is a simple horror game implemented as a single HTML file using JavaScript. It creates a game environment where the player, represented by a white square, needs to avoid a scary bunny mascot enemy, represented by a red square. The player can control their position by touching and dragging on a smartphone screen. The game starts by displaying the game title and the game container, which is a square area in the middle of the screen. The player and enemy are positioned within this container. The enemy continuously moves on a repetitive animation. The player's position is controlled by the touch movements on the screen. The `movePlayer` function calculates the new position based on touch coordinates and updates the player's position accordingly. The `checkCollision` function checks for collision between the player and enemy on every move. If a collision occurs, the game ends. When the game ends, the `endGame` function is called, changing some visual aspects to indicate the game over state. After a brief delay, the `resetGame` function is called to reset the game state and allow the player to play again. The `clamp` function is a utility function used to restrict a value within a specified range. Overall, this simple horror game offers a demo experience where the player needs to avoid the chasing bunny mascot to survive. Please keep in mind that this is a basic implementation, and additional features can be added to enhance the gameplay.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Horror Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
            background-color: #000;
            color: #fff;
        }

h1 {
            font-weight: bold;
            font-size: 24px;
            margin-top: 50px;
        }

#game-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 500px;
        }

#player {
            width: 50px;
            height: 50px;
            background-color: #fff;
            position: absolute;
        }

#enemy {
            width: 50px;
            height: 50px;
            background-color: #f00;
            position: absolute;
            top: 200px;
            left: 200px;
        }

#end-message {
            font-size: 18px;
            margin-top: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <h1>Horror Game - Waking Nightmare</h1>
    <div id="game-container">
        <div id="player"></div>
        <div id="enemy"></div>
    </div>
    <p id="end-message"></p>

<script>
        var player = document.getElementById('player');
        var enemy = document.getElementById('enemy');
        var endMessage = document.getElementById('end-message');

var gameContainer = document.getElementById('game-container');
        var containerWidth = gameContainer.clientWidth;
        var containerHeight = gameContainer.clientHeight;

var playerPos = {
            x: containerWidth / 2 - 25,
            y: containerHeight / 2 - 25
        };

var enemyPos = {
            x: 200,
            y: 200
        };

var isGameOver = false;

player.style.left = playerPos.x + "px";
        player.style.top = playerPos.y + "px";

function movePlayer(event) {
            if (!isGameOver) {
                const x = event.touches[0].clientX - player.offsetWidth / 2;
                const y = event.touches[0].clientY - player.offsetHeight / 2;

playerPos.x = clamp(x, 0, containerWidth - player.offsetWidth);
                playerPos.y = clamp(y, 0, containerHeight - player.offsetHeight);

player.style.left = playerPos.x + "px";
                player.style.top = playerPos.y + "px";

checkCollision();
            }
        }

function checkCollision() {
            var playerRect = player.getBoundingClientRect();
            var enemyRect = enemy.getBoundingClientRect();

if (
                playerRect.left < enemyRect.left + enemyRect.width &&
                playerRect.left + playerRect.width > enemyRect.left &&
                playerRect.top < enemyRect.top + enemyRect.height &&
                playerRect.top + playerRect.height > enemyRect.top
            ) {
                endGame();
            }
        }

function endGame() {
            isGameOver = true;
            player.style.backgroundColor = "#f00";
            enemy.style.animation = "none";
            endMessage.style.display = "block";
            endMessage.innerHTML = "Game Over";

setTimeout(() => {
                resetGame();
            }, 2000);
        }

function resetGame() {
            player.style.backgroundColor = "#fff";
            enemy.style.animation = "enemy-animation 2s ease-in-out infinite";
            endMessage.style.display = "none";
            isGameOver = false;
            playerPos.x = containerWidth / 2 - 25;
            playerPos.y = containerHeight / 2 - 25;
            player.style.left = playerPos.x + "px";
            player.style.top = playerPos.y + "px";
        }

function clamp(num, min, max) {
            return Math.min(Math.max(num, min), max);
        }

gameContainer.addEventListener('touchmove', movePlayer);
    </script>
</body>
</html>
```

Explanation:
This is a simple horror game implemented as a single HTML file using JavaScript. It creates a game environment where the player, represented by a white square, needs to avoid a scary bunny mascot enemy, represented by a red square. The player can control their position by touching and dragging on a smartphone screen.

The game starts by displaying the game title and the game container, which is a square area in the middle of the screen. The player and enemy are positioned within this container. The enemy continuously moves on a repetitive animation.

The player's position is controlled by the touch movements on the screen. The `movePlayer` function calculates the new position based on touch coordinates and updates the player's position accordingly. The `checkCollision` function checks for collision between the player and enemy on every move. If a collision occurs, the game ends.

When the game ends, the `endGame` function is called, changing some visual aspects to indicate the game over state. After a brief delay, the `resetGame` function is called to reset the game state and allow the player to play again.

The `clamp` function is a utility function used to restrict a value within a specified range.

Overall, this simple horror game offers a demo experience where the player needs to avoid the chasing bunny mascot to survive. Please keep in mind that this is a basic implementation, and additional features can be added to enhance the gameplay.