簡單的JavaScript遊戲：可能的對象數組錯誤

Question

我建立一個小型的JavaScript遊戲，但在教程和諸如此類的東西在網上看後，它只是不是爲我工作。爲了節省一些麻煩，以下是我認爲可能出錯的部分（實際問題在下面進行了更多解釋）。

它運行在一個非常基本的循環，現在，我有一個數組來保存玩家的螺栓，他瞪了他們：

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

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

這是創建玩家射擊時，螺栓對象。

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

的問題是，下一個螺栓變快每隔以下射門。你越開心，他們得到的速度就越快。此外，如果快速射擊，應該有多個可見的螺栓，但每次射擊時，前一個都會消失。

現在的遊戲遍歷更新和借鑑作用。我用了一個用於

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

的問題是，function bolt(facing,playerX,playerY){不創建一個新的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 
    ... 

- 因爲你沒有一個新的對象調用bolt，你把它從每次都在同一個地方，你下this不斷得到重寫一遍又一遍設置變量。

Answer 2

我懷疑您遇到this問題。您可以通過調用構造bolt對象：

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

然而，bolt函數中，你使用this，就好像它是指新創建的螺栓。不幸的是，事實並非如此。嘗試構建螺栓這樣，而不是：

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

如果你這樣做的，然後this內的bolt指新創建的對象。

此外，該this也可能是錯誤的：

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

對於陌生的原因，this你的循環函數中可能會或可能不會是你的螺栓（見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; 
} 

Answer 3

正如其他人所說，你的問題是，你不創建一個新的螺栓每一次，你只需要調用螺栓的功能。因此，該函數中的「this」引用全局對象，所以實際上只有一個多次更新的螺栓。

此外，以下內容：

> if(facingLeft==true){ 
>  this.xSpeed=-3; //The horizontal speed at which the bolt is moving 
> } 
> else if (facingLeft==false){ 
>  this.xSpeed=3; 
> } 

可以使用?: conditional operator（又名三元運算符）來代替：

this.xSpeed = facingLeft? -3 : 3; 

而且，你必須：

> this.update=update; 
> function update(){ //Updates the bolt's properties 
>  this.x=this.x+this.xSpeed; 
>  this.y=this.y+this.ySpeed; 
> } 

您可以分配該函數直接使用函數表達式：

// Update the bolt's properties 
this.update = function() { 
    this.x = this.x + this.xSpeed; 
    this.y = this.y + this.ySpeed; 
} 

或更好，但放在構造函數的原型的功能，因此所有實例繼承相同的功能：

bolt.prototype.update = function() { 
    ... 
} 

同爲畫方法。而你的代碼中更多的空白將會使它更具可讀性。 :-)