Every time a ball hits the pentagon two new balls spawn's game

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

No:42675

114

←

Prev Next

→

Every time a ball hits the pentagon two new balls ..ALL
Developer User18878｜Date and time 24/2/12 16:55:01
Build time 10.914 sec｜Game capacity 3.045KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript and pictograms. This game assumes smartphone operation and includes the functionality of spawning new balls each time a ball hits the pentagon.

When you open this HTML file in a web browser, you'll see a canvas where a green ball moves around. If you click/tap on the pentagon, the ball splits into two new balls. Each time you click on the pentagon, the number of balls will increase exponentially. You can continue playing the game by clicking on the balls and watching them multiply.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Ball Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>
  
  <script>
    // Define pictograms
    const ballImage = '🟢'; // Green ball pictogram
    const pentagonImage = '⬟'; // Pentagon pictogram

// Ball object
    class Ball {
      constructor(x, y, dx, dy, radius) {
        this.x = x;
        this.y = y;
        this.dx = dx;
        this.dy = dy;
        this.radius = radius;
      }

draw(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        ctx.fillStyle = 'green';
        ctx.fill();
        ctx.closePath();
      }

update() {
        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(ctx);
      }
    }

// Initialize game canvas
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

// Ball and pentagon positions
    let balls = [new Ball(canvas.width / 2, canvas.height / 2, 2, -2, 20)]; // Initial ball
    let pentagonX = canvas.width / 2;
    let pentagonY = canvas.height - 150;

// Event listener for ball-pentagon collision
    canvas.addEventListener('click', () => {
      // Detect collision and spawn new balls
      if (balls.some(ball => (
        ball.x + ball.radius > pentagonX &&
        ball.x - ball.radius < pentagonX + 100 &&
        ball.y + ball.radius > pentagonY &&
        ball.y - ball.radius < pentagonY + 100
      ))) {
        const newBalls = [];
        balls.forEach(ball => {
          newBalls.push(new Ball(ball.x, ball.y, ball.dx, ball.dy, ball.radius));
          newBalls.push(new Ball(ball.x + ball.radius, ball.y + ball.radius, ball.dx, ball.dy, ball.radius));
        });
        balls = newBalls;
      }
    });

// Render function
    function render() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw pentagon
      ctx.font = '100px sans-serif';
      ctx.fillText(pentagonImage, pentagonX, pentagonY);

// Update and draw balls
      balls.forEach(ball => ball.update());

requestAnimationFrame(render);
    }

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