JavaScript如何实现canvas内方块碰到右边界后反向移动

实现方块往返移动的解决方案 #

核心逻辑是新增速度变量控制移动方向，碰到边界时反转速度正负值即可，同时要注意方块自身有宽度，需要避免方块整体跑出画布后才触发反弹。

完整修改后代码 #

var canvas = document.querySelector("canvas");
var canvasCT = canvas.getContext("2d");
var x = 50;
// 新增速度变量：正数为向右移动，负数为向左移动
var speed = 5;
// 提前定义方块宽度、画布宽度，后续修改参数更方便
var rectWidth = 100;
var canvasWidth = canvas.width;

function draw() {
    canvas.width = canvas.width;
    canvasCT.fillStyle = "blue";
    canvasCT.fillRect(x, 50, rectWidth, 100);
}

function run() {
    draw();
    x += speed;
    // 右边界判断：方块右侧碰到画布边缘时反向
    if (x + rectWidth > canvasWidth) {
        // 重置x到刚好贴边的位置，避免高速移动时方块卡出边界
        x = canvasWidth - rectWidth;
        speed = -speed;
    }
    // 左边界判断：方块左侧碰到画布边缘时反向
    if (x < 0) {
        x = 0;
        speed = -speed;
    }
}
setInterval(run, 10);

逻辑说明 #

如果你需要硬编码画布宽度为1000，直接把代码中的canvasWidth替换为1000即可，上方写法适配任意canvas宽度，复用性更强。

• 速度为正数时x持续增加，方块向右移动，当方块右侧边缘超出画布宽度时，速度改为负数，x开始减少，方块向左移动
• x小于0时速度再次改为正数，方块恢复向右移动，循环形成往返效果
• 边界处的x重置逻辑是为了避免速度数值过大时，单次移动导致方块超出边界出现抖动问题

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