Question

我想在这里实现的是，我的屏幕上有一个角色，我可以通过按下我的箭头键向左，向右，向上和向下移动它。

我想要做的是当我点击左侧时图像将反转，当我点击右侧并且它应该向后反转时，角色总是朝向它走的方式。

我的代码看起来像我定义原始图像和反转的图像：

Game.Hero = function (myX, myY){
var my = new createjs.Bitmap("img/hero.png");
my.reverseHero = function (){
    my.image.src = "img/hero-1.png";
};

然后我在这里有一段代码片段，展示了我如何尝试解决这个问题：

my.moveBy = function(dirX, dirY){
    var testX = my.posX + dirX;
    var testY = my.posY + dirY;
    if (testX < 0 || testY < 0 || testX > 21 || testY > 8){
        return;
    }
    if (dirX === -1){
       my.reverseHero();

    } else if (dirX === 1) {
        Game.stage.addChild(Game.hero);                
    }

我现在的问题是，当我走到左边时，图像实际上会反转，但是当我再次尝试向右移动时，图像将不会反转。

因此代码实际上只运行第一个if语句并且只是一直挂在那里。

你有什么建议吗？

Answer 1

设置后是否应该重置图像？这意味着设置第二个功能以将英雄返回到其原始图像。因为现在它只是在调用该动作时将你的角色设置为另一个图像，但是即使不再调用该动作也会保持该图像的设置。

Game.Hero = function (myX, myY){
var my = new createjs.Bitmap("img/hero.png");
my.reverseHero = function (){
    my.image.src = "img/hero-1.png";
};
my.returnHero = function(){
    my.image.src = "img/hero.png";
};

然后，在else if语句中，调用该函数

my.moveBy = function(dirX, dirY){
    var testX = my.posX + dirX;
    var testY = my.posY + dirY;
    if (testX < 0 || testY < 0 || testX > 21 || testY > 8){
        return;
    }
    if (dirX === -1){
       my.reverseHero();
    } else if (dirX === 1) {
        Game.stage.addChild(Game.hero);                
        my.returnHero();
    }

这对你有意义吗，还是我应该澄清一些？

Answer 2

出现问题的原因是您使用"img/hero.png"初始化图片，然后将其更改为"img/hero-1.png"。但是，这很好，当您第二次调用reverseHero方法时，它不会放回旧图像（"img/hero.png"）。

您可以通过实施以下内容来更改此内容：

var direction = true; // true means forward, false means backwards
my.reverseHero = function (){
    my.image.src = direction ? "img/hero-1.png" : "img/hero.png";
    direction = !direction;
};

在keydown上反转图像 - Javascript

2 个答案: