Как сделать несколько капель без кодирования everysingle один в функции производителя?

Я пытаюсь получить несколько капель, чтобы появиться, но я не могу их забрать, если я не буду жестко программировать каждый из них, потому что холст продолжает обновляться с помощью функции drawover, я думал использовать массив, но Я не знаю, как это применить.Как сделать несколько капель без кодирования everysingle один в функции производителя?

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>

источник

2017-01-25 user2777173

ли вы пытаетесь использовать массив объектов ALLOB каждый с различными XPOS/YPos по крайней мере? – gotomanners

Я сделал, но он создает случайные точки на холсте. Я смотрел кодовое перо кем-то, чтобы сделать это учебным проектом, но я не понимаю, как он работал над массивом. это ссылка на codepen http://codepen.io/jalabkhan/pen/bgNavG – user2777173

См. ответы ниже. В основном ваша функция-производитель должна генерировать капли дождя и хранить их в массиве. – gotomanners

Я редактировал производителя, чтобы создать 'падение' в случайных х/у позиций. Эти капли добавляются к переменной ALLOB.

В paintover func вы просматриваете коллекцию ALLOB и рисуете каждый drop в списке.

Я также скорость для каждого падения случайного для хорошего эффекта :)

Это должно быть хорошей отправной точкой.

var ALLOB = []; 
 

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

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

 
function paintover() { 
 
    'use strict'; 
 
    ctx.fillStyle = "rgba(0, 0, 0, 0.12)"; 
 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
 
    ALLOB.forEach(function(droplet) { 
 
    drawdrop(droplet); 
 
    }); 
 
    window.requestAnimationFrame(paintover); 
 
} 
 

 
function fall(droplet) { 
 
    'use strict'; 
 
    droplet.ypos += droplet.speed; 
 
    if (droplet.ypos > canvas.height - droplet.lifetime) { 
 
    droplet.ypos = 10; 
 
    } 
 
} 
 

 
function drawdrop(droplet) { 
 
    'use strict'; 
 
    ctx.fillStyle = "#1cbc61"; 
 
    ctx.fillRect(droplet.xpos, droplet.ypos, droplet.recwidth, droplet.recheight); 
 
    fall(droplet) 
 
} 
 

 
function maker() { 
 
    "use strict"; 
 
    ALLOB.push({ 
 
    speed: rand(1.5, 3.5), 
 
    recwidth: 5, 
 
    recheight: 5, 
 
    minvalue: 100, 
 
    maxvalue: 900, 
 
    lifetime: 10, 
 
    xpos: rand(-10, window.innerWidth + 10), 
 
    ypos: rand(-10, window.innerHeight + 10) 
 
    }); 
 

 
} 
 

 
function animate() { 
 
    "use strict"; 
 
    var maxDrops = 100; 
 
    if (ALLOB.length < maxDrops) { 
 
    window.setInterval(function() { 
 
     if (ALLOB.length < maxDrops) { 
 
     maker(); 
 
     } 
 
    }, 30); 
 
    } 
 
    window.requestAnimationFrame(paintover); 
 
} 
 

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

 
animate();

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

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

источник

2017-01-25 16:51:29 gotomanners

Спасибо, друг ... !! – user2777173

Я помог убирать код немного. Таким образом, вы можете использовать переменную ALLOB в качестве типа шаблона для «класса drop». Вы можете создать массив из ALLOB переменных, каждый из которых создается с различными параметрами. Я использовал функцию rand, которую вы уже имели, чтобы рандомизировать параметры ALLOB. Добавьте переменные ALLOB в массив в цикле for.

Тогда другие части вашего кода будут работать одинаково, но вам необходимо выполнить итерацию по массиву и применить изменения капли к каждому экземпляру 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 ++) { 
 
    \t ctx.fillRect(
 
     \t 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>

источник

2017-01-25 16:28:14

Спасибо за помощь ... !! – user2777173

Как сделать несколько капель без кодирования everysingle один в функции производителя?

ответ

Смежные вопросы