Every time a ball hits the box 2 new balls appear's game

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

No:42673

128

←

Prev Next

→

Every time a ball hits the box 2 new balls appear
Developer User18878｜Date and time 24/2/12 16:49:40
Build time 10.614 sec｜Game capacity 3.229KB｜

Script

Sure! Here's an example of a simple game where balls appear when they hit a box. The game is implemented as a single HTML file enclosed in script tags:

In this game, balls will appear on the canvas. Whenever a ball hits the box, two new balls will appear. The balls move around the canvas and bounce off the walls. The game uses basic canvas drawing techniques to render the objects and handles collision detection. You can play the game by running the HTML file in a web browser, preferably on a smartphone.

←

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 balls appear when they hit a box. The game is implemented as a single HTML file enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Ball Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="300" height="400"></canvas>

// Variables to track the box position and size
    let boxX = 100;
    let boxY = 50;
    const boxWidth = 100;
    const boxHeight = 100;

// Array to hold the balls
    let balls = [];

// Function to create a new ball object with random position and velocity
    function createBall() {
      const ball = {
        x: Math.random() * (canvas.width - 20), // Random x position
        y: Math.random() * (canvas.height - 20), // Random y position
        dx: Math.random() * 4 - 2, // Random x velocity between -2 and 2
        dy: Math.random() * 4 - 2, // Random y velocity between -2 and 2
        radius: 10 // Ball radius
      };
      balls.push(ball);
    }

// Function to update game logic and render the game
    function gameLoop() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the box
      ctx.fillRect(boxX, boxY, boxWidth, boxHeight);

// Draw the balls
      balls.forEach(function(ball) {
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fillStyle = "#FF0000";
        ctx.fill();
        ctx.closePath();
      });

// Move the balls and check for collision with the box
      balls.forEach(function(ball, index) {
        ball.x += ball.dx;
        ball.y += ball.dy;

// Check collision with walls
        if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
          ball.dx *= -1;
        }
        if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
          ball.dy *= -1;
        }

// Check collision with the box
        if (
          ball.x + ball.radius > boxX &&
          ball.x - ball.radius < boxX + boxWidth &&
          ball.y + ball.radius > boxY &&
          ball.y - ball.radius < boxY + boxHeight
        ) {
          // Create two new balls
          createBall();
          createBall();

// Remove the current ball
          balls.splice(index, 1);
        }
      });

// Call the game loop recursively
      requestAnimationFrame(gameLoop);
    }

// Start the game by creating initial balls
    createBall();
    createBall();

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