Как мне исправить мой html / javascript код для анимации листа спрайта? - PullRequest
Новая
       44

Как мне исправить мой html / javascript код для анимации листа спрайта?

0 голосов
/ 03 января 2019

Я попытался анимировать лист спрайта, используя html и javascript, но безрезультатно.Вот мой спрайт

enter image description here

Ниже приведены строки 36-59 моего кода.Я не получаю никаких ошибок, поэтому я не знаю, что случилось.Как мне исправить / улучшить мой код?

Это для проекта, который я делаю.Я пытался использовать разные методы, которые я нашел в Интернете, но ни один из них не сработал.Я также пытался сместить изображение. 

<html>
    <head>
        <title>Tree Animation</title>
    </head>

    <body>

        <canvas id='canvas'></canvas>

        <script>

            var canWidth = 400;
            var canHeight = 100;

            //position where the frame will be drawn
            var x = 0;
            var y = 0;

            var srcX;
            var srcY;

            var sheetWidth = 230;
            var sheetHeight = 79;

            var frameCount = 5;

            var width = sheetWidth/frameCount;
            var height;

            var currentFrame = 0;

            var tree = new Image();
            tree.src = "tree sprite.jpg"

            var canvas = document.getElementById('canvas');
            canvas.width = canWidth;
            canvas.height = canHeight;

            var ctx = canvas.getContext('2d');

            function updateFrame(){
                currentFrame = ++currentFrame%frameCount

                srcX = currentFrame*width;
                srcY = 0;

                ctx.clearRect(x, y, width, height);
            }

            function draw(){
                updateFrame();

            }

            setInterval(function(){
                draw();
            }, 100);

        </script>

    </body>
</html>

Я ожидаю, что на выходе будет анимация растущего дерева, но вместо этого я получаю пустую страницу.

1 Ответ

0 голосов
/ 03 января 2019

вы должны предоставить больше кода или фрагмента, в вашем коде несколько переменных не отображаются

и ваш код трудно отлаживать, если вы используете setInterval, вы должны убедиться, что ваш код может работатьfirst.

возможно, вы можете попробовать пошагово:

  1. сначала нарисуйте весь img на холсте.если это работает, переходите к следующему
  2. , вызывайте вашу draw() функцию вручную, проверяйте, что img drawed
  3. , вызывайте больше, например setTimout(draw, 1000), проверяйте результат

хорошо, и я думаю, что вы можете console.log эти переменные в draw

...