javascript - 简单的 Javascript 游戏 : Possible object array error

Question

我正在构建一个小型 JavaScript 游戏，但在查看了在线教程和诸如此类的东西之后，它就是不适合我。为了给您省去一些麻烦，以下是我认为可能出现问题的部分(实际问题在下面有更多解释)。

它现在在一个非常基本的循环上运行，我有一个数组来保存玩家射击时的 bolt :

var playerBolts=new Array(); //Holds all the bolt objects that the player shoots  

setInterval(function(){
    updateGame(); 
    drawGame();
},25);

这是玩家射击时创建的 bolt 对象。

function bolt(facing,playerX,playerY){ //The bolt object is shot from the player's current position
    this.facingLeft=facing; //The direction at which the bolt moves, if left, true
    this.x=playerX; //The x position of the bolt
    this.y=playerY; //The y position of the bolt
    if(facingLeft==true){ 
        this.xSpeed=-3; //The horizontal speed at which the bolt is moving
    }
    else if (facingLeft==false){
        this.xSpeed=3;  
    }
    this.ySpeed=0; //The vertical speed at which the bolt is moving
    this.W=3; //The width of the bolt's model
    this.H=3; //The height of the bolt's model
    this.color="red"; //The color of the bolt's model
    this.update=update; 
    function update(){ //Updates the bolt's properties
        this.x=this.x+this.xSpeed;
        this.y=this.y+this.ySpeed;
    }       
    this.draw=draw;
    function draw(){ //Draws the bolt's model to the canvas
        context.fillStyle=this.color;
        context.fillRect(this.x, this.y, this.W, this.H);
    }
}

当“玩家”射击时，调用玩家对象的 shootBolt 方法:

function player(){ //The player object
    this.facingLeft=true; //If the player's character is facing left, true
    this.x=100; //The x position of the player
    this.y=100; //The y position of the player
    this.shootBolt=shootBolt;
    function shootBolt(){ //Shoots a bolt, creating a new bolt object and adding it to the playerBolts array       
      playerBolts.push(bolt(this.facingLeft,this.x,this.y));
    }
}

问题是下一个 bolt 在接下来的每一次射击中都会变得更快。你开的越多，他们跑得越快。此外，如果快速发射，应该可以看到多发 bolt ，但每次射击时，前一发都会消失。

现在游戏循环更新和绘制函数。我用过一个 for

function updateGame(){ //The main update phase
    player1.update(); //Updates the player's properties
    playerBolts.forEach(function(bolt){ //Updates all active bolts's properties
        this.update();
    });
}
function drawGame(){ //The main drawing phase
    context.fillStyle="white"; 
    context.fillRect(0,0,canvasW,canvasH); //Clears the canvas for the next frame
    player1.draw(); //Draws the player
    playerBolts.forEach(function(bolt){ //Draws all bolt's model to the canvas
        this.draw();
    });     
}

所以是的...我认为这可能与我使用“推”将对象添加到数组的方式有关，即“forEach”方法(尽管我也尝试过 for 循环)。我不知道我做错了什么，我已经查找了资源，这应该行得通吗？如果没有足够的信息，我总是可以发布整个内容(只有 119 行记录良好)。

谢谢。

Answer 1

我怀疑您对 this 有疑问。您正在通过调用构建 bolt 对象:

bolt(this.facingLeft, this.x, this.y)

但是，在 bolt 函数内部，您使用 this 就好像它指的是新创建的 bolt 一样。不幸的是，事实并非如此。尝试像这样构建 bolt :

new bolt(this.facingLeft, this.x, this.y)

如果你那样做，那么 bolt 中的 this 指的是新创建的对象。

此外，这个this也可能是错误的:

playerBolts.forEach(function(bolt){ //Draws all bolt's model to the canvas
    this.draw();
});

由于奇怪的原因，循环函数中的 this 可能是也可能不是您的 bolt (参见 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach )。为了安全起见，试试这个:

playerBolts.forEach(function(bolt){ //Draws all bolt's model to the canvas
    bolt.draw();
});

顺便说一下，new 问题很常见；我养成了制作构造函数的习惯，因此它们可以在有或没有 new 的情况下工作。为此，不使用 this，只需让 bolt 返回一个新对象，而不是操作 this。因为 JS 的 this 非常困惑，我发现这是一个更好的方法:

function bolt(facing,playerX,playerY){ //The bolt object is shot from the player's current position
    var theBolt = {
        facingLeft: facing,           //The direction at which the bolt moves, if left, true,
        x: playerX,                   //The x position of the bolt
        y: playerY,                   //The y position of the bolt
        xSpeed: facingLeft ? -3 : 3,  //The horizontal speed at which the bolt is moving
        ySpeed: 0,                    //The vertical speed at which the bolt is moving
        W: 3,                         //The width of the bolt's model
        H: 3,                         //The height of the bolt's model
        color: 'red',                 //The color of the bolt's model
        update: update,
        draw: draw
    };
    function update(){ //Updates the bolt's properties
        theBolt.x = theBolt.x + theBolt.xSpeed;
        theBolt.y = theBolt.y + theBolt.ySpeed;
    }       
    function draw(){ //Draws the bolt's model to the canvas
        context.fillStyle = theBolt.color;
        context.fillRect(theBolt.x, theBolt.y, theBolt.W, theBolt.H);
    }

    return theBolt;
}