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

No:8189

2769

←

Prev Next

→

I want a horror game
Developer User4153｜Date and time 23/7/14 3:13:12
Build time 34.175 sec｜Game capacity 4.221KB｜

Script

Sure! Here's an example of a simple horror game implemented as a single HTML file using JavaScript. Please note that this is just a simple sample game and you can extend and modify it as per your requirements.

Horror Game

In this game, your objective is to avoid the enemy (represented by an image) by moving the player (also represented by an image) using the arrow keys. If the player collides with the enemy, the game ends. You can start and reset the game using the buttons. Please note that you need to replace the image paths (`emozi_all/player.png` and `emozi_all/enemy.png`) with your own image files to make it work.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Horror Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Horror Game</h1>
  
  <div id="gameArea">
    <img id="player" src="player.png">
    <img id="enemy" src="enemy.png">
    <p id="message"></p>
    <button id="startButton" onclick="startGame()">Start</button>
    <button id="resetButton" onclick="resetGame()" style="display:none">Reset</button>
  </div>
  
  <script>
    var player = document.getElementById("player");
    var enemy = document.getElementById("enemy");
    var message = document.getElementById("message");
    var startButton = document.getElementById("startButton");
    var resetButton = document.getElementById("resetButton");
    
    player.style.position = "absolute";
    enemy.style.position = "absolute";
    
    var gameArea = document.getElementById("gameArea");
    var areaWidth = gameArea.offsetWidth;
    var areaHeight = gameArea.offsetHeight;
    
    var playerWidth = player.offsetWidth;
    var playerHeight = player.offsetHeight;
    var enemyWidth = enemy.offsetWidth;
    var enemyHeight = enemy.offsetHeight;
    
    var playerX, playerY;
    var enemyX, enemyY;
    var isGameRunning = false;
    
    function startGame() {
      isGameRunning = true;
      startButton.style.display = "none";
      resetButton.style.display = "none";
      
      playerX = areaWidth / 2 - playerWidth / 2;
      playerY = areaHeight / 2 - playerHeight / 2;
      
      enemyX = Math.random() * (areaWidth - enemyWidth);
      enemyY = Math.random() * (areaHeight - enemyHeight);
      
      player.style.left = playerX + "px";
      player.style.top = playerY + "px";
      enemy.style.left = enemyX + "px";
      enemy.style.top = enemyY + "px";
      
      message.innerText = "Avoid the enemy!";
      
      document.addEventListener("keydown", movePlayer);
      
      setInterval(updateGame, 10);
    }
    
    function updateGame() {
      if (!isGameRunning) {
        return;
      }
      
      if (isCollision(playerX, playerY, playerWidth, playerHeight, enemyX, enemyY, enemyWidth, enemyHeight)) {
        endGame();
      }
    }
    
    function movePlayer(event) {
      var key = event.keyCode;
      var step = 5;
      
      switch(key) {
        case 37: // Left
          playerX -= step;
          break;
        case 38: // Up
          playerY -= step;
          break;
        case 39: // Right
          playerX += step;
          break;
        case 40: // Down
          playerY += step;
          break;
      }
      
      if (playerX < 0) {
        playerX = 0;
      } else if (playerX > areaWidth - playerWidth) {
        playerX = areaWidth - playerWidth;
      }
      
      if (playerY < 0) {
        playerY = 0;
      } else if (playerY > areaHeight - playerHeight) {
        playerY = areaHeight - playerHeight;
      }
      
      player.style.left = playerX + "px";
      player.style.top = playerY + "px";
    }
    
    function endGame() {
      isGameRunning = false;
      resetButton.style.display = "block";
      message.innerText = "Game over!";
      
      document.removeEventListener("keydown", movePlayer);
    }
    
    function resetGame() {
      startButton.style.display = "block";
      resetButton.style.display = "none";
      message.innerText = "";
    }
    
    function isCollision(x1, y1, w1, h1, x2, y2, w2, h2) {
      return (x1 < x2 + w2 &&
              x1 + w1 > x2 &&
              y1 < y2 + h2 &&
              y1 + h1 > y2);
    }
  </script>
</body>
</html>
```

Please note that you need to replace the image paths (`player.png` and `enemy.png`) with your own image files to make it work.