A square walking in a box and moves by itself but it gets creepier every 5 seconds, every 5 seconds turns the background 5% darker, don't move fast's game

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

No:37622

←

Prev Next

→

A square walking in a box and moves by itself but ..ALL
Developer User17064｜Date and time 24/1/21 6:41:45
Build time 9.198 sec｜Game capacity 2.837KB｜

Script

Sure! Here's an example of a game where a square moves within a box using JavaScript. The background gradually becomes darker every 5 seconds, creating a creepy effect. This implementation is written as a single HTML file, enclosed in script tags.

In the above implementation, the game starts automatically when the HTML page is loaded. The square moves randomly within the box, changing its position every 5 seconds. Additionally, the background color of the box gradually becomes darker every 5 seconds, starting from 5% darker and increasing by 5% with each interval. Please note that this implementation is a basic example and can be further enhanced with additional features, visuals, or game mechanics based on your requirements.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
<style>
  #gameBox {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    overflow: hidden;
  }
  
  #gameSquare {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: blue;
  }
</style>
</head>
<body>
  <div id="gameBox">
    <div id="gameSquare"></div>
  </div>
  
  <script>
    // Variables to store square position and box dimensions
    var posX = 0;
    var posY = 0;
    var boxWidth = 300;
    var boxHeight = 300;
    
    // Variable to store darkness level
    var darknessLevel = 0;
    
    // Function to move square within the box
    function moveSquare() {
      // Randomly select a direction to move: 0 - up, 1 - right, 2 - down, 3 - left
      var direction = Math.floor(Math.random() * 4);
      
      // Update square position based on the selected direction
      switch (direction) {
        case 0: // Move up
          posY = Math.max(posY - 50, 0); // Restrict movement within the box
          break;
        case 1: // Move right
          posX = Math.min(posX + 50, boxWidth - 50); // Restrict movement within the box
          break;
        case 2: // Move down
          posY = Math.min(posY + 50, boxHeight - 50); // Restrict movement within the box
          break;
        case 3: // Move left
          posX = Math.max(posX - 50, 0); // Restrict movement within the box
          break;
      }
      
      // Update square position on the screen
      document.getElementById('gameSquare').style.left = posX + 'px';
      document.getElementById('gameSquare').style.top = posY + 'px';
    }
    
    // Function to darken the background
    function darkenBackground() {
      if(darknessLevel < 95) {
        darknessLevel += 5;
      }
      document.getElementById('gameBox').style.backgroundColor = `hsl(0, 0%, ${100 - darknessLevel}%)`;
    }
    
    // Start the game
    setInterval(moveSquare, 5000); // Move square every 5 seconds
    setInterval(darkenBackground, 5000); // Darken background every 5 seconds
  </script>
</body>
</html>
```

Please note that this implementation is a basic example and can be further enhanced with additional features, visuals, or game mechanics based on your requirements.