Question

在我所拥有的游戏中，当玩家走到号码并按下＆＃34; m＆＃34;跳过精灵的一个关键帧。为了澄清，以下是我用来通过将帧的位置存储在变量中来跟踪帧何时应该改变的代码：

function animateStar() {
    var pos = 0;
    $(document).keyup(function(e) {  
        if (e.keyCode == 77) { 
            pos -= 32;
            $('#n1').css('background-position', pos+'px -0px');
          }
    });
}

正如您所看到的，每次按键代码77（代表＆＃34; m＆＃34;）时，帧都会改变，因为我的每个帧的高度和宽度都是32px。

然而，我遇到的问题是，当我的玩家离开物体然后回到它时，而不是从他离开的地方继续，这些帧会跳过。

这是我的代码：http://jsfiddle.net/j40s8gjt/

由于我的精灵表由数字组成，您应该能够看到代码的内容。尝试将帧设置在3-5之间的数字，离开对象然后再回到它并再次按m，你应该看到它重新循环所有东西。

一个可能的解决办法可能是在玩家离开时存储对象的当前位置，但我不知道该怎么做。

我希望我已经足够清楚了，谢谢！

Answer 1

由于每次拨打animateStar()时默认为0，它都会重新开始。

抓住当前位置是你需要做的，而不是每次默认为0。

在animateStar()中，更改此行：

var pos = 0;

到此：

var pos = $('#n1').css('background-position').split('px ')[0] || 0;

这样它在启动时获取当前位置，而不是再次从0开始并重置帧。

工作示例：http://jsfiddle.net/j40s8gjt/2/

浏览精灵并保存背景位置

1 个答案: