Javascript-在对象内使用函数

Question

我试图一次在每个糖果对象中使用移动方法，但是我遇到一个问题：无论我将它们分别设置为什么，它都对所有糖果对象使用相同的deltaX和deltaY。 我一直在尝试找到一种制作方法，以使其对于每个对象都是独立的，但是我还没有找到一种方法。 我想知道你们是否有解决方案。

Candy功能：

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

我认为问题是var object = this;

您将在每次调用时操纵相同的对象引用。

您也许可以尝试类似

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

克隆对象。

编辑：或者更好

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

保持功能。

Answer 2

问题是您永远不会创建Candy对象。 通过运行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))

动作代码不需要更改。