Cube bouncing in a box, random position's game

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

No:37852

←

Prev Next

→

Cube bouncing in a box, random position
Developer User17064｜Date and time 24/1/21 18:21:38
Build time 9.083 sec｜Game capacity 2.433KB｜

Script

Sure, here's an example of a game where a cube bounces within a box:

In this game, a red cube is represented by a `<div>` element and it bounces within a square box. The cube's initial position is set randomly within the box. It moves by updating its position in small increments at regular intervals using a game loop implemented with `setInterval`. The cube will bounce off the edges of the box, reversing its direction when a collision occurs. Please note that the code snippet provided above should be saved as an HTML file and opened in a web browser to play the game.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a game where a cube bounces within a box:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Cube Bouncing Game</title>
    <style>
      #box {
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid black;
      }

#cube {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: red;
      }
    </style>
  </head>

// Get the box dimensions
      const boxWidth = document.getElementById("box").offsetWidth;
      const boxHeight = document.getElementById("box").offsetHeight;

// Set initial position of the cube randomly within the box
      const initialX = Math.floor(Math.random() * (boxWidth - 50));
      const initialY = Math.floor(Math.random() * (boxHeight - 50));
      cube.style.left = initialX + "px";
      cube.style.top = initialY + "px";

// Set initial direction and speed of the cube
      let directionX = 1;
      let directionY = 1;
      const speed = 2;

// Update the position of the cube
      function updatePosition() {
        let currentX = parseInt(cube.style.left);
        let currentY = parseInt(cube.style.top);

// Reverse direction if cube hits the edges of the box
        if (currentX <= 0 || currentX >= boxWidth - 50) {
          directionX *= -1;
        }

if (currentY <= 0 || currentY >= boxHeight - 50) {
          directionY *= -1;
        }

// Update cube position
        currentX += speed * directionX;
        currentY += speed * directionY;

cube.style.left = currentX + "px";
        cube.style.top = currentY + "px";
      }

// Start the game loop
      setInterval(updatePosition, 10);
    </script>
  </body>
</html>
```

Please note that the code snippet provided above should be saved as an HTML file and opened in a web browser to play the game.