10 never ending bouncing balls making a sound's game

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

No:37519

←

Prev Next

→

10 never ending bouncing balls making a sound
Developer User17064｜Date and time 24/1/21 4:54:01
Build time 10.711 sec｜Game capacity 3.13KB｜

Script

Sure! Here's an example of a game with 10 never-ending bouncing balls that make a sound. The game will be implemented as a single HTML file using JavaScript and enclosed in script tags. Since the game is designed for smartphone operation, we'll use pictograms to represent the balls.

Please note that the sounds used in the game should exist in the same directory as the HTML file, and their filenames should be updated accordingly in the `ballSounds` array.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

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

// Define ball properties
        const ballRadius = 20;
        const ballColors = ['red', 'blue', 'green', 'orange', 'purple', 'yellow', 'pink', 'cyan', 'magenta', 'lime'];
        const ballSounds = ['sound1.mp3', 'sound2.mp3', 'sound3.mp3', 'sound4.mp3', 'sound5.mp3', 'sound6.mp3', 'sound7.mp3', 'sound8.mp3', 'sound9.mp3', 'sound10.mp3'];

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

// Create the balls
        for (let i = 0; i < 10; i++) {
            const ball = {
                x: Math.random() * (canvas.width - ballRadius * 2) + ballRadius,
                y: Math.random() * (canvas.height - ballRadius * 2) + ballRadius,
                dx: (Math.random() - 0.5) * 2,
                dy: (Math.random() - 0.5) * 2,
                color: ballColors[i % ballColors.length],
                sound: new Audio(ballSounds[i % ballSounds.length])
            };

balls.push(ball);
        }

// Function to draw the balls on the canvas
        function drawBalls() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

balls.forEach(ball => {
                ctx.beginPath();
                ctx.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2);
                ctx.fillStyle = ball.color;
                ctx.fill();
                ctx.closePath();
            });
        }

// Function to update the position of the balls
        function updateBalls() {
            balls.forEach(ball => {
                ball.x += ball.dx;
                ball.y += ball.dy;

// Check for collision with canvas edges
                if (ball.x + ballRadius > canvas.width || ball.x - ballRadius < 0) {
                    ball.dx *= -1;
                    ball.sound.play();
                }

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

// Function to animate the game
        function gameLoop() {
            drawBalls();
            updateBalls();

requestAnimationFrame(gameLoop);
        }

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

Please note that the sounds used in the game should exist in the same directory as the HTML file, and their filenames should be updated accordingly in the `ballSounds` array.