Make a game where you are in an office and you have to look at cameras to see around the pizza restaurant. There are animatronics trying to get into your office so you have to look at the cameras and shut the office doors when the animatronics get too close. If they get you then a "You Died" screen will show up and it will restart the game. If you manage to survive for one minute then a "you win" screen shows up and the game restarts's game

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

No:36167

←

Prev Next

→

Make a game where you are in an office and you hav..ALL
Developer User16761｜Date and time 24/1/17 2:43:20
Build time 30.034 sec｜Game capacity 5.977KB｜

Script

Sure! Here's a simple implementation of the game using HTML, CSS, and JavaScript:

Survive for 1 minute to win!

Camera 1

Camera 2

Camera 3

Camera 4

You Died!

You Win!

This code creates a game where you are in an office, and you have to toggle camera views and office doors to survive animatronics. The state of cameras and doors are stored in arrays `cameras` and `doors`, respectively. The game status is updated every second by the `updateGameState` function, which also checks for game over or game won conditions. The game over and win screens are shown by modifying their CSS properties. The game can be restarted by clicking the restart button, which resets the game state and starts a new game.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's a simple implementation of the game using HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Office Surveillance Game</title>
  <style>
    #game-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #000;
      color: #fff;
      font-family: Arial, sans-serif;
    }
    #game-status {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 24px;
    }
    #camera-views {
      display: flex;
      justify-content: space-around;
      margin-bottom: 20px;
    }
    .camera-btn {
      width: 100px;
      height: 100px;
      background-color: #333;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid #fff;
      font-size: 18px;
    }
    .camera-btn.active {
      background-color: #fff;
      color: #000;
    }
    #office-doors {
      display: flex;
      justify-content: center;
    }
    .door-btn {
      width: 120px;
      height: 40px;
      background-color: #333;
      border: none;
      color: #fff;
      cursor: pointer;
      font-size: 14px;
      margin: 10px;
    }
    #game-over {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
    }
    #win {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
    }
    #game-over-msg, #win-msg {
      font-size: 36px;
    }
    #restart-btn {
      font-size: 24px;
      padding: 10px 30px;
      background-color: #fff;
      color: #000;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="game-status">Survive for 1 minute to win!</div>
    <div id="camera-views">
      <div class="camera-btn" onclick="toggleCamera(1)">Camera 1</div>
      <div class="camera-btn" onclick="toggleCamera(2)">Camera 2</div>
      <div class="camera-btn" onclick="toggleCamera(3)">Camera 3</div>
      <div class="camera-btn" onclick="toggleCamera(4)">Camera 4</div>
    </div>
    <div id="office-doors">
      <button class="door-btn" onclick="toggleDoor(1)">Door 1</button>
      <button class="door-btn" onclick="toggleDoor(2)">Door 2</button>
    </div>
  </div>

<div id="game-over">
    <div id="game-over-msg">You Died!</div>
    <button id="restart-btn" onclick="restartGame()">Restart</button>
  </div>

<div id="win">
    <div id="win-msg">You Win!</div>
    <button id="restart-btn" onclick="restartGame()">Restart</button>
  </div>

// Function to toggle camera view
    function toggleCamera(cameraIndex) {
      cameras[cameraIndex - 1] = !cameras[cameraIndex - 1];
      const cameraBtn = document.querySelector(`.camera-btn:nth-child(${cameraIndex})`);
      cameraBtn.classList.toggle("active");
    }

// Function to toggle office door
    function toggleDoor(doorIndex) {
      doors[doorIndex - 1] = !doors[doorIndex - 1];
      const doorBtn = document.querySelector(`.door-btn:nth-child(${doorIndex})`);
      doorBtn.classList.toggle("active");
    }

// Function to update game state
    function updateGameState() {
      timeRemaining--;

// Check if game over
      if (timeRemaining <= 0 || (doors[0] && doors[1])) {
        isGameOver = true;
      }

// Check if game won
      if (timeRemaining <= 0 && !(doors[0] && doors[1])) {
        isGameWon = true;
      }

// Update time remaining
      document.getElementById("game-status").innerHTML = `Time Remaining: ${timeRemaining} seconds`;

if (isGameOver) {
        showGameOverScreen();
      } else if (isGameWon) {
        showWinScreen();
      } else {
        setTimeout(updateGameState, 1000);
      }
    }

// Function to show game over screen
    function showGameOverScreen() {
      document.getElementById("game-over").style.display = "flex";
    }

// Function to show win screen
    function showWinScreen() {
      document.getElementById("win").style.display = "flex";
    }

// Function to restart the game
    function restartGame() {
      isGameOver = false;
      isGameWon = false;
      cameras = [false, false, false, false];
      doors = [false, false];
      timeRemaining = 60;

// Reset camera views
      const cameraBtns = document.querySelectorAll(".camera-btn");
      cameraBtns.forEach((btn) => btn.classList.remove("active"));

// Reset door states
      const doorBtns = document.querySelectorAll(".door-btn");
      doorBtns.forEach((btn) => btn.classList.remove("active"));

// Hide game over and win screens
      document.getElementById("game-over").style.display = "none";
      document.getElementById("win").style.display = "none";

// Start the game
      updateGameState();
    }

// Start the game
    updateGameState();
  </script>
</body>
</html>
```