javascript - 有什么方法可以使它动画化吗？我正在制作的 HTML 游戏

Question

我开始制作 HTML roguelike，并希望一些动画能够正常工作。有什么方法可以制作 Angular 色幻灯片，而不仅仅是传送到那里？一切都是由div组成的。 这是我正在使用的代码:

function keypress(e){ //tbd
var x = e.which || e.keyCode;
if (input){
    if (x==37){ //left
        nexttile = [
            [parseInt(charpos[0])],
            [parseInt(charpos[1]) - 1],
        ]
        if ( canPassthrough(map[nexttile[0]][nexttile[1]]) ) charpos[1]--;
        else return 0;

    }
    else if(x==38){ //up
        nexttile = [
            [parseInt(charpos[0]) - 1],
            [parseInt(charpos[1])],
        ];
        if ( canPassthrough(map[nexttile[0]][nexttile[1]]) ) charpos[0]--;
        else return 0;

    }
    else if(x==39){ //right

        nexttile = [
            [parseInt(charpos[0])],
            [parseInt(charpos[1]) + 1],
        ];
        if ( canPassthrough(map[nexttile[0]][nexttile[1]]) ) charpos[1]++;
        else return 0;
    }
    else if(x==40){ //down
        nexttile = [
            [parseInt(charpos[0]) + 1],
            [parseInt(charpos[1])],
        ];
        if ( canPassthrough(map[nexttile[0]][nexttile[1]]) ) charpos[0]++;
        else return 0;
    }
    updatehero();

    }
}
function canPassthrough(t){
    if ((t!=1)&&(t!=0)&&(typeof t !== 'undefined')){
        return true;
    }
    else {
        return false;
    }
}

function updatehero(){
    screen = document.getElementById("game-field");
    oldchar = document.getElementById("hero");
    if (oldchar) screen.removeChild(oldchar);   
    heromod = document.createElement("div");
    heromod.id = "hero";
    heromod.style.width = tilescale;
    heromod.style.height = tilescale;
    heromod.style.left = charpos[1]*parseInt(tilescale) + "px";
    heromod.style.top = charpos[0]*parseInt(tilescale) + "px";

    screen.appendChild(heromod);

    centerchar();
}

这是我用于非常基本的 Angular 色移动的 Javascript 代码。 这是“@”div 的 CSS:

#hero {
    position: absolute;
    background-size: contain;
    background-image: url(../img/charplaceholder.png);
}
#hero:after{
    content: "0";
    color: transparent;

}

谢谢!

Answer 1

尝试向 div 添加 CSS 过渡。 CSS 过渡在指定的时间段内应用新样式。您可以执行 transition:all .5s ease; 这意味着应用的任何 新样式将在一段时间内应用，或者您可以像这样给属性名称 transition:left .5s ease;.这是给你的一些代码。

#hero {
    position: absolute;
    background-size: contain;
    background-image: url(../img/charplaceholder.png);

    /*do these for single properties*/        
    -o-transition:left .5s ease;
    -moz-transition:left .5s ease;
    -webkit-transition:left .5s ease;
    -ms-transition:left .5s ease;

    -o-transition:left .5s ease;
    -moz-transition:left .5s ease;
    -webkit-transition:left .5s ease;
    -ms-transition:left .5s ease;

    /*do this code for transitions for all properties*/
    -o-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -webkit-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease;
}