javascript - Sprite 动画: function not recognized and semi-colon expected in for-loop

Question

我正在开发一个 Sprite 动画项目。鼠标悬停时，控制台日志报告该函数未定义。此外，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 数组中的值。

Answer 1

首先，要使 for 循环工作，您需要在第 24 行使用分号而不是逗号，如下所示 for (i = 0; i < catPosition.length; i++) {

要达到您想要的效果，您可以做的就是在 setInterval 内设置 x 和 y，然后更新 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()

这应该使猫在间隔的每次调用中只移动一个位置。