如何在製造商功能中使用多次編碼而無需編碼？

我一直試圖讓多滴出現，但我似乎無法讓他們進入，除非我硬編碼每一個，因爲畫布保持刷新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>

來源

2017-01-25 user2777173

你有沒有嘗試使用ALLOB對象的數組均與至少不同的XPOS/ypos？我做了 – gotomanners

，但它在畫布上創建了隨機點。我看了一個人的代碼筆，將其作爲一個學習項目，但我不明白他是如何使陣列工作。這是鏈接到codepen http://codepen.io/jalabkhan/pen/bgNavG – user2777173

請參閱下面的答案。基本上你的製造商功能應該是產生雨滴並將它們存儲在一個陣列中。 – gotomanners

我編輯機，以生成隨機的x/y位置的 '下拉'。這些放置被添加到ALLOB變量。

在paintover函數中，您循環訪問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 class」的模板類型。您可以創建一個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 ++) { 
 
    \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

如何在製造商功能中使用多次編碼而無需編碼？

回答

相關問題