按住键的Javascript画架动画

时间:2011-11-08 19:50:31

标签: javascript jquery html5 animation easeljs

我正在尝试使用easelJS制作一个HTML5 RPG游戏来处理精灵动画。当我在任何方向按箭头键时,角色不会播放动画,而是似乎跳回到第0帧并停止而不是循环动画。

我需要的是动画在按下按键时继续循环,而不是角色卡在画面中。

这是我到目前为止的游戏,它实际上是一团糟,因为我正在尝试并仍在学习HTML5。 http://cloudrealms.com/dev/

以下是我正在使用的代码:

箭头键捕获:

      $(window).keydown(
        function(e){
            keys[e.which] = true;
            if(isMovementKey(e.which))
            {
                moveOrder.unshift(e.which);
                jQuery.unique(moveOrder);
                animationsToPlay.push(1);
            }
            e.preventDefault();
            return false;
        }
    );
    $(window).keyup(
        function(e){
            keys[e.which] = false;
            if(isMovementKey(e.which))
            {
                moveOrder.splice(jQuery.inArray(e.which, moveOrder),1);
            }
        }
    );

在我的tick中我有一个名为HandleInput()的函数,这里是代码:

function HandleInput()
{
    switch (moveOrder[0]) {
        case 38:  /* Up arrow was pressed */
            playerSequence[playerID].gotoAndPlay("walk_up");
            playerSequence[playerID].y -= playerSequence[playerID].vY;
        break;
        case 40:  /* Down arrow was pressed */
            playerSequence[playerID].gotoAndPlay("walk_down");
            playerSequence[playerID].y += playerSequence[playerID].vY;
        break;
        case 37:  /* Left arrow was pressed */
            playerSequence[playerID].gotoAndPlay("walk_left");
            playerSequence[playerID].x -= playerSequence[playerID].vX;
        break;
        case 39:  /* Right arrow was pressed */
            playerSequence[playerID].gotoAndPlay("walk_right");
            playerSequence[playerID].x += playerSequence[playerID].vX;
        break;
    }
}

我想知道的是,在按住箭头键的同时,如何为玩家精灵设置动画?

1 个答案:

答案 0 :(得分:3)

这有点令人困惑,很难说出你的代码在做什么,你能提供链接吗?

在关键时刻让你的玩家移动方面,我可以提供一些建议。 onkeydown事件的工作方式是,只要键关闭,事件就会被触发。

如果我是你,我会有一个布尔值来表示他们的键是否被按下了。在keydown事件上,将其设置为true,在keyup事件上将其设置为false。:

$(window).keydown(
    function(e){
        bool_keyDown = true;
    }
);
$(window).keyup(
    function(e){
        bool_keyDown = false;
    }
);

注意这适用于任何键,您必须在keydown函数中指定所需的键,但您可以在keyup函数中保留它。在您的股票代码中,您可以检查是否属实。如果它是真的,你在spritesheet上运行gotoandplay功能:

function HandleInput()
{
    if(bool_keyDown) 
        playerSequence[playerID].gotoAndPlay("walk_up");
}

这不是特定于任何一个键。因此,您可能希望将其从bool更改为字符串。也许有字符串“向上”,“向下”,“向左”,“向右”等,并且没有按下按键时为null。希望这可以帮助。

- 阿什利