JavaScript Canvas游戏：实现玩家平滑边界限制，避免卡顿现象

move() {
    // ... 其他物理更新，如角度、速度、加速度等 ...

    // 尝试在移动前检查边界
    if (this.x < canvas.width - this.width + 3.75 && this.x > this.width + 3.75) {
      this.x += Math.cos(this.angle) * this.vx;
    }
    if (this.y < canvas.height - this.height + 3.75 && this.y > this.height + 3.75) {
      this.y += Math.sin(this.angle) * this.vy;
    }
}

move() {
    this.angle += this.rotv;
    this.rotv *= this.drag;
    this.vx += this.ax;
    this.vy += this.ay;
    this.ax *= this.drag;
    this.ay *= this.drag;
    this.vx *= this.drag;
    this.vy *= this.drag;

    // 1. 正常计算下一帧的位置
    this.x += Math.cos(this.angle) * this.vx;
    this.y += Math.sin(this.angle) * this.vy;

    // 2. 对位置进行裁剪，确保不超出边界
    // Math.min(value, max) 确保 value 不超过 max
    // Math.max(value, min) 确保 value 不低于 min
    this.x = Math.min(this.x, canvas.width - this.width); // 右边界
    this.x = Math.max(this.x, 0 + this.width);            // 左边界

    this.y = Math.min(this.y, canvas.height - this.height); // 下边界
    this.y = Math.max(this.y, 0 + this.height);            // 上边界
}

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var projectileArray = []
var keydown = false

const kbd = {
  ArrowLeft: false,
  ArrowUp: false,
  ArrowRight: false,
  ArrowDown: false,
};

const noHoldDown = {
  Space: false,
}

function Projectile(x, y, speed, direction, duration) {
  Object.assign(this, {
    x,
    y,
    speed,
    direction,
    duration
  });
  this.draw = ctx => {
    ctx.beginPath(); // 确保每次绘制都是新的路径
    ctx.arc(this.x, this.y, 3.75, 0, 2 * Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();
  }
  this.update = ctx => {
    this.x += Math.cos(this.direction) * this.speed;
    this.y += Math.sin(this.direction) * this.speed;
    this.draw(ctx);
    this.duration--;
  }
  this.isDone = () => this.duration <= 0;
}


const ship = {
  angle: 0,
  color: "white",
  x: canvas.width / 2,
  y: canvas.height / 2,
  width: 10, // 假设这是飞船的半宽
  height: 12, // 假设这是飞船的半高
  drag: 0.9,
  accSpeed: 0.025,
  rotSpeed: 0.007,
  rotv: 0,
  ax: 0,
  ay: 0,
  vx: 0,
  vy: 0,
  rotateLeft() {
    this.rotv -= this.rotSpeed;
  },
  rotateRight() {
    this.rotv += this.rotSpeed;
  },
  accelerate() {
    this.ax += this.accSpeed;
    this.ay += this.accSpeed;
  },
  decelerate() {
    this.ax -= this.accSpeed;
    this.ay -= this.accSpeed;
  },
  shoot() {
    let mySpeed = Math.sqrt(this.vx * this.vx + this.vy * this.vy)
    let bullet = new Projectile(this.x, this.y, 3 + mySpeed, this.angle, 500)
    projectileArray.push(bullet);
  },
  move() {
    this.angle += this.rotv;
    this.rotv *= this.drag;
    this.vx += this.ax;
    this.vy += this.ay;
    this.ax *= this.drag;
    this.ay *= this.drag;
    this.vx *= this.drag;
    this.vy *= this.drag;

    // 正常更新位置
    this.x += Math.cos(this.angle) * this.vx;
    this.y += Math.sin(this.angle) * this.vy;

    // 对位置进行裁剪，确保不超出边界
    this.x = Math.min(this.x, canvas.width - this.width);
    this.x = Math.max(this.x, 0 + this.width);

    this.y = Math.min(this.y, canvas.height - this.height);
    this.y = Math.max(this.y, 0 + this.height);

  },
  draw(ctx) {
    ctx.save();
    ctx.lineWidth = 3;
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.beginPath();
    ctx.moveTo(this.height, 0);
    ctx.lineTo(-this.height, this.width);
    ctx.lineTo(-this.height, -this.width);
    ctx.closePath();
    ctx.strokeStyle = this.color;
    ctx.stroke();
    ctx.restore();
  }
};

document.addEventListener("keydown", event => {
  if (event.code in kbd) {
    event.preventDefault();
    kbd[event.code] = true;
  }
});
document.addEventListener("keydown", event => {
  if (event.code in noHoldDown) {
    if (!keydown) {
      keydown = true;
      ship.shoot();
    }
  }
});

document.addEventListener('keyup', event => {
  if (event.code in noHoldDown) {
    keydown = false;
  }
});

document.addEventListener("keyup", event => {
  if (event.code in kbd) {
    event.preventDefault();
    kbd[event.code] = false;
  }
});

(function update() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  const shipActions = {
    ArrowLeft: "rotateLeft",
    ArrowUp: "accelerate",
    ArrowDown: "decelerate",
    ArrowRight: "rotateRight",
  };

  for (const key in shipActions) {
    if (kbd[key]) {
      ship[shipActions[key]]();
    }
  }
  ship.move();
  ship.draw(ctx);
  for (var i = 0; i < projectileArray.length; i++) {
    let bullet = projectileArray[i];
    bullet.update(ctx)
  }
  projectileArray = projectileArray.filter(bullet => !bullet.isDone());
  requestAnimationFrame(update);
})();

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}