两个圆圈的弹跳JavaScript

这个JavaScript程序是一个游戏，其中有两个圆形对象在一个矩形框中来回弹跳。玩家可以通过点击任意位置来控制其中一个圆形对象，尝试使两个圆形对象相遇。以下是完整的JavaScript代码片段：

// 定义画布和画笔
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 创建两个圆形对象
var circle1 = {x: 100, y: 100, r: 20, vx: 5, vy: 2};
var circle2 = {x: 200, y: 200, r: 20, vx: -3, vy: -4};

// 绘制圆形函数
function drawCircle(circle) {
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();
  ctx.closePath();
}

// 更新圆形位置函数
function updateCircle(circle) {
  circle.x += circle.vx;
  circle.y += circle.vy;

  // 碰撞检测
  if (circle.x - circle.r < 0 || circle.x + circle.r > canvas.width) {
    circle.vx = -circle.vx;
  }

  if (circle.y - circle.r < 0 || circle.y + circle.r > canvas.height) {
    circle.vy = -circle.vy;
  }
}

// 刷新画布函数
function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawCircle(circle1);
  drawCircle(circle2);
  updateCircle(circle1);
  updateCircle(circle2);
}

// 动画循环
setInterval(update, 20);

// 按下鼠标按钮的事件监听器
canvas.addEventListener("mousedown", function(event) {
  circle1.vx = (event.offsetX - circle1.x) / 10;
  circle1.vy = (event.offsetY - circle1.y) / 10;
});

程序说明

首先，我们需要定义画布和画笔对象，这样我们才能在画布上绘制图形。我们随后创建两个圆形对象，每个对象都有初始位置（用x和y属性表示），半径（r属性）和速度（用vx和vy属性表示）。我们在画布上使用drawCircle函数绘制这些圆形对象，并在updateCircle函数中更新圆形对象的位置。

我们还需要检测两个圆形对象的碰撞，这样它们就可以反弹。我们在updateCircle函数中包含了这个碰撞检测代码。现在，我们已经有了绘制圆形、更新圆形位置和检测圆形碰撞的所有必要功能。我们使用setInterval函数设置动画循环以连续绘制和更新圆形对象。

我们希望玩家可以控制其中一个圆形对象，让它移动以试图与另一个圆形对象相遇。我们使用addEventListener函数添加一个mousedown事件监听器，以便每当玩家按下鼠标按钮时调用函数。在处理函数中，我们设置圆形对象的速度，使其指向鼠标单击的位置。最后，我们将整个JavaScript程序包装在一块称为“canvas”的HTML元素中，这样就可以在网页上显示它了。