Javascript 多动画表

Question

我使用以下 javascript 库编写了代码，SimpleGame.js作者:A.哈里斯。

我的代码如下，问题是当按下箭头键时， Angular 色不会产生动画，当释放相同的键时，它会产生动画...什么是我失踪了？此外，应该是左箭头键的39键根本不起作用。任何帮助表示感谢，谢谢。

http://www.retroinvaders.net/multiAnimationTest.html

多动画测试

<script type="text/javascript" src="simpleGame.js"></script>

<script type="text/javascript">
    var game;
    var background;
    var character;
    var critter;

    window.addEventListener("keydown", keydownHandler, false);


    function init() {
        game = new Scene();
        background = new Sprite(game, "media/rpgMap.png", 800, 600);
        background.setSpeed(0, 0);
        background.setPosition(400, 300);

        character = new Character();
        critter = new Critter();
        game.start();
    }

    function update() {
        game.clear();
        checkCollisions();
        background.update();
        character.update();
        critter.update();
    }

    function Character() {
        tCharacter = new Sprite(game, "media/rpg_sprite_walk.png", 192, 128);

        tCharacter.loadAnimation(192, 128, 24, 32);
        tCharacter.generateAnimationCycles();
        tCharacter.renameCycles(new Array("down", "up", "left", "right"));
        tCharacter.setAnimationSpeed(1000);

        tCharacter.setPosition(440, 380);
        tCharacter.setSpeed(0);
        tCharacter.pauseAnimation();
        tCharacter.setCurrentCycle("down");

        return tCharacter;
    }

    function keydownHandler(event) {

        if (event.keyCode === 37) {

            character.playAnimation();
            character.setCurrentCycle("left");
            character.setMoveAngle(270);
            character.changeXBy(-5);

        }

        if (event.keyCode === 39) {

            character.changeXby(5);

            character.playAnimation()
            character.setMoveAngle(90);
            character.setCurrentCycle("right");
        }

        if (event.keyCode === 38) {

            character.playAnimation()
            character.changeYby(-5);


            character.setMoveAngle(0);
            character.setCurrentCycle("up");
        }

        if (event.keyCode === 40) {

            character.changeYby(5);
            character.playAnimation()

            character.setMoveAngle(180);
            character.setCurrentCycle("down");
        }
    }



    function Critter() {
        tCritter = new Sprite(game, "media/critter.gif", 30, 30);
        tCritter.setSpeed(0);
        tCritter.setPosition(200, 200);
        return tCritter;
    }

    function checkCollisions() {
        if (character.distanceTo(critter) <= 30) {
            critter.hide();
        }

    }
</script>

Answer 1

每次按下一个键时，您都会分配新的animationCycle。
chrome 似乎没有时间设置新的动画周期。 仅在需要时才使用标志进行更改修复此问题:

function keydownHandler(event) {
    event.preventDefault();
    if (event.keyCode === 37) {
        if (character.animation.currentCycleName !== "left") {
            character.setCurrentCycle("left");
        }
        character.changeXby(-5);
        character.playAnimation();
        character.setMoveAngle(270);
    }

    if (event.keyCode === 39) {
        if (character.animation.currentCycleName !== "right") {
            character.setCurrentCycle("right");
        }
        character.changeXby(5);
        character.playAnimation()
        character.setMoveAngle(90);

    }

    if (event.keyCode === 38) {
        if (character.animation.currentCycleName !== "up") {
            character.setCurrentCycle("up");
        }
        character.changeYby(-5);
        character.playAnimation();
        character.setMoveAngle(0);
    }

    if (event.keyCode === 40) {
        if (character.animation.currentCycleName !== "down") {
            character.setCurrentCycle("down");
        }
        character.changeYby(5);
        character.playAnimation();
        character.setMoveAngle(180);

    }
}

See fiddle