0

好的，所以我正在用 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

4

2 回答 2

0

这是错误：

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();
于 2013-10-18T22:47:07.640 回答
0

您如何预加载所有图像并根据您的情况选择正确的图像。目前，每次设置源时，图像都会重新加载，并且在它准备好之前绘制它。

// 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;
    }
};

只需确保您的图像在使用它们在画布上绘制之前已经加载

于 2013-10-18T22:21:18.040 回答