Question

我希望有一个角色，每次点击该角色时，它都会执行与上一次点击完全不同的操作。到目前为止，我已经创造了大约113帧的角色。我可能会停在那里，或者我可能希望将来创建更多的帧。关键是，我认为自己是一名初学者Web开发人员，我想知道如何根据你点击它的时间给予我的角色很好的控制。例如，这是我到目前为止的代码......

(function() {
var play_on_click = [70, 22, 21];
var play_index = 0;

$('#stacheguy2').click(function() {
    var current_play = play_on_click[play_index];

    play_index++;
    if (play_index > play_on_click.length-1) {
        play_index = 0;
    }

    $(this).sprite(fps: 30, no_of_frames: 113, play_frames: current_play});
});
})();

目前，这允许我执行以下操作：

首次点击鼠标：前70帧播放在第二次鼠标点击：播放接下来的22帧在第三次鼠标点击：播放下一个21帧

然而，我很想知道是否可以让第二次鼠标点击时角色在屏幕上向右移动。如果该字符在第三次点击时也改变了它的z-index怎么办？

这种控制是否可行？

如果你能提供一些建议，非常感谢你的时间！

Answer 1

我会在你的play_on_click数组中添加函数，然后检查当前索引的类型（可能是int或函数）。 Javascript非常漂亮，因为它很容易实现：

(function() {
     var isFunction = function(obj) {
        return typeof(obj) == "function";
      };

     // Changing the array, adding a function at third step instead of int
     var play_on_click = [70, 22, function (){
         // Does any action on the guy, for example your zIndex stuff
         $('#stacheguy2').css('zIndex', 2);
         // return number of frames
         return 21 ;
     }];
     var play_index = 0;

     $('#stacheguy2').click(function() {
         var current_play = play_on_click[play_index];

         play_index++;
         if (play_index > play_on_click.length-1) {
            play_index = 0;
         }

         // If function 
         if ( isFunction ( current_play ) ) {
             // run function and get returned number of frames
             current_play = current_play () ;
         }
         $(this).sprite(fps: 30, no_of_frames: 113, play_frames: current_play});
     });
})();

每次单击鼠标控制动画的方式不同

1 个答案: