Cube bouncing in a box, random position, not outside the box's game

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

No:37854

←

Prev Next

→

Cube bouncing in a box, random position, not outsi..ALL
Developer User17064｜Date and time 24/1/21 18:23:12
Build time 8.95 sec｜Game capacity 2.166KB｜

Script

Sure! Here's an example of a simple game where a cube bounces around inside a box using JavaScript and pictograms:

In this game, a cube represented by a red square (🔺) moves randomly inside a box. The cube will bounce off the boundaries of the box to stay within its limits. The game runs automatically once the HTML file is opened in a browser and will continue until the user closes their browser or reloads the page.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game where a cube bounces around inside a box using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Bouncing Cube Game</title>
  <style>
    #box {
      width: 400px;
      height: 400px;
      border: 2px solid black;
      position: relative;
      margin: 20px auto;
    }
    #cube {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="cube"></div>
  </div>

// Interval in milliseconds for cube movement
    const interval = 10;

// Box dimensions
    const boxWidth = 400;
    const boxHeight = 400;

// Cube dimensions
    const cubeSize = 50;
    const cubeSpeedX = 3; // Horizontal speed
    const cubeSpeedY = 3; // Vertical speed

// Get the cube element
    const cubeElement = document.getElementById('cube');

// Set initial cube position
    let posX = Math.random() * (boxWidth - cubeSize);
    let posY = Math.random() * (boxHeight - cubeSize);
    cubeElement.style.top = posY + 'px';
    cubeElement.style.left = posX + 'px';

// Function to update the cube position
    function moveCube() {
      posX += cubeSpeedX;
      posY += cubeSpeedY;

// Check collision with box boundaries
      if (posX < 0 || posX > (boxWidth - cubeSize)) {
        cubeSpeedX *= -1; // Reverse horizontal direction
      }
      if (posY < 0 || posY > (boxHeight - cubeSize)) {
        cubeSpeedY *= -1; // Reverse vertical direction
      }

// Update cube position
      cubeElement.style.top = posY + 'px';
      cubeElement.style.left = posX + 'px';
    }

// Start cube movement
    setInterval(moveCube, interval);
  </script>
</body>
</html>
```