js通过面向对象编程思想实现小球碰撞的小练习

// 创建一个小球类
class Ball {
    constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.dx = Math.random() * 6 - 3;
        this.dy = Math.random() * 6 - 3;
    }
 
    // 移动小球的方法
    move(width, height) {
        this.x += this.dx;
        this.y += this.dy;
 
        if (this.x - this.radius > width || this.x + this.radius < 0) {
            this.dx = -this.dx;
        }
 
        if (this.y - this.radius > height || this.y + this.radius < 0) {
            this.dy = -this.dy;
        }
    }
 
    // 绘制小球的方法
    draw(context) {
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        context.fillStyle = this.color;
        context.fill();
    }
}
 
// 假设有一个HTML5 canvas元素，ID为'canvas'
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
 
// 创建两个小球
const ball1 = new Ball(50, 50, 10, 'blue');
const ball2 = new Ball(100, 100, 10, 'red');
 
function animate() {
    requestAnimationFrame(animate);
 
    context.clearRect(0, 0, width, height);
 
    ball1.move(width, height);
    ball1.draw(context);
 
    ball2.move(width, height);
    ball2.draw(context);
 
    // 检测小球是否碰撞
    if (Math.hypot(ball1.x - ball2.x, ball1.y - ball2.y) < ball1.radius + ball2.radius) {
        ball2.dx = -ball2.dx;
        ball2.dy = -ball2.dy;
    }
}
 
animate();

这段代码创建了一个小球类，并实现了小球的移动和绘制。在animate函数中，小球的移动和绘制被循环执行，并通过计算检测小球之间的碰撞。如果小球碰撞，碰撞的小球会反弹。这个练习教学了面向对象编程的基本概念，并且增加了一些实际的物理学元素，如速度反弹，在编程教育中是一个常用的概念。