javascript - 我如何在不在制造商功能中对每个单独的代码进行编码的情况下进行多次转换？

Question

我一直在尝试让多个水滴出现，但我似乎无法让它们进入，除非我对每个水滴都进行硬编码，因为 Canvas 不断刷新 drawover 功能，我想使用一个数组，但我不知道如何应用它。

var ALLOB = {
    speed: 3,
    recwidth: 5,
    recheight: 5,
    minvalue: 100,
    maxvalue: 900,
    lifetime: 10,
    xpos: 10,
    ypos: 10
};

function rand(min, max) {
    "use strict";
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var canvas = document.querySelector("#make");
var ctx = canvas.getContext("2d");

function setCanvasWidth() {
    "use strict";
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
}
setCanvasWidth();

function paintover() {
    'use strict';
    ctx.fillStyle = "rgba(0, 0, 0, 0.12)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function fall() {
    'use strict';
    ALLOB.ypos = ALLOB.ypos + ALLOB.speed;
    if (ALLOB.ypos > canvas.height - ALLOB.lifetime) {
        ALLOB.ypos = 10;
    }
}
function drawdrop(x, y) {
    'use strict';
    ctx.fillStyle = "#1cbc61";
    ctx.fillRect(ALLOB.xpos + x, ALLOB.ypos + y, ALLOB.recwidth, ALLOB.recheight);
       
}
function maker() {
    "use strict";
    drawdrop(400, 10);
}

function animate() {
    "use strict";
    paintover();
    maker();
    fall();
}

setInterval(animate, 30);

canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

<canvas id="make"></canvas>

Answer 1

我帮助整理了一些代码。因此，您可以将 ALLOB 变量用作“删除类”的模板类型。您可以创建一个 ALLOB 变量数组，每个变量使用不同的参数创建。我利用了您已经拥有的 rand 函数来随机化 ALLOB 参数。在 for 循环中将 ALLOB 变量添加到数组。

然后您的代码的其他部分将以相同的方式工作，但您需要遍历数组，并将删除更改应用到 ALLOB 的每个实例。

number_of_drops = 10;

var ALLOB_ARRAY = [];

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

    var ALLOB = {
      speed: rand(1,10),
      recwidth: 3,
      recheight: 3,
      lifetime: rand(5,15),
      xpos: rand(0,window.innerWidth),
      ypos: rand(0,window.innerHeight)
    };
  
  ALLOB_ARRAY.push(ALLOB)

}

function rand(min, max) {
    "use strict";
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var canvas = document.querySelector("#make");
var ctx = canvas.getContext("2d");

function setCanvasWidth() {
    "use strict";
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
}
setCanvasWidth();

function paintover() {
    'use strict';
    ctx.fillStyle = "rgba(0, 0, 0, 0.12)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function fall() {
    'use strict';
    for (var i = 0; i < ALLOB_ARRAY.length; i ++ ) {
      ALLOB_ARRAY[i].ypos = ALLOB_ARRAY[i].ypos + ALLOB_ARRAY[i].speed;
      if (ALLOB_ARRAY[i].ypos > canvas.height - ALLOB_ARRAY[i].lifetime) {
        ALLOB_ARRAY[i].ypos = 10;
      }
    }
}
function drawdrops() {
    'use strict';
    ctx.fillStyle = "#1cbc61";
    for (var i = 0; i < ALLOB_ARRAY.length; i ++ ) {
    	ctx.fillRect(
      	ALLOB_ARRAY[i].xpos, 
        ALLOB_ARRAY[i].ypos, 
        ALLOB_ARRAY[i].recwidth, 
        ALLOB_ARRAY[i].recheight
      );
    }
       
}

function animate() {
    "use strict";
    paintover();
    drawdrops();;
    fall();
}

setInterval(animate, 30);

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

<canvas id="make"></canvas>