анимация спрайта: функция не распознана, в цикле for ожидается точка с запятой - PullRequest
Новая
       27

анимация спрайта: функция не распознана, в цикле for ожидается точка с запятой

0 голосов
/ 23 октября 2019

Я работаю над проектом спрайтовой анимации. При наведении указателя мыши консольный журнал сообщает, что функция не определена. Кроме того, код VS сообщает об ошибке, что точка с запятой ожидается в последних скобках цикла for.

Я попытался добавить точки с запятой в цикл for (хотя это не имеет смысла для меня) и дважды проверьте все мои скобки и фигурные скобки.

HTML: 

</div>

CSS: 

#catimage{
height: 256px;
width: 512px;
background: 
url('https://docs.coronalabs.com/images/simulator/sprites-cat- 
running.png')
}

полный JS: 

var tID;

function catimate() {

    // start position for the image slicer
    var position = 512;
    // 150 ms of interval for setInterval()
    const interval = 150;
    var x = 0;
    var y = 0;
    var catPosition =
    [[0, 0],
        [512, 0],
        [1024, 0],
        [1536, 0],
        [0, 256],
        [512, 256],
        [1024, 256],
        [1536, 256]];

     tID = setInterval(() => {
        document.getElementById("image").style.backgroundPosition = 
       `${x}px ${y}px`;

        for (i = 0, i < catPosition.length, i++) {
            var x = catPosition[i][0];
            var y = catPosition[i][1];
            console.log(x, y);
        }
    }
    , interval);
}

В конце концов я надеюсь оживить эту кошку через один цикл. Однако в этот момент я просто пытаюсь вызвать свою функцию, а затем вижу значения из моего массива catPosition, которые будут записываться в консоль при наведении курсора мыши.

1 Ответ

0 голосов
/ 23 октября 2019

Прежде всего, чтобы цикл for работал, вам нужно использовать точки с запятой вместо запятых в строке 24, чтобы они выглядели так: for (i = 0; i < catPosition.length; i++) {

Что вы можете сделать для достижения желаемого эффекта, это установитьx и y внутри setInterval и обновляют i вместо прохождения цикла for каждый раз, когда кошка просто застрянет в одном месте.

Так что это может выглядеть примерно так: 

var tID;

function catimate() {

    // start position for the image slicer
    var position = 512;
    // 150 ms of interval for setInterval()
    const interval = 150;
    var x = 0;
    var y = 0;
    var i = 0;
    var catPosition =
    [[0, 0],
        [512, 0],
        [1024, 0],
        [1536, 0],
        [0, 256],
        [512, 256],
        [1024, 256],
        [1536, 256]];

     tID = setInterval(() => {
        document.getElementById("image").style.backgroundPosition = `${x}px ${y}px`;

        x = catPosition[i][0];
        y = catPosition[i][1];
        console.log(x, y);

        i++;
    }
    , interval);
}

catimate()

это должно заставить кошку двигаться только на одну позицию за каждый вызов интервала.

...