Увеличение количества массивов без его сброса (Javascript / Canvas)

Question

В моем проекте я хочу, чтобы размер моего массива увеличивался каждые 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;

    }
}

Answer 1

Вы переопределяете все существующие значения, поэтому вместо использования myPlants[i] = plant; используйте myPlants.push(plant)

Answer 2

Вы захотите изменить свою функцию, добавив растение в существующий массив, вместо того, чтобы зацикливать свой массив и присваивать ему новые значения.

, если вы хотите добавлять новое значение в свой массив каждый5 секунд, что-то вроде этого должно работать:

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

function createPlants() {

     reproducePlants();

     setInterval(reproducePlants, 5000);

}   

function reproducePlants() {

    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.push(plant);
}

Это просто добавляет новый завод в конец вашего массива, а не присваивает новые значения вашему текущему массиву каждый раз, когда вы вызываете свою функцию.Отсюда вы сможете поместить это в цикл for, если хотите добавить больше растений, чем 1 за раз.каждая итерация цикла добавит в ваш массив только один план.

Answer 3

Вы явно сбрасываете все значения массива, когда делаете это:

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

Обратите внимание, что plantSpawn будет содержать новый размер массива, поэтому вы перебираете все старые индексы плюсновые и переназначение их значений.

Таким образом, вместо этого вы можете добавить 5 новые элементы в массив с помощью Array.push () следующим образом:

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());
    }
}