Question

我有一个非常粗鲁的问题，我似乎无法修复自己。我已经研究了类似的答案，但是没有一个实现似乎是我可能的实现。

基本上我有一个图像（png）在一个小框(here is the game)中移动。我面临的问题是，如果改变精灵移动的方向（左 - 右）并且它应该能够跳跃，图像应该翻转。转换工作分别很好，但是当我在面向左边时尝试跳跃时，它会在跳跃中向右转。

我想，我需要在跳跃之前移除坏人左手。但是，当我完成它时，它似乎不起作用......

完全免责声明：我们不应该使用任何正常的＆＃39; js（即没有jquery）。

这是js：

switch(key) {
    case 32: //jumping
        if(!baddie.classList.contains('baddie-jumping')){ 
            baddie.classList.add('baddie-jumping');
            window.setTimeout(function(){
                baddie.classList.remove('baddie-jumping');
            }, 350);
        }
        break;
    case 37: //moving left
        if (left_available(left - step)){
            if(!baddie.classList.contains('baddie-left')){
                baddie.classList.add('baddie-left');
            }
            left = left - step;
        } else {
            left = 150;
            top = 130;
        }
        break;
    case 38:
        if (top_available(top - step)){
            top = top - step;
        } else {
            left = 150;
            top = 130;
        }
        break;
    case 39: //moving right
        if (left_available(left + step)){
            if(baddie.classList.contains('baddie-left')){
                baddie.classList.remove('baddie-left');
            }
            left = left + step;
        } else {
            left = 150;
            top = 130;
        }
        break;
    case 40:
        if (top_available(top + step)){
            top = top + step;
        } else {
            left = 150;
            top = 130;
        }
        break;
}

和css：

.content {
    /* If #content position is absolute, the #baddie position will be given in reference to it's parent, which is #content
     * Makes it easier to do collision calculations */
    position: absolute;
    width: 400px;
    height: 300px;
    border: solid 1px #000;
}

.baddie{
    /* Baddie's postition must be absolute, otherwise we can't move him by changing top and left */
    position: absolute;
    height: 50px;
    width: 50px;

    /* Change this to your own baddie! */
    background: url("../img/viking.png");
    background-size: 50px;
    transition: all 0.35s ease;
}

.baddie-left {
    transform: rotateY(180deg);
}

.baddie-jumping {
    transform: scale(1.5) translateY(-40px);
}

Answer 1

当你添加.baddie-jumping类时，它只会覆盖.baddie-left类的transform属性。你应该添加到你的CSS：

.baddie-left.baddie-jumping {
    transform: scale(1.5) translateY(-40px) rotateY(180deg);
}

在发生之前停止特定的转换

1 个答案: