精灵动画：功能无法识别，for 循环中需要分号

Question

我正在做精灵动画项目。鼠标悬停时，控制台日志报告函数未定义。此外，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()

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

精灵动画：功能无法识别，for 循环中需要分号

sprite animation: function not recognized and semi-colon expected in for-loop

javascript

for-loop

function

sprite