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

No:30551

←

Prev Next

→

Make a backrooms game
Developer User14838｜Date and time 23/12/22 19:51:20
Build time 35.262 sec｜Game capacity 5.367KB｜

Script

Certainly! Here's a simple implementation of a game inspired by the backrooms, using JavaScript within a single HTML file:

Backrooms Game

This game creates a grid-like environment where you control a player character (represented by a pictogram) using arrow keys on your smartphone. The objective is to find the exit door while avoiding monsters. You have a limited number of moves, and if you reach the exit, you win the game. If you encounter a monster, you lose the game.

←

Prev　Next

→ 　

Back　

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

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

Certainly! Here's a simple implementation of a game inspired by the backrooms, using JavaScript within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Backrooms Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    #game-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 20px;
    }
    .tile {
      width: 80px;
      height: 80px;
      background-color: #f8f8f8;
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
    }
    #player {
      background-color: #3f3f3f;
      color: white;
    }
  </style>
</head>
<body>
  <h1>Backrooms Game</h1>
  <div id="game-container"></div>

let playerPosition;
    let numMoves;
    let exitPosition;
    
    // Initialize the game
    function initializeGame() {
      numMoves = maxMoves;
      generateGrid();
      addPlayer();
      addExit();
      addMonsters();
    }
    
    // Generate grid
    function generateGrid() {
      const gameContainer = document.getElementById('game-container');
      gameContainer.innerHTML = '';
      
      for (let i = 0; i < gridSize; i++) {
        for (let j = 0; j < gridSize; j++) {
          const tile = document.createElement('div');
          tile.classList.add('tile');
          tile.setAttribute('id', `${i}-${j}`);
          gameContainer.appendChild(tile);
        }
      }
    }
    
    // Add player to a random position
    function addPlayer() {
      const randomX = Math.floor(Math.random() * gridSize);
      const randomY = Math.floor(Math.random() * gridSize);
      playerPosition = { x: randomX, y: randomY };
      
      const playerTile = document.getElementById(`${randomX}-${randomY}`);
      playerTile.textContent = playerIcon;
      playerTile.setAttribute('id', 'player');
    }
    
    // Add exit door to a random position
    function addExit() {
      const randomX = Math.floor(Math.random() * gridSize);
      const randomY = Math.floor(Math.random() * gridSize);
      exitPosition = { x: randomX, y: randomY };
      
      const exitTile = document.getElementById(`${randomX}-${randomY}`);
      exitTile.textContent = exitTile;
    }
    
    // Add monsters to random tiles
    function addMonsters() {
      const tiles = document.getElementsByClassName('tile');
      
      for (let tile of tiles) {
        if (tile.id === 'player' || tile.textContent === exitTile)
          continue;
          
        if (Math.random() < monsterChance) {
          tile.textContent = monsterIcon;
          tile.classList.add('monster');
        }
      }
    }
    
    // Move player based on arrow key press
    document.addEventListener('keydown', function(event) {
      const key = event.key;
      const playerTile = document.getElementById('player');
      
      if (key === 'ArrowUp') {
        movePlayer(playerPosition.x - 1, playerPosition.y, playerTile);
      } else if (key === 'ArrowDown') {
        movePlayer(playerPosition.x + 1, playerPosition.y, playerTile);
      } else if (key === 'ArrowLeft') {
        movePlayer(playerPosition.x, playerPosition.y - 1, playerTile);
      } else if (key === 'ArrowRight') {
        movePlayer(playerPosition.x, playerPosition.y + 1, playerTile);
      }
    });
    
    // Move the player to the new position
    function movePlayer(newX, newY, playerTile) {
      if (newX >= 0 && newX < gridSize && newY >= 0 && newY < gridSize) {
        const newTile = document.getElementById(`${newX}-${newY}`);
        
        if (newX === exitPosition.x && newY === exitPosition.y) {
          endGame(true);
        } else if (newTile.textContent === monsterIcon) {
          endGame(false);
        } else {
          playerTile.setAttribute('id', '');
          newTile.setAttribute('id', 'player');
          playerPosition = { x: newX, y: newY };
          numMoves--;
          updateMoves();
        }
      }
    }
    
    // Update remaining moves display
    function updateMoves() {
      const movesDisplay = document.getElementById('moves');
      movesDisplay.textContent = `Moves Left: ${numMoves}`;
    }
    
    // Game end
    function endGame(isWin) {
      document.removeEventListener('keydown');
      const message = isWin ? 'Congratulations! You found the exit!' : 'Oh no! You encountered a monster!';
      alert(`${message}\nPress OK to play again.`)
      initializeGame();
    }
    
    // Start the game
    initializeGame();
  </script>
</body>
</html>
```

Note: For a better user experience, it's recommended to use a separate JavaScript file and include it with `<script src="game.js"></script>` instead of inline script tags in the HTML.