ボールが壁に当たると同じ性質のボールが追加される's game

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

No:36797

128

←

Prev Next

→

ボールが壁に当たると同じ性質のボールが追加される
Developer User4403｜Date and time 24/1/18 11:20:02
Build time 13.075 sec｜Game capacity 3.483KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bouncing Balls</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Ball properties
        const initialBallSpeed = 2;
        const maxBallSpeed = 4;
        const ballRadius = 30;
        const ballColors = ['🟢', '🔴', '🔵', '🟡', '🟠'];

// Set up an array to store the balls
        let balls = [];

// Function to create a new ball
        function createBall(x, y, dx, dy, color) {
            balls.push({
                x: x,
                y: y,
                dx: dx,
                dy: dy,
                color: color
            });
        }

// Function to handle collision with walls
        function handleWallCollision(ball) {
            if (ball.x - ballRadius < 0 || ball.x + ballRadius > canvas.width) {
                ball.dx *= -1;
            }

if (ball.y - ballRadius < 0 || ball.y + ballRadius > canvas.height) {
                ball.dy *= -1;
            }
        }

// Function to update ball positions
        function updatePositions() {
            balls.forEach(ball => {
                ball.x += ball.dx;
                ball.y += ball.dy;
                handleWallCollision(ball);
            });
        }

// Function to draw balls on the canvas
        function drawBalls() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            balls.forEach(ball => {
                ctx.font = "30px Arial";
                ctx.fillText(ball.color, ball.x - ballRadius, ball.y + ballRadius);
            });
        }

// Function to increase the number of balls on wall collision
        function handleCollision() {
            balls.forEach(ball => {
                balls.forEach(otherBall => {
                    if (ball !== otherBall && Math.abs(ball.x - otherBall.x) < 2 * ballRadius && Math.abs(ball.y - otherBall.y) < 2 * ballRadius) {
                        const dx = ball.x > otherBall.x ? 1 : -1;
                        const dy = ball.y > otherBall.y ? 1 : -1;

if (ball.dx * dx < maxBallSpeed) {
                            ball.dx += dx;
                        }
                        if (ball.dy * dy < maxBallSpeed) {
                            ball.dy += dy;
                        }
                        createBall(otherBall.x, otherBall.y, -dx, -dy, otherBall.color);
                    }
                });
            });
        }

// Function to animate the game
        function animate() {
            updatePositions();
            drawBalls();
            handleCollision();
            requestAnimationFrame(animate);
        }

// Handle touch events
        canvas.addEventListener('touchstart', function(event) {
            event.preventDefault();
            const touch = event.touches[0];
            const color = ballColors[Math.floor(Math.random() * ballColors.length)];
            createBall(touch.clientX, touch.clientY, initialBallSpeed, initialBallSpeed, color);
        });

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