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

No:23872

←

Prev Next

→

Horror game
Developer User11177｜Date and time 23/11/4 1:58:30
Build time 71.955 sec｜Game capacity 4.115KB｜

Script

Welcome to the Horror Game!

This is a simple horror-themed game implemented as a single HTML file. The game features a character that the player controls using keyboard arrow keys or by clicking/tapping the game area on a smartphone. The objective is to make the character jump over obstacles to avoid getting caught. The game starts with a welcome screen, where the player can click/tap the "Start" button to begin. The character can jump by pressing the "Up" arrow key or by clicking/tapping anywhere on the game area. If the character collides with the top or bottom boundaries of the game container, it's considered a game over. On game over, the player is presented with a "Game Over!" message and a button to restart the game. To enhance the horror atmosphere, you can replace the placeholder image (`emozi_all/horror.png`) with a creepy pictogram or use appropriate background music/sound effects if desired.

←

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 {
      font-family: Arial, sans-serif;
      background-color: #000;
      color: #fff;
      text-align: center;
      margin-top: 100px;
    }
    
    #game-container {
      margin: 0 auto;
      width: 400px;
      height: 400px;
      border: 2px solid #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    h1 {
      font-size: 28px;
    }
    
    button {
      background-color: #fff;
      color: #000;
      padding: 10px 20px;
      font-size: 18px;
      cursor: pointer;
      margin-top: 20px;
      border: none;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <h1>Welcome to the Horror Game!</h1>
    <img id="character" src="character.png" width="120" height="120" alt="Character">
    <button onclick="startGame()">Start</button>
  </div>

gameContainer.addEventListener("click", handleClick);

function handleClick() {
        if (!isGameOver) {
          jump();
        }
      }

function jump() {
        character.classList.add("jump");
        setTimeout(() => {
          character.classList.remove("jump");
        }, 400);
      }

function processGameOver() {
        isGameOver = true;
        gameContainer.removeEventListener("click", handleClick);
        gameContainer.innerHTML = `<h1>Game Over!</h1>
                                   <button onclick="restartGame()">Restart</button>`;
      }

function checkCollision() {
        const containerRect = gameContainer.getBoundingClientRect();
        const characterRect = character.getBoundingClientRect();

if (
          characterRect.bottom >= containerRect.bottom ||
          characterRect.top <= containerRect.top
        ) {
          processGameOver();
        }
      }

function handleKeydown(event) {
        if (event.code === "ArrowUp" || event.code === "Space") {
          jump();
        }
      }

function moveCharacter(event) {
        const characterPosition = character.offsetTop;
        const containerHeight = gameContainer.offsetHeight;

if (event.code === "ArrowDown") {
          character.style.top =
            characterPosition + moveDistance > containerHeight - 120
              ? containerHeight - 120 + "px"
              : characterPosition + moveDistance + "px";
        } else if (event.code === "ArrowUp") {
          character.style.top =
            characterPosition - moveDistance < 0 ? 0 : characterPosition - moveDistance + "px";
        }

checkCollision();
      }

function restartGame() {
        isGameOver = false;
        gameContainer.innerHTML = "";
        character.style.top = "0";
        gameContainer.addEventListener("click", handleClick);
      }

window.addEventListener("keydown", handleKeydown);
      window.addEventListener("keyup", moveCharacter);
    }

</script>
</body>
</html>
```

The game starts with a welcome screen, where the player can click/tap the "Start" button to begin. The character can jump by pressing the "Up" arrow key or by clicking/tapping anywhere on the game area. If the character collides with the top or bottom boundaries of the game container, it's considered a game over. On game over, the player is presented with a "Game Over!" message and a button to restart the game.

To enhance the horror atmosphere, you can replace the placeholder image (`character.png`) with a creepy pictogram or use appropriate background music/sound effects if desired.