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

Question

I want to use a gif I made for my sprite (it would be nice if the gif only played when the character moved) So far, I have a rectangle with choppy character movements. 我想使用为精灵创建的gif（如果gif仅在角色移动时才播放）会很好，到目前为止，我有一个矩形，其角色变动不定。 (It would also be nice if I could make the character movement smoother. I watched tons of tutorials but I couldn't find anything that shows how to do what I want to do. （如果我可以使角色移动更流畅，那也很好。我看了很多教程，但找不到任何能说明如何做自己想做的事。

Here is the code (you can ignore css) 这是代码（您可以忽略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

Did you try PixiJS ? 您尝试过PixiJS吗？ I suggest you have to look at PixiJS if you want to make good animations. 如果您要制作好的动画，我建议您必须看看PixiJS。 Also if you want to develop games Phaser is very nice framework to develop javascript based games. 另外，如果您想开发游戏，那么Phaser是一个非常好的框架，用于开发基于JavaScript的游戏。

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

问题描述

1 个解决方案

解决方案1
0 2018-07-01 02:54:47

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

问题描述

1 个解决方案

解决方案1 0 2018-07-01 02:54:47

解决方案1
0 2018-07-01 02:54:47