Javascript - 使用對象內的函數

Question

我嘗試在每個糖果對象中同時使用移動方法，但我遇到了一個問題：它使用相同的deltaX和deltaY來處理所有這些對象，無論我如何分別設置它們。我一直在試圖找到一種方法來使它成爲每個對象的個體，但我還沒有找到一種方法。我想知道你們是否有解決方案。

糖果功能：

Candy = function(img, location, canvas) { 
    self = {} 
    self.image = new Image() 
    self.image.src = img 
    self.location = {x: location.x, y: location.y} 
    self.canvas = canvas 
    self.draw = function() { 
     self.canvas.drawImage(this.image, this.location.x, this.location.y, 132.4, 132.4) 
    } 
    self.move = function(FPS, seconds, location) { 
     var object = this 
     object.frames = FPS * seconds 
     object.deltaX = (location.x - this.location.x)/frames 
     object.deltaY = (location.y - this.location.y)/frames 
     object.counter = 0 
     var i = setInterval(function() { 
      object.location.x += object.deltaX 
      object.location.y += object.deltaY 
      object.counter++ 
      draw() 
      if(object.counter >= object.frames) 
       clearInterval(i) 
     }, 1000/FPS) 
    } 
    self.image.onload = function() { 
     Candy.list.push(self) 
     Candy.queue.splice(0, 1) 

     if(Candy.queue.length == 0) 
      draw() 
     else 
      Candy(Candy.queue[0].img, Candy.queue[0].location, Candy.queue[0].canvas) 
    } 
} 
Candy.list = [] 
Candy.queue = [] 

當我發起的運動：

for(var i = 0; i < Candy.list.length; i++) { 
    var candy = Candy.list[i] 
    var x = i < 4 ? width/5 : 7 * (width/5) 
    var y = candy.location.y 
    candy.move(30, 3, {x: x, y: y}) 
} 

我在哪裏初始化糖果對象：

Candy.queue.push({img: "client/img/candy.png", location: {x: 2 * (width/5), y: height/10}, canvas: canvasContext}) 
    Candy.queue.push({img: "client/img/candy2.png", location: {x: 2 * (width/5), y: 3 * (height/10)}, canvas: canvasContext}) 
    Candy.queue.push({img: "client/img/candy3.png", location: {x: 2 * (width/5), y: 5 * (height/10)}, canvas: canvasContext}) 
    Candy.queue.push({img: "client/img/candy4.png", location: {x: 2 * (width/5), y: 7 * (height/10)}, canvas: canvasContext}) 

    Candy.queue.push({img: "client/img/candy2.png", location: {x: width/2, y: 1 * (height/10)}, canvas: canvasContext}) 
    Candy.queue.push({img: "client/img/candy4.png", location: {x: width/2, y: 3 * (height/10)}, canvas: canvasContext}) 
    Candy.queue.push({img: "client/img/candy5.jpg", location: {x: width/2, y: 5 * (height/10)}, canvas: canvasContext}) 
    Candy.queue.push({img: "client/img/candy.png", location: {x: width/2, y: 7 * (height/10)}, canvas: canvasContext}) 


    Candy(Candy.queue[0].img, Candy.queue[0].location, Candy.queue[0].canvas) 

繪製函數：

function draw() { 
colorRect(0, 0, canvas.width, canvas.height, 'white'); 
colorText("Player 1", 0.02, 0.05, "black", "40px Comic Sans"); 
colorText("Player 2", 0.88, 0.05, "black", "40px Comic Sans"); 

if(!gameStarted) { 
    if(player1.ready) 
     colorText("Ready", 0.02, 0.09, "green", "20px Comic Sans"); 
    else 
     colorText("Not Ready", 0.02, 0.09, "red", "20px Comic Sans"); 
    if(player2.ready) 
     colorText("Ready", 0.88, 0.09, "green", "20px Comic Sans"); 
    else 
     colorText("Not Ready", 0.88, 0.09, "red", "20px Comic Sans"); 
    if(player1.ready && player2.ready) 
     colorText("Press a button to start the game!", 0.32, 0.5, "black", "40px Comic Sans") 
}else{ 
    for(var i = 0; i < Candy.list.length; i++) { 
     Candy.list[i].draw() 
    } 
    if(decision1 != null) { 
     var color 
     if(decision1 == "Share") 
      color = 'green' 
     else 
      color = 'red' 
     colorText(decision1, 0.02, 0.15, color, "40px Comic Sans"); 
    } 
    if(decision2 != null) { 
     var color 
     if(decision2 == "Share") 
      color = 'green' 
     else 
      color = 'red' 
     colorText(decision2, 0.02, 0.15, color, "40px Comic Sans"); 
    } 
} 

}

Answer 1

問題是你從來沒有創建一個糖果對象。這可以通過運行console.log(Candy.list[0] instanceof Candy)（這將打印false）輕鬆看到。

要創建一個Candy對象，您必須使用new關鍵字。

我編輯了您的代碼以將新的Candy對象插入到隊列中。第一關，而不是創造一個像你{}做了一個新的對象，你的構造必須使用this關鍵字來引用本身：

Candy = function(img, location, canvas) { 
    var self = this; 
    self.image = new Image() 
    self.image.src = img 
    self.location = {x: location.x, y: location.y} 
    self.canvas = canvas 
    self.draw = function() { 
     self.canvas.drawImage(self.image, self.location.x, self.location.y, 132.4, 132.4) 
    } 
    self.move = function(FPS, seconds, location) { 
     self.frames = FPS * seconds 
     self.deltaX = (location.x - self.location.x)/self.frames 
     self.deltaY = (location.y - self.location.y)/self.frames 
     self.counter = 0 
     var i = setInterval(function() { 
      self.location.x += self.deltaX 
      self.location.y += self.deltaY 
      self.counter++ 
      draw() 
      if(self.counter >= self.frames) 
       clearInterval(i) 
     }, 1000/FPS) 
    } 
    self.image.onload = function() { 
     Candy.list.push(self) 
     Candy.queue.splice(Candy.queue.indexOf(self), 1) 

     if(Candy.queue.length === 0) 
      draw() 
    } 
} 
Candy.list = [] 
Candy.queue = [] 

初始化代碼 - 現在用new關鍵字：

Candy.queue.push(new Candy("client/img/candy.png", {x: 2 * (width/5), y: height/10}, canvasContext)) 
Candy.queue.push(new Candy("client/img/candy2.png", {x: 2 * (width/5), y: 3 * (height/10)}, canvasContext)) 
Candy.queue.push(new Candy("client/img/candy3.png", {x: 2 * (width/5), y: 5 * (height/10)}, canvasContext)) 
Candy.queue.push(new Candy("client/img/candy4.png", {x: 2 * (width/5), y: 7 * (height/10)}, canvasContext)) 
Candy.queue.push(new Candy("client/img/candy2.png", {x: width/2, y: 1 * (height/10)}, canvasContext)) 
Candy.queue.push(new Candy("client/img/candy4.png", {x: width/2, y: 3 * (height/10)}, canvasContext)) 
Candy.queue.push(new Candy("client/img/candy5.jpg", {x: width/2, y: 5 * (height/10)}, canvasContext)) 
Candy.queue.push(new Candy("client/img/candy.png", {x: width/2, y: 7 * (height/10)}, canvasContext)) 

移動代碼不需要改變。

Answer 2

我覺得問題是var object = this;

您正在操作每次調用相同的對象引用。

你也許可以嘗試像

var object = JSON.parse(JSON.stringify(this); 

克隆的對象。

編輯： 或者更好

var object = Object.assign({}, this); 

保持功能。