Question

我正试图在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);

}

Answer 1

速度，就像位置，而不是共享属性。当你的第一个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);

Answer 2

我假设它可能与可能的种族调节有关。您的代码没有预料到在上次执行完成之前再次执行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);

或者，更好的方法IMO，使用requestAnimationFrame，确保每帧只运行一次，只有当前一帧完成渲染时才会运行。

Javascript：敌人不是直线

2 个答案: