时间戳

首页 > 解决方案 > 增加数组数量而不重置它（Javascript/Canvas）

javascript - 增加数组数量而不重置它（Javascript/Canvas）

问题描述

在我的项目中，我希望我的数组每 5 秒增加一次。我尝试使用 setInterval 调用一个函数来执行此操作，但它每 5 秒重置一次我的数组，数量增加而不是自然增长。有没有办法增加数量而不必每次都重置数组？

这些是我用来称呼我的“植物”的功能：

var myPlants = new Array();
var plantSpawn = 0;

function createPlants() {

    reproducePlants();

    setInterval(reproducePlants, 5000);

}   

function reproducePlants() {
    plantSpawn += 5;

    for(var i=0; i<plantSpawn; i++){

        var rr = Math.round(Math.random() * 150);
        var gg = Math.round(Math.random() * 255);
        var bb = Math.round(Math.random() * 150);

        var plant = new Object();
            plant.x = Math.random() * canvas.width;
            plant.y = Math.random() * canvas.height;
            plant.rad = 2;
            plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';

        myPlants[i] = plant;

    }
}

标签： javascriptarrayscanvas

解决方案

执行此操作时，您正在显式重置数组的所有值：

for(var i=0; i < plantSpawn; i++){... myPlants[i] = plant; ...}

请注意，plantSpawn它将保存新的数组大小，因此您将遍历所有旧索引以及新索引并重新分配它们的值。

因此，您可以使用Array.push()以这种方式将5新元素添加到数组中：

var myPlants = new Array();
var plantsInc = 5;

function createPlants()
{
    reproducePlants();
    setInterval(reproducePlants, 5000);
}

function reproducePlants()
{
    // Push N new plants on the array.

    for (var i = 0; i < plantsInc; i++)
    {
        var rr = Math.round(Math.random() * 150);
        var gg = Math.round(Math.random() * 255);
        var bb = Math.round(Math.random() * 150);

        var plant = new Object();
        plant.x = Math.random() * canvas.width;
        plant.y = Math.random() * canvas.height;
        plant.rad = 2;
        plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';

        // Push a new plant on the array.
        myPlants.push(plant);
    }
}

作为建议，您甚至可以将创建新工厂的逻辑封装在方法中，如下所示：

var myPlants = new Array();
var plantsInc = 5;

function createPlants()
{
    reproducePlants();
    setInterval(reproducePlants, 5000);
}

function createPlant()
{
    var rr = Math.round(Math.random() * 150);
    var gg = Math.round(Math.random() * 255);
    var bb = Math.round(Math.random() * 150);

    var plant = new Object();
    plant.x = Math.random() * canvas.width;
    plant.y = Math.random() * canvas.height;
    plant.rad = 2;
    plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';
    return plant;
}

function reproducePlants()
{
    // Push N new plants on the array.

    for (var i = 0; i < plantsInc; i++)
    {
        myPlants.push(createPlant());
    }
}

推荐阅读