Javascript：敌人不是一条直线

我试图在javascript上制作我的第一个游戏，我遇到了这个问题。。。敌人没有守住阵脚，过了一段时间他们就开始分离了。有什么解决办法吗？我哪里出错了？谢谢

window.onload = function game() {

    var canvas = document.createElement('canvas'),
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);

    canvas.width = 700;
    canvas.height = 500;

    var enemieLeft =
        [{ "id": "enemie1", "x": 660, "y": 75, "w": 40, "h": 40 },
        { "id": "enemie3", "x": 660, "y": 225, "w": 40, "h": 40 },
        { "id": "enemie5", "x": 660, "y": 375, "w": 40, "h": 40 }];

    var enemieRight =
        [{ "id": "enemie2", "x": 10, "y": 150, "w": 40, "h": 40 },
        { "id": "enemie4", "x": 10, "y": 300, "w": 40, "h": 40 },
        { "id": "enemie6", "x": 10, "y": 450, "w": 40, "h": 40 }];

    var velXR = 6;
    var velXL = 6;

    function eRenderR() {
        for (var i = 0; i < enemieRight.length; i++) {
            var EnR = enemieRight[i];
            ctx.fillStyle = "black";
            ctx.fillRect(EnR.x, EnR.y, EnR.w, EnR.h);
            EnR.x += velXR;
            if (EnR.x >= 660) {
                velXR -= 6;
            }
            else if (EnR.x <= 9) {
                velXR += 6;
            }
        }
    }

    function eRenderL() {
        for (var i = 0; i < enemieLeft.length; i++) {
            var EnL = enemieLeft[i];
            ctx.fillStyle = "black";
            ctx.fillRect(EnL.x, EnL.y, EnL.w, EnL.h);
            EnL.x -= velXL;
            if (EnL.x <= 10) {
                velXL -= 6;
            }
            else if (EnL.x >= 661) {
                velXL += 6;
            }
        }
    }

    function run() {
        ctx.save();
        ctx.clearRect(0, 0, 700, 500);
        eRenderL();
        eRenderR();
        ctx.restore();
    }
    var runGame = setInterval(run, 10);

}

window.onload=函数游戏（）{
var canvas=document.createElement（'canvas'），
ctx=canvas.getContext（“2d”）；
document.body.appendChild（画布）；
画布宽度=700；
高度=500；
左心室=
[{“id”：“enemie1”，“x”：660，“y”：75，“w”：40，“h”：40}，
{“id”：“enemie3”，“x”：660，“y”：225，“w”：40，“h”：40}，
{“id”：“enemie5”，“x”：660，“y”：375，“w”：40，“h”：40}]；
var enemieRight=
[{“id”：“enemie2”，“x”：10，“y”：150，“w”：40，“h”：40}，
{“id”：“enemie4”，“x”：10，“y”：300，“w”：40，“h”：40}，
{“id”：“enemie6”，“x”：10，“y”：450，“w”：40，“h”：40}]；
var-velXR=6；
var-velXL=6；
函数eRenderR（）{
对于（变量i=0；i=660）{
velXR-=6；
}
else if（EnR.x我假设这可能与可能的比赛条件有关。您的代码没有预料到在最后一次执行完成之前再次执行
run
的场景

可以通过以下方式将
setInterval
替换为
setTimeout
来解决此问题：

function run(){
    ctx.save();
    ctx.clearRect(0, 0, 700, 500);
    eRenderL();
    eRenderR();
    ctx.restore();
    runGame = setTimeout(run,10);
}
var runGame = setTimeout(run,10);

或者，更好的方法是，使用它确保每帧仅运行一次，仅在前一帧完成渲染时运行。
速度类似于位置，而不是共享属性。当您的第一个enemieRight击中右侧墙时，它会切换velXR，但随后的每个enemieRight尚未击中墙。但是当他们破坏了速度特性时，他们都转过身，后退一步，尽管他们自己没有撞到墙

var canvas = document.createElement('canvas');
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

canvas.width = 700;
canvas.height = 500;

var enemies = [
    {"id": "enemie1", "x":660, "y":75,"w":40,"h":40, vx: -6},
    {"id": "enemie3", "x":660, "y":225,"w":40,"h":40, vx: -6},
    {"id": "enemie5", "x":660,"y":375,"w":40,"h":40, vx: -6},
    {"id": "enemie2","x":10,"y":150,"w":40,"h":40, vx: 6},
    {"id": "enemie4","x":10,"y":300,"w":40,"h":40, vx: 6},
    {"id": "enemie6","x":10,"y":450,"w":40,"h":40, vx: 6}
];

function runEnemy(enemy){
    hitTest(enemy);
    move(enemy);
    render(enemy);
}

function move(enemy){
    enemy.x += enemy.vx;
}

function hitTest(enemy){
    if(enemy.x > 660 || enemy.x < 9)
        enemy.vx = -enemy.vx;
}

function render(enemy){
    ctx.fillStyle = "black";
    ctx.fillRect(enemy.x, enemy.y, enemy.w, enemy.h);
}

function run(){ 
    ctx.save();
    ctx.clearRect(0, 0, 700, 500);
    enemies.forEach(runEnemy);
    ctx.restore();
}

var runGame = setInterval(run,10);

var canvas=document.createElement（'canvas'）；
ctx=canvas.getContext（“2d”）；
document.body.appendChild（画布）；
画布宽度=700；
高度=500；
变量=[
{“id”：“enemie1”，“x”：660，“y”：75，“w”：40，“h”：40，vx:-6}，
{“id”：“enemie3”，“x”：660，“y”：225，“w”：40，“h”：40，vx:-6}，
{“id”：“enemie5”，“x”：660，“y”：375，“w”：40，“h”：40，vx:-6}，
{“id”：“enemie2”，“x”：10，“y”：150，“w”：40，“h”：40，vx:6}，
{“id”：“enemie4”，“x”：10，“y”：300，“w”：40，“h”：40，vx:6}，
{“id”：“enemie6”，“x”：10，“y”：450，“w”：40，“h”：40，vx:6}
];
运行敌人（敌人）的功能{
打击（敌人）；
移动（敌人）；
渲染（敌人）；
}
功能移动（敌人）{
敌方.x+=敌方.vx；
}
功能测试（敌人）{
如果（敌方x>660 | |敌方x<9）
敌方.vx=-敌方.vx；
}
功能渲染（敌人）{
ctx.fillStyle=“黑色”；
ctx.fillRect（敌方.x，敌方.y，敌方.w，敌方.h）；
}
函数run（）{
ctx.save（）；
ctx.clearRect（0,0700500）；
敌人。forEach（run敌军）；
ctx.restore（）；
}
var runGame=setInterval（运行，10）；
也许可以将EnR.x+=velXR；和EnL.x+=velXL；放在各自for循环的末尾？如果有一个JSFiddle@Someone我不明白？你想让我把EnR.x+=velXR放在else if语句之后吗？是的，这就是我的意思。我没有足够的代码知道它是否能工作，但请尝试一下。@我尝试过的人没有工作，但谢谢