Bouncing ball but it duplicates every bounce's game

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

No:46686

←

Prev Next

→

Bouncing ball but it duplicates every bounce
Developer User17064｜Date and time 24/2/25 19:41:11
Build time 8.6 sec｜Game capacity 2.031KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Duplicating Bouncing Ball Game</title>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

let ball = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        size: 20,
        speedX: 5,
        speedY: 5,
        color: 'blue'
    };

let balls = [ball];

function drawBalls() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        balls.forEach((b) => {
            ctx.beginPath();
            ctx.arc(b.x, b.y, b.size, 0, Math.PI * 2);
            ctx.fillStyle = b.color;
            ctx.fill();
            ctx.closePath();
        });
    }

function update() {
        for (let i = 0; i < balls.length; i++) {
            balls[i].x += balls[i].speedX;
            balls[i].y += balls[i].speedY;

if (balls[i].x + balls[i].size > canvas.width || balls[i].x - balls[i].size < 0) {
                balls[i].speedX *= -1;
                balls.push({
                    x: balls[i].x,
                    y: balls[i].y,
                    size: balls[i].size,
                    speedX: balls[i].speedX * -1,
                    speedY: balls[i].speedY,
                    color: 'red'
                });
            }

if (balls[i].y + balls[i].size > canvas.height || balls[i].y - balls[i].size < 0) {
                balls[i].speedY *= -1;
                balls.push({
                    x: balls[i].x,
                    y: balls[i].y,
                    size: balls[i].size,
                    speedX: balls[i].speedX,
                    speedY: balls[i].speedY * -1,
                    color: 'green'
                });
            }
        }
    }

function gameLoop() {
        drawBalls();
        update();
        requestAnimationFrame(gameLoop);
    }

gameLoop();
</script>
</body>
</html>