Использование функции Set Interval для анимации - PullRequest
Новая
       11

Использование функции Set Interval для анимации

1 голос
/ 22 октября 2019 
<html>


canvas {
    background-color: lightgreen
}


<script>
var ctx = canvas.getContext("2d");


    var n = 5;
    const PI = 3.14;



    var randomWalk = function (n) {

        var list = [0, 1];
        var l = list.length;
        start = Math.round(n / 2);
        count = 0;

        while (start > 0 && start < n + 1) {

            rand = list[Math.floor(Math.random() * l)];
            if (rand == 1) { start = start + 1 }
            else { start = start - 1 };
            count = count + 1;

        };

        console.log(count);

    };

    var drawSquares = function (n) {
        for (i = 50; i <= n * 50; i = i + 50) {

            ctx.beginPath();
            ctx.rect(i, 50, 50, 50);
            ctx.stroke();

        };

    };

    var drawDot = function (n) {
        x = ((50 * n) / 2) + 50;

        ctx.beginPath();
        ctx.arc(x, 75, 5, 0, 2 * PI);
        ctx.stroke();
        ctx.fill();



    };


    var resetCanvas = function () {

        ctx.clearRect(0, 0, canvas.width, canvas.height);
    };


    var moveDot = function (n) {
        drawSquares(n);
        drawDot(n);

        var list = [0, 1];
        var l = list.length;
        start = ((50 * n) / 2) + 50;
        count = 0;

        while (start > 50 && start < ((n * 50) + 50)) {



            rand = list[Math.floor(Math.random() * l)];
            if (rand == 1) { start = start + 50 }
            else { start = start - 50 };
            count = count + 1;
            //console.log(start);

            resetCanvas();
            drawSquares(n);
            ctx.beginPath();
            ctx.arc(start, 75, 5, 0, 2 * PI);
            ctx.stroke();
            ctx.fill();

        };

        console.log(count);

    };



    //moveDot(n);

   setInterval(moveDot(n), 1500);

    </script>

Функция ниже - это функция, которая не работает должным образом в рамках функции установленного интервала. Эта функция принимает количество блоков в качестве входных данных и на основе случайного выбора 0 или 1 перемещает точку влево или вправо, однако это не отображается.

Я создал функцию под названием moveDotдля перемещения точки, однако при помещении в заданную функцию интервала точка не перемещается. Будем очень благодарны за любые идеи относительно того, почему функция не работает должным образом! Заранее спасибо за помощь!

...