I need help making an interactive sprite in JS

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. (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)

    <!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 ? I suggest you have to look at PixiJS if you want to make good animations. Also if you want to develop games Phaser is very nice framework to develop javascript based games.

I need help making an interactive sprite in JS

Question

1 answers

solution1
0 2018-07-01 02:54:47

I need help making an interactive sprite in JS

Question

1 answers

solution1 0 2018-07-01 02:54:47

solution1
0 2018-07-01 02:54:47