Javascript：敌人不在一条直线上

Question

I am trying to make my first game on javascript, and i ran into this problem... the enemies are not staying a line, after sometime they are starting to separate. is there any solution? where did I go wrong? thanks!

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);

}

Answer 1

The Velocity, is like the position, not a shared property. When your first enemieRight hits the right wall, it toggles velXR, but every following enemieRight has not hit the wall yet. but since they shate the velocity-property, they all turn around, and make a step back, although the didn't hit the wall themself.

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);

Answer 2

I'm assuming that it might have something to do with a possible race conditioning. Your code doesn't anticipate a scenario in which run is being executed again before the last execution was complete.

This can be solved by either replacing setInterval with setTimeout in this manner:

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

Or, the better approach IMO, use requestAnimationFrame which makes sure to run only once per frame, only when the previous frame has finished rendering.