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

在JavaScript中正确显示框架

2 个答案: