DOTS COLLIDING INTO EACHOTHER's game

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

No:48063

←

Prev Next

→

DOTS COLLIDING INTO EACHOTHER
Developer User19162｜Date and time 24/3/1 8:08:32
Build time 10.989 sec｜Game capacity 2.693KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Dots Colliding Game</title>
<style>
    body {
        text-align: center;
    }
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>

let dots = [];

class Dot {
        constructor(x, y, radius, color, dx, dy) {
            this.x = x;
            this.y = x;
            this.radius = radius;
            this.color = color;
            this.dx = dx;
            this.dy = dy;
        }

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

update() {
            if (this.x + this.dx > canvas.width - this.radius || this.x + this.dx < this.radius) {
                this.dx = -this.dx;
            }

if (this.y + this.dy > canvas.height - this.radius || this.y + this.dy < this.radius) {
                this.dy = -this.dy;
            }

this.x += this.dx;
            this.y += this.dy;
        }
    }

function updateGame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

dots.forEach(dot => {
            dot.draw();
            dot.update();
        });

dots.forEach(dot1 => {
            dots.forEach(dot2 => {
                if (dot1 !== dot2) {
                    let dx = dot1.x - dot2.x;
                    let dy = dot1.y - dot2.y;
                    let distance = Math.sqrt(dx * dx + dy * dy);

if (distance < dot1.radius + dot2.radius) {
                        dot1.dx = -dot1.dx;
                        dot1.dy = -dot1.dy;
                        dot2.dx = -dot2.dx;
                        dot2.dy = -dot2.dy;
                    }
                }
            });
        });

requestAnimationFrame(updateGame);
    }

initializeGame();
    updateGame();
</script>
</body>
</html>