如何添加代码实现小球碰撞墙壁时变为红色？附代码预览资源

假设你的代码里已经有小球的基础属性（位置、速度、半径），按以下步骤修改：

1. 给小球添加颜色属性
   在定义小球的对象里，新增一个color字段，设置初始颜色（比如原来的白色"#fff"）：

   const ball = {
     x: canvas.width / 2,
     y: canvas.height / 2,
     dx: 2,
     dy: -2,
     radius: 10,
     color: "#fff" // 初始颜色
   };
   

2. 修改碰撞检测逻辑，触发颜色变化
   在你检测小球碰撞墙壁的代码块里，当碰撞发生时，把小球的颜色设为红色。如果需要碰撞后自动恢复原颜色，可以用setTimeout延迟恢复：

   function update() {
     // ... 其他更新逻辑
   
     // 左右墙壁碰撞检测
     if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
       ball.dx = -ball.dx;
       // 碰撞时变红
       ball.color = "red";
       // 300毫秒后恢复原颜色（可选）
       setTimeout(() => {
         ball.color = "#fff";
       }, 300);
     }
   
     // 上下墙壁碰撞检测
     if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
       ball.dy = -ball.dy;
       ball.color = "red";
       setTimeout(() => {
         ball.color = "#fff";
       }, 300);
     }
   
     // ... 其他代码
   }
   

3. 修改绘制函数，使用动态颜色
   确保绘制小球时，使用小球的color属性而不是固定值：

   function draw() {
     // ... 清空画布等逻辑
   
     // 绘制小球
     ctx.beginPath();
     ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
     ctx.fillStyle = ball.color; // 这里用ball.color替代固定颜色值
     ctx.fill();
     ctx.closePath();
   
     // ... 其他绘制逻辑
   }
   

这样修改后，小球每次碰到墙壁就会变成红色；如果不需要自动恢复颜色，删掉setTimeout相关代码即可。

内容的提问来源于stack exchange，提问作者Reza Valizadeh