如何防止 HTML Canvas 中新增弹跳球时旧球位置重置-js教程-PHP中文网

如何防止 HTML Canvas 中新增弹跳球时旧球位置重置

每次点击“添加球”按钮时，旧球被随机重置位置，是因为 balls 数组和物理逻辑被错误地重复初始化；正确做法是将球数组、边界线等全局状态提取到函数外部，仅在 addBall() 中执行新增逻辑。

每次点击“添加球”按钮时，旧球被随机重置位置，是因为 `balls` 数组和物理逻辑被错误地重复初始化；正确做法是将球数组、边界线等全局状态提取到函数外部，仅在 `addball()` 中执行新增逻辑。

问题根源在于原始代码中将核心数据结构（如 balls = []、lines = []）和初始化逻辑（如 create() 调用、mainLoop() 启动）全部封装在 addBall() 函数内部。这意味着每次调用 addBall() 都会重新声明空的 balls 数组、重建 lines 边界、并重跑整个初始化流程——导致已有球对象被丢弃，新球生成时旧球“消失”，视觉上表现为位置随机重置。

✅ 正确的结构组织方式

应严格分离「状态声明」、「初始化」和「增量操作」：

全局状态（只声明一次）：balls、lines、canvas、ctx 等应在最外层作用域定义；
一次性初始化（只执行一次）：边界线 lines 的创建、Canvas 尺寸设置、mainLoop() 启动等，应放在脚本加载后立即执行；
纯增量逻辑（每次调用仅新增）：addBall() 函数内只负责生成一个新球、校验不重叠、推入 balls 数组，不触碰已有球或重置任何状态。

以下是重构后的关键代码结构（ES6 风格，更清晰、更安全）：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

// === 全局状态声明（顶层作用域）===
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 550;

const balls = []; // ✅ 所有球实例持久存在
const lines = []; // ✅ 边界线只需创建一次

// 物理常量
const TAU = Math.PI * 2;
const gravity = 0;
const wallLoss = 1;
const minBallSize = 13;
const maxBallSize = 20;
const velMin = 1;
const velMax = 5;
const maxResolutionCycles = 100;

// 工具函数（避免污染 Math）
const rand = (min, max) => Math.random() * (max - min) + min;
const randInt = (min, max) => Math.floor(Math.random() * (max - min)) + min;

// === 初始化：仅执行一次 ===
function initWalls() {
  const w = canvas.width;
  const h = canvas.height;
  lines.push(new Line(-10, 10, w + 10, 5)); // top
  lines.push(new Line(-10, h - 2, w + 10, h - 10)); // bottom
  lines.push(new Line(10, -10, 4, h + 10)); // left
  lines.push(new Line(w - 3, -10, w - 10, h + 10)); // right
}
initWalls();

// === 核心类定义（ES6 class，语义清晰）===
class Ball {
  constructor(x, y, vx, vy, r = rand(minBallSize, maxBallSize)) {
    this.r = r;
    this.m = (4 / 3) * Math.PI * r ** 3;
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
  }
  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.vy += gravity;
  }
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, TAU);
    ctx.fill();
  }
  doesOverlap(other) {
    const dx = this.x - other.x;
    const dy = this.y - other.y;
    return Math.sqrt(dx * dx + dy * dy)  ball.doesOverlap(b))) {
      balls.push(ball);
      document.querySelector('#ball-count').textContent = balls.length;
      break;
    }
  }
}

// === 主循环：驱动所有球持续更新 ===
function mainLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  resolveCollisions(); // 处理潜在碰撞（时间步进）

  balls.forEach(ball => ball.update());

  // 绘制
  balls.forEach(ball => ball.draw());
  lines.forEach(line => line.draw());

  requestAnimationFrame(mainLoop);
}

// ✅ 启动主循环（全局仅调用一次！）
mainLoop();