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

保持功能。