10 balls colliding only for all kinds of users's game

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

No:16999

101

←

Prev Next

→

10 balls colliding only for all kinds of users
Developer User7570｜Date and time 23/9/22 5:51:46
Build time 38.866 sec｜Game capacity 4.34KB｜

Script

Sure, here's a simple game where 10 balls will collide with each other. It is designed for smartphone operation and uses pictograms as asked. The game is implemented as a single HTML file, enclosed in script tags, and written in JavaScript. You can copy the code below and save it as an HTML file to play the game.

Once you save the code as an HTML file and open it in a web browser (on a smartphone or computer), you will see a canvas with 10 balls moving around. The balls will collide with each other and change their directions accordingly. Have fun playing the game!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Collision Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="320" height="480"></canvas>
    <script>
        // Ball object constructor
        function Ball(x, y, radius, dx, dy, color) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.dx = dx;
            this.dy = dy;
            this.color = color;

// Method to draw the ball
            this.draw = function(ctx) {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            };

// Method to update the ball's position
            this.update = function() {
                this.x += this.dx;
                this.y += this.dy;

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;
                }
            };
        }

// Create canvas and get drawing context
        var canvas = document.getElementById('gameCanvas');
        var ctx = canvas.getContext('2d');

// Create ball objects
        var balls = [];
        for (var i = 0; i < 10; i++) {
            var x = Math.random() * (canvas.width - 2 * radius) + radius;
            var y = Math.random() * (canvas.height - 2 * radius) + radius;
            var radius = 20;
            var dx = (Math.random() - 0.5) * 5;
            var dy = (Math.random() - 0.5) * 5;
            var color = getRandomColor();

var ball = new Ball(x, y, radius, dx, dy, color);
            balls.push(ball);
        }

// Function to generate random color
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

// Function to check collision between balls
        function checkCollision(ball1, ball2) {
            var dx = ball1.x - ball2.x;
            var dy = ball1.y - ball2.y;
            var distance = Math.sqrt(dx * dx + dy * dy);
            return distance < ball1.radius + ball2.radius;
        }

// Function to handle collision
        function handleCollision(ball1, ball2) {
            var tempDx = ball1.dx;
            var tempDy = ball1.dy;

ball1.dx = ball2.dx;
            ball1.dy = ball2.dy;

ball2.dx = tempDx;
            ball2.dy = tempDy;
        }

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

// Update and draw balls
            for (var i = 0; i < balls.length; i++) {
                var ball = balls[i];
                ball.update();
                ball.draw(ctx);
            }

// Check collisions
            for (var i = 0; i < balls.length; i++) {
                for (var j = i + 1; j < balls.length; j++) {
                    if (checkCollision(balls[i], balls[j])) {
                        handleCollision(balls[i], balls[j]);
                    }
                }
            }

// Request next animation frame
            requestAnimationFrame(gameLoop);
        }

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