在JavaScript中正確顯示幀

Question

好的，所以我正在用JavaScript開發一個遊戲。我用不同的JavaScript文件組織了遊戲的所有部分。所以，這是Player.js文件，每當我在瀏覽器中運行它（當然是從html文件運行）時，我都會遇到這個問題：Player對象從圖像閃爍到透明矩形：繼承代碼：

function Player() { 
this.frames = []; 
this.right = true; 
this.currentFrame = 0; 
this.currentAction = "WALKING"; 
this.image = new Image(); 
this.x = 0; 
this.y = 0; 

this.setPosition = function(x, y) { 
    this.x = x; 
    this.y = y; 
}; 
this.setVector = function(x, y) { 
    this.x += x; 
    this.y += y; 
}; 
this.setAction = function(action) { 
    this.currentAction = action; 
}; 
this.setRight = function(bool) { 
    this.right = bool; 
} 
this.draw = function(context) { 
    if(this.right == true) { 
     if(this.currentAction == "WALKING") { 
      this.frames = [ "res/playerRight.png" ]; 
     } 
    } else if(this.right == false) { 
     if(this.currentAction == "WALKING") { 
      this.frames = [ "res/playerLeft.png" ]; 
     } 
    } 
    if(this.currentFrame < this.frames.length) { 
     this.currentFrame += 1; 
     this.image.src = this.frames[this.currentFrame - 1]; 
     context.drawImage(this.image, this.x, 
      this.y, 32, 32); 
    } else { 
     this.currentFrame = 0; 
    } 
}; 

}

繼承人是做什麼的一些圖片： http://i.stack.imgur.com/1RcOC.png http://i.stack.imgur.com/fxbNY.png

Answer 1

你怎麼樣預裝的所有圖像，並選擇正確的在你的病情。目前，每次設置源代碼時，圖像都會重新加載，並且在準備好之前繪製它。

// you can improve this part for your needs 
var image1Loaded = false; 
var image2Loaded = false; 

this.preLoadImages = function(){ 
    this.image1.onload = function(){ 
     image1Loaded = true; 
    } 
    this.image2.onload = function(){ 
     image2Loaded = true; 
    } 
    this.image1.src = "res/playerRight.png"; 
    this.image2.src = "res/playerLeft.png"; 
} 

現在你可以在你的繪製方法直接使用圖片：

this.draw = function(context) { 
    var currentImage = "image1"; 
    if(this.right == true) { 
     if(this.currentAction == "WALKING") { 
      currentImage = "image1"; 
     } 
    } else if(this.right == false) { 
     if(this.currentAction == "WALKING") { 
      currentImage = "image2"; 
     } 
    } 
    if(this.currentFrame < this.frames.length) { 
     this.currentFrame += 1; 
     var image = this[currentImage]; 
     context.drawImage(image, this.x, 
      this.y, 32, 32); 
    } else { 
     this.currentFrame = 0; 
    } 
}; 

只要確保你的圖像使用它們繪製在畫布

Answer 2

這裏之前已經加載的錯誤：

if(this.currentFrame < this.frames.length) { 
    this.currentFrame += 1; 
    context.drawImage(); // <---------------- draw an image 
} else { 
    this.currentFrame = 0; // <-------------- draw nothing! 
} 

那麼，讓我們來看看這個邏輯吧。目前，幀長爲1.

currentFrame = 0 
    so we increment currentFrame 
    we draw the image 

currentFrame = 1 
    currentFrame is not less than frames.length 
    we do not draw anything 
    we set current frame to 0 

currentFrame = 0 
    so we increment currentFrame 
    we draw the image 

repeat.... 

結果：閃爍！如果幀長度爲2，將閃爍33％的時間，如果幀長度爲3，將閃爍的時間等

25％的正確的方法來處理這樣的：

this.currentFrame += 1; 
if(this.currentFrame >= this.frames.length) { 
    this.currentFrame = 0; 
} 
this.image.src = this.frames[this.currentFrame]; // ** 
context.drawImage(); 

// **note: no need for -1 because currentFrame here is always 
//   less than frame.length 

或者，如果你是數學的：

this.currentFrame = (this.currentFrame + 1) % this.frames.length; 
this.image.src = this.frames[this.currentFrame]; 
context.drawImage();