Question

这可能是非常明显的，但我是一个完整的编码初学者...... 谁能告诉我为什么这只用main（5）执行函数？我怎么能改变它，以便main（2）在main（1）等之后执行？谢谢！

for (var k = 1; k < 6; k++){
  main(k);
}

编辑：对不起，这是主要的定义！我正在尝试使用画布为一堆正方形制作动画

var main = function (speed) {
    Enemy.prototype.update = function () {
        var tx = 650 - this.x;
        var ty = 250 - this.y;
        var dist = Math.sqrt(tx * tx + ty * ty);
        this.velx = (tx / dist) * speed;
        this.vely = (ty / dist) * speed;

        if (dist > 0) {
            this.x += this.velx;
            this.y += this.vely;
        }
    };

    Enemy.prototype.isOnEnemy = function (x, y) {
        return (x >= this.x && x < this.x + 25 && // 25 = width
        y >= this.y && y < this.y + 25); // 25 = height
    };

    Enemy.prototype.render = function () {
        context.fillStyle = 'rgba(255,255,255,' + this.transparency + ')';
        context.fillRect(this.x, this.y, 25, 25);
    };

    var enemies = [];
    for (var i = 0; i < 10; i++) {
        // random numbers from 0 (inclusive) to 100 (exclusive) for example:
        var randomX = Math.random() * 896;
        var randomY = Math.random() * 1303;
        console.log(randomX);
        console.log(randomY);
        if (randomX > 100 && randomX < 1200) {
            if (randomX % 2 === 0) {
                randomX = 140;
            } else {
                randomX = 1281;
            }
        }
        if (randomY > 100 && randomY < 75) {
            if (randomY % 2 === 0) {
                randomY = 15;
            } else {
                randomY = 560;
            }
        }
        var enemy = new Enemy(randomX, randomY, 0, 0, 1);
        enemies.push(enemy);
    }
    for (var i = 0; i < 15; i++) {
        // random numbers from 0 (inclusive) to 100 (exclusive) for example:
        var randomX = Math.random() * 200;
        var randomY = Math.random() * 403;
        console.log(randomX);
        console.log(randomY);
        if (randomX > 100 && randomX < 1200) {
            if (randomX % 2 === 0) {
                randomX = 140;
            } else {
                randomX = 1281;
            }
        }
        if (randomY > 100 && randomY < 75) {
            if (randomY % 2 === 0) {
                randomY = 15;
            } else {
                randomY = 560;
            }
        }
        var enemy = new Enemy(randomX, randomY, 0, 0, 1);
        enemies.push(enemy);
    }

    context.canvas.onmousemove = function (e) {
        var rect = this.getBoundingClientRect(),
            x = e.clientX - rect.left,
            y = e.clientY - rect.top,
            i = 0;

        for (; i < enemies.length; i++) {
            if (enemies[i].isOnEnemy(x, y)) {
                enemies[i].transparency = 0;
            }
        }
    };

    function render() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < enemies.length; i++) {
            var one = enemies[i];
            one.update();
            one.render();
        }
        requestAnimationFrame(render);
    }
    render();
};

Answer 1

问题在于Enemy.prototype.update等的定义

每次调用main()都会定义这些内容，但prototype只能保留1个。因此，在第一次调用之后，每次调用main()都会丢弃并覆盖先前的定义。

Enemy.prototype是每个new Enemy()继承自的对象（ref：MDN: Inheritance and the prototype chain）。这使得它可以用于不会从一个实例更改为另一个实例的共享属性和方法。

由于speed是唯一的更改，因此您可以让实例保持自己的值，允许所有方法的方法相同。还允许您在main()之外定义它们。

Enemy.prototype.update = function () {
    // ...
    this.velx = (tx / dist) * this.speed; // <---
    this.vely = (ty / dist) * this.speed; // <---
    // ...
};

// ...

var main = function (speed) {
    // ...
        var enemy = new Enemy(randomX, randomY, 0, 0, 1);
        enemy.speed = speed; // <---
        enemies.push(enemy);
    // ...
};

如果您可以稍微修改其他代码（＆＃34; 而不改变我实现其余代码的方式＆＃34;），您可以修改构造函数以接受并分配{ {1}}：

speed

function Enemy(speed, x, y, ...) {
    this.speed = speed;
    this.x = x;
    this.y = y;
    // ...
}

Answer 2

您可以在立即调用的函数中创建一个闭包，以保留发送到main的值......

for (var k = 1; k < 6; k++){
  (function(i) {
    main(i);
  })(k);
}

javascript循环中的函数只执行一次

2 个答案: