Crazy randomness, rainbows, bouncing balls's game

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

No:37525

←

Prev Next

→

Crazy randomness, rainbows, bouncing balls
Developer User17064｜Date and time 24/1/21 4:57:55
Build time 9.933 sec｜Game capacity 3.05KB｜

Script

Sure! Here's a simple game implementing crazy randomness, rainbows, and bouncing balls using JavaScript and pictograms. You can save the following code into a single HTML file and open it in a web browser on your smartphone to play the game.

When you open this HTML file in a web browser on your smartphone, you will see multiple bouncing balls with random sizes and colors moving around the screen. The balls will bounce off the edges of the screen and change direction to create a dynamic and visually appealing effect. Enjoy playing with the crazy bouncing balls!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Crazy Bouncing Balls</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Set canvas dimensions to fit the screen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// Generate a random color in rainbow spectrum
    function getRandomColor() {
      const letters = "0123456789ABCDEF";
      let color = "#";
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

// Ball object
    function Ball(x, y, dx, dy, radius, color) {
      this.x = x;
      this.y = y;
      this.dx = dx;
      this.dy = dy;
      this.radius = radius;
      this.color = color;

// Draw the ball on the canvas
      this.draw = function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
      };

// Update the ball's position and handle collisions
      this.update = function() {
        if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
          this.dx = -this.dx;
        }
        if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
          this.dy = -this.dy;
        }

this.x += this.dx;
        this.y += this.dy;

this.draw();
      };
    }

// Create an array of random bouncing balls
    const balls = [];
    for (let i = 0; i < 10; i++) {
      const radius = Math.random() * 50 + 10; // Random radius between 10 and 60
      const x = Math.random() * (canvas.width - radius * 2) + radius;
      const y = Math.random() * (canvas.height - radius * 2) + radius;
      const dx = Math.random() * 5 - 2.5; // Random velocity on x-axis
      const dy = Math.random() * 5 - 2.5; // Random velocity on y-axis
      const color = getRandomColor();

balls.push(new Ball(x, y, dx, dy, radius, color));
    }

// Game loop
    function updateGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

balls.forEach(function(ball) {
        ball.update();
      });

requestAnimationFrame(updateGame);
    }

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

Enjoy playing with the crazy bouncing balls!