0
問題があります。 Candy関数のオブジェクトを作成しようとすると、すべての属性がうまく作成されているようです。しかし、draw関数を実行しようとするたびに、私が使っているオブジェクトの代わりに、最新のオブジェクトのすべてのプロパティが使用されます。それは、私が2度作成した2番目のオブジェクトを常に描画しますが、最初のオブジェクトは描画しません。なぜ私は考えていない。私はこれを修正しようとするためにすべてを試したので、このコードで何か非常に非効率的であるように見える場合、おそらくこれを修正しようとする私の多くの試みの1つでした。あなたは問題を知っていますか?ここでJavascript - オブジェクト内の関数内のプロパティが、最新のオブジェクトに戻す
はキャンディ関数のコードです:ここで
Candy = function(img, location, canvas) {
\t self = {}
\t self.image = new Image()
\t self.image.src = img
\t self.location = {x: location.x, y: location.y}
\t self.canvas = canvas
\t self.draw = function() {
\t \t self.canvas.drawImage(self.image, self.location.x, self.location.y, 132.4, 132.4)
\t }
\t self.move = function(FPS, seconds, location) {
\t \t frames = FPS * seconds
\t \t deltaX = (location.x - self.location.x)/frames
\t \t deltaY = (location.y - self.location.y)/frames
\t \t counter = 0
\t \t setInterval(function() {
\t \t \t self.location.x += deltaX
\t \t \t self.location.y += deltaY
\t \t \t counter++
\t \t \t self.draw()
\t \t \t if(counter >= frames)
\t \t \t \t clearInterval()
\t \t }, 1000/FPS)
\t }
\t self.image.onload = function() {
\t \t Candy.list.push(self)
\t \t Candy.queue.splice(0, 1)
\t \t
\t \t if(Candy.queue.length == 0)
\t \t \t draw()
\t \t else
\t \t \t Candy(Candy.queue[0].img, Candy.queue[0].location, Candy.queue[0].canvas)
\t }
}
Candy.list = []
Candy.queue = []
私はキャンディ関数を呼び出すところである:
gameStarted = true
\t Candy.queue.push({img: "client/img/candy.png", location: {x: width/3 - 87.5, y: height/10}, canvas: canvasContext})
\t Candy.queue.push({img: "client/img/candy2.png", location: {x: width/3 - 87.5, y: 3 * (height/10)}, canvas: canvasContext})
\t
\t Candy(Candy.queue[0].img, Candy.queue[0].location, Candy.queue[0].canvas)
最後に、ここでの描画機能は次のとおりです。
function draw() {
\t colorRect(0, 0, canvas.width, canvas.height, 'white');
\t colorText("Player 1", 0.02, 0.05, "black", "40px Comic Sans");
\t colorText("Player 2", 0.88, 0.05, "black", "40px Comic Sans");
\t
\t if(!gameStarted) {
\t \t if(player1.ready)
\t \t \t colorText("Ready", 0.02, 0.09, "green", "20px Comic Sans");
\t \t else
\t \t \t colorText("Not Ready", 0.02, 0.09, "red", "20px Comic Sans");
\t \t if(player2.ready)
\t \t \t colorText("Ready", 0.88, 0.09, "green", "20px Comic Sans");
\t \t else
\t \t \t colorText("Not Ready", 0.88, 0.09, "red", "20px Comic Sans");
\t \t if(player1.ready && player2.ready)
\t \t \t colorText("Press a button to start the game!", 0.32, 0.5, "black", "40px Comic Sans")
\t }else{
\t \t alert(Candy.list[0].image.src)
\t \t alert(Candy.list[0].getImg())
\t \t for(var i = 0; i < Candy.list.length; i++) {
\t \t \t Candy.list[i].draw()
\t \t }
\t \t //TODO
\t }
}
あなたは 'Candy.prototype'に' self'のプロパティ( 'this''、すでに問題を分かっているので)の' move'と 'draw'をプロパティから移動することを検討するべきです。そうすれば、すべてのキャンディは、それらの機能のコピーを持つよりも、参照を共有することになります。 –