如何实现物体先从右向左移动，抵达左侧后立即反向运动？

原代码碰到左边界就直接停止定时器，没有方向切换逻辑，且移动步长单向随机。要实现往返移动，得给每个物体维护移动方向（速度），碰到边界时反转方向，具体修改如下：

关键改动点 #

• 新增vx数组存储每个物体的移动速度，初始设为向左的随机负值
• 用速度值更新位置，替代原有的单向减法逻辑
• 碰到左/右边界时反转速度方向，同时修正位置防止超出边界
• 移除碰到边界就停止定时器的逻辑，让物体持续移动

修改后的完整代码 #

var tm;
var cars;
var cx;
var vx; // 存储每个物体的移动速度
var gameBegin;

function go() {
    if (gameBegin == 1) return;
    gameBegin = 1;
    cars = new Array();
    for (var i = 0; i < 5; i++) {
        cars[i] = document.getElementById("p" + i);
        cars[i].style.border = "none";
    }
    cx = new Array();
    vx = new Array();
    for (var i = 0; i < 5; i++) {
        cx[i] = 680; // 初始位置在右侧
        // 初始速度：向左的随机值，范围-9到-2
        vx[i] = -Math.floor(Math.random() * 7 + 2);
    }
    tm = window.setInterval(timerGo, 50);
}

function timerGo() {
    for (var i = 0; i < 5; i++) {
        // 用速度更新位置
        cx[i] += vx[i];

        // 碰到左边界，反转方向为向右
        if (cx[i] <= 0) {
            cx[i] = 0; // 修正位置，避免超出左边界
            vx[i] = -vx[i]; // 反转速度方向
            cars[i].style.border = "5px ridge yellow"; // 碰到边界时高亮
        }
        // 碰到右边界，反转方向为向左
        else if (cx[i] >= 680) {
            cx[i] = 680; // 修正位置，避免超出右边界
            vx[i] = -vx[i]; // 反转速度方向
            cars[i].style.border = "none"; // 取消高亮
        }

        // 更新DOM位置
        cars[i].style.left = cx[i] + "px";
    }
}

代码说明 #

• vx数组：每个元素对应物体的移动速度，负值向左、正值向右，随机初始值让各物体移动速度有差异
• 边界处理：碰到边界先修正位置到边界上，再反转速度，避免物体卡在边界外
• 持续运动：移除原代码里的clearInterval逻辑，定时器会持续运行，如需停止可额外添加停止触发逻辑

内容的提问来源于stack exchange，提问作者mr.Satanik ms