Question

我想使用为精灵创建的gif（如果gif仅在角色移动时播放，这会很好）到目前为止，我有一个矩形，其角色变动不定。（如果我可以使角色移动更流畅，那也很好。我看了很多教程，但找不到任何能说明如何做自己想做的事。

这是代码（您可以忽略CSS）

    <!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #backgroundColor {
            width: 100px;
                height: 100px;
                background-color: white;
                animation-name: backgroundChange;
                animation-duration: 45s;
                animation-iteration-count: infinite;
                }
        @keyframes backgroundChange {
                0%    {background-color: white;}
                3.3%  {background-color: #ffc5c5;}
                6.6%  {background-color: #f78a8a;}
                10%   {background-color: #f95d5d;}
                13.3% {background-color: #f73737;}
                16.6% {background-color: red;}
                20%   {background-color: #b70303;}
                23.3% {background-color: #8c0202;}
                26.6% {background-color: #5a0202;}
                30%   {background-color: #310101;}
                33.3% {background-color: black;}
                36.6% {background-color: #292929;}
                40%   {background-color: #3c3c3c;}
                43.3% {background-color: #757575;}
                46.6% {background-color: #d0d0d0;}
                50%   {background-color: white;}
                53.3% {background-color: #ffc5c5;}
                56.6% {background-color: #f78a8a;}
                60%   {background-color: #f95d5d;}
                63.6% {background-color: #f73737;}
                66.6% {background-color: red;}
                70%   {background-color: #b70303;}
                73.3% {background-color: #8c0202;}
                76.6% {background-color: #5a0202;}
                80%   {background-color: #310101;}
                83%   {background-color: black;}
                86.6% {background-color: #292929;}
                90%   {background-color: #3c3c3c;}
                93.3% {background-color: #757575;}
                96%   {background-color: #d0d0d0;}
                100%  {background-color: white;}
            }
            #canvas{
                height: 540px;
                width: 6350px;
                position:absolute;
                top:50%;
                left:52%;
                transform: translate(-50%,-50%);
                box-shadow: 0 0 16px 2px rgba(0,0,0,0.4);
                background-color: #FFF;
    }   
    </style>
    <title>Bermuda Triangle</title>
</head>
<body id="backgroundColor">
    <img id="character" style="height: 40px; width: 40px;" src="https://piskel-imgstore-b.appspot.com/img/9478ea0f-79c8-11e8-b58c-67762e4a73c8.gif">


    <canvas id='canvas' style="background-image:url(https://preview.ibb.co/fEanjo/realroom.jpg);  height: 540px; width: 635px;"></canvas>
        <script>
        var canvas = document.querySelector('#canvas');
        var context = canvas.getContext('2d');
        var xPos = 0;
        var yPos= 0;
        context.rect(xPos, yPos, 40, 40);
        context.stroke();
        function move(e) {

        //alert(e.keyCode);

        if(e.keyCode==83){
            yPos+=10;
        }
        if(e.keyCode==87){
            yPos-=10;
        }
        if(e.keyCode==65){
            xPos-=10;
        }
        if(e.keyCode==68){
            xPos+=10;
        }
        canvas.width=canvas.width;
        context.rect(xPos, yPos, 40, 40);
        context.stroke();
    }
        document.onkeydown = move;

</script>
</body>
</html>

Answer 1

您尝试过PixiJS吗？如果您要制作好的动画，我建议您必须看看PixiJS。另外，如果您想开发游戏Phaser，则是开发基于JavaScript的游戏的非常不错的框架。

我需要在JS中制作交互式Sprite的帮助

1 个答案: