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