嘿，这个问题我做类似点触式Canvas游戏时也踩过坑！核心原因就是你现在把角色的世界位置和屏幕滚动偏移混在同一个x属性里修改了——父类的滚动逻辑在改this.x，子类的角色移动逻辑也在改this.x，两者互相拉扯自然就会出现抖动。

咱们的解决方案是拆分坐标体系：把角色的位置分成「世界坐标」（角色在游戏世界里的真实位置，不受屏幕滚动影响）和「屏幕坐标」（角色最终在Canvas上绘制的位置，由世界坐标加上屏幕滚动偏移计算得出）。这样滚动和角色移动就各管各的，不会互相干扰了。

修改后的完整代码 #

1. 基础鼠标事件与全局状态 #

// 全局鼠标状态，统一管理避免重复绑定
const mouseState = {
  held: false,
  x: 0,
  initialX: 0
};

// 统一绑定鼠标事件
function initMouseEvents() {
  window.addEventListener('mousedown', (e) => {
    mouseState.held = true;
    mouseState.initialX = e.clientX;
    mouseState.x = e.clientX;
  });

  window.addEventListener('mouseup', (e) => {
    mouseState.held = false;
  });

  window.addEventListener('mousemove', (e) => {
    mouseState.x = e.clientX;
  });
}

initMouseEvents();

2. 场景滚动模块（维护屏幕偏移） #

// 滚动管理器，单独维护屏幕滚动偏移，不再修改角色位置
const sceneScroll = {
  screenOffsetX: 0, // 屏幕相对于世界原点的偏移量
  initialOffsetX: 0, // 拖动开始时的偏移量

  // 处理滚动逻辑
  updateScroll() {
    if (mouseState.held) {
      // 计算拖动的距离，更新屏幕偏移
      const dragDelta = mouseState.x - mouseState.initialX;
      this.screenOffsetX = this.initialOffsetX + dragDelta;
    }
  },

  // 初始化滚动的鼠标事件绑定
  initScrollEvents() {
    const that = this;
    window.addEventListener('mousedown', () => {
      // 拖动开始时记录当前的屏幕偏移
      that.initialOffsetX = that.screenOffsetX;
    });
  }
};

sceneScroll.initScrollEvents();

3. 角色模块（基于世界坐标移动） #

function Character() {
  this.speed = 2;
  this.worldX = 0; // 角色的世界坐标（真实位置，不受滚动影响）
  this.targetWorldX = null; // 目标点的世界坐标
  this.width = 32; // 角色宽度，用于计算中心点
}

Character.prototype = {
  // 处理点击目标的输入逻辑
  initInput() {
    const that = this;
    window.addEventListener('mouseup', (e) => {
      // 把点击的屏幕坐标转换成世界坐标：屏幕坐标 - 屏幕偏移
      const clickScreenX = e.clientX;
      that.targetWorldX = clickScreenX - sceneScroll.screenOffsetX;
    });
  },

  // 更新角色移动逻辑（只修改世界坐标）
  update() {
    if (this.targetWorldX === null) return;

    const characterCenterX = this.worldX + this.width / 2;

    // 向右移动（基于世界坐标判断）
    if (characterCenterX < this.targetWorldX) {
      this.worldX += this.speed;
    }
    // 向左移动
    else if (characterCenterX > this.targetWorldX) {
      this.worldX -= this.speed;
    }
    // 到达目标后清除目标
    else {
      this.targetWorldX = null;
    }
  },

  // 绘制角色（计算屏幕坐标：世界坐标 + 屏幕偏移）
  draw(ctx) {
    const screenX = this.worldX + sceneScroll.screenOffsetX;
    // 这里假设ctx是Canvas上下文，绘制逻辑示例
    ctx.fillStyle = '#ff0000';
    ctx.fillRect(screenX, 100, this.width, 64);
  }
};

// 初始化角色
const player = new Character();
player.initInput();

4. 游戏主循环（统一更新和绘制） #

function gameLoop(ctx) {
  // 1. 清空画布
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  // 2. 更新场景滚动
  sceneScroll.updateScroll();

  // 3. 更新角色
  player.update();

  // 4. 绘制角色
  player.draw(ctx);

  // 循环调用
  requestAnimationFrame(() => gameLoop(ctx));
}

// 启动游戏循环（假设你有一个id为gameCanvas的画布）
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
gameLoop(ctx);

为什么这样改能解决抖动？ #

1. 职责分离：场景滚动只维护screenOffsetX（屏幕相对于世界的偏移），角色移动只维护worldX（角色在世界里的真实位置），两者不再修改同一个变量。
2. 坐标转换清晰：点击时把屏幕坐标转成世界坐标作为目标，角色移动完全基于世界坐标，滚动只在绘制时影响最终显示位置——相当于角色在固定的世界里走，屏幕只是“镜头”在移动，自然不会有抖动。
3. 统一事件管理：把鼠标状态统一放在mouseState里，避免重复绑定事件导致的逻辑混乱。

内容的提问来源于stack exchange，提问作者Magdi Gamal