Question

我试图用循环同时调用对象方法。我会创建一个与一群同时移动的敌人的游戏。

我创造了一个对象＆＃34; Warrior＆＃34;

    function Warrior(x, y) {

    // Coordinates x, y 

    this.x = x;
    this.y = y;

    this.character = $('<div class="enemy"></div>');

    // Inserting the div inside #map
    this.character.appendTo('#map'); 


    // assigning x and y parameters

    this.character.css({        

        marginLeft: x + 'px',
        marginTop: y + 'px'

    });

    // walk method that move the div

    this.walk = function() {

        // Moving div 10px to the right
        this.character.css('left', "+=10");

    }

    }

    var enemies = new Array();
    enemies[0] = new Warrior(0, 0);
    enemies[1] = new Warrior(10, 20);
    enemies[2] = new Warrior(60, 80);

    for(var i=0;i<enemies.length;i++) {
        setInterval(function(){enemies[i].walk()}, 1000);
    }

我创建了一个数组＆＃34;敌人＆＃34;

我尝试同时调用walk（）方法

但没有发生任何事情。我希望div能够同时移动！

谢谢！

Answer 1

基于this问题

您可能希望按值将参数传递给setInterval：

for(var i=0;i<enemies.length;i++) {
    setInterval(
        function(index){   //<-- accept parameter here
            enemies[index].walk();
        }, 1000, i);       //<-- pass i here
}

如果你没有传递参数，x变量会在循环运行时发生变化，因此所有函数都会被调用x = 2（因为你的数组中有3个元素）

Answer 2

您有两个主要问题：

CSS不允许以javascript的方式进行编程修改。您在javascript中修改值，然后在CSS中设置：

this.walk = function() {
    var current = parseInt(this.character.css('left')),
        stepped = current + 10;
    this.character.css('left', stepped);
}

你的循环在var i上创建一个只有一次声明的闭包，所以在函数之间共享相同的值。您可以让函数接受参数，并在setInterval调用中提供它：
- setInterval(function(index) { /* ... */}, 1000, i);
或者你可以把循环放在区间函数中：
```
setInterval(function() {
    for (var i = 0; i < enemies.length; i++) {
         enemies[i].walk();
    }
});
```

您可能还想重新考虑您的walk函数是否应该直接修改CSS。您已经忘记了此代码中的x和y坐标属性。也许你应该有一个修改这些坐标的walk方法，以及一个更新精灵的draw函数。基于当前坐标的位置。

循环对象方法

2 个答案: