Bouncing ball inside of a box, don't always hit the corner's game

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

No:37602

←

Prev Next

→

Bouncing ball inside of a box, don't always hit th..ALL
Developer User17064｜Date and time 24/1/21 6:28:13
Build time 7.236 sec｜Game capacity 2.086KB｜

Script

Sure! Here's an example of a bouncing ball game implemented in a single HTML file:

This code implements a simple bouncing ball game that can be played on a smartphone. The ball bounces inside a box, and the code ensures that the ball doesn't always hit the corner. The ball moves horizontally and vertically with an initial velocity, and when it hits the edges of the box, it bounces back in the opposite direction. The game uses pictograms in the form of a red ball to represent the bouncing object. The ball moves continuously within the boundaries of the box, bouncing off the edges when it hits them. You can try running this code in a web browser to see the bouncing ball game in action.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a bouncing ball game implemented in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid black;
      overflow: hidden;
    }

#ball {
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="ball"></div>
  </div>

var boxWidth = box.offsetWidth - ball.offsetWidth;
      var boxHeight = box.offsetHeight - ball.offsetHeight;

function moveBall() {
        x += vx;
        y += vy;

// Check for collision with edges
        if (x + ball.offsetWidth >= boxWidth || x <= 0) {
          vx *= -1;
        }
        if (y + ball.offsetHeight >= boxHeight || y <= 0) {
          vy *= -1;
        }

// Update ball position
        ball.style.left = x + 'px';
        ball.style.top = y + 'px';
      }

setInterval(moveBall, 10); // Move ball every 10 milliseconds
    });
  </script>
</body>
</html>
```

The game uses pictograms in the form of a red ball to represent the bouncing object. The ball moves continuously within the boundaries of the box, bouncing off the edges when it hits them.

You can try running this code in a web browser to see the bouncing ball game in action.