-
Notifications
You must be signed in to change notification settings - Fork 14
/
script.js
63 lines (56 loc) · 2.4 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
(function() {
const numOfFlowers = 4;
const growGarden = () => {
function getRandomArbitrary(min, max) {
return Math.round(Math.random() * (max - min)) + min;
}
let positions = [];
function getNum(){
let pos = getRandomArbitrary(0, 100);
for(let x = 0; x < positions.length; x++){
if(pos > positions[x] - 3 && pos < positions[x] + 3){
return false;
}
}
positions.push(pos);
}
while(positions.length < numOfFlowers){
getNum();
}
let more = setInterval(function() {
let flwr = document.createElement('div');
let dim = getRandomArbitrary(30, 80);
let leftPos = positions[0];
positions.shift();
flwr.classList.add('sunflwr');
flwr.innerHTML = `<div class="sunflwr__leaf--left"></div>
<div class="sunflwr__leaf--right"></div>
<div class="sunflwr__stem"></div>
<div class="sunflwr__center"></div>
<div class="sunflwr__pedal--1"></div>
<div class="sunflwr__pedal--2"></div>
<div class="sunflwr__pedal--3"></div>
<div class="sunflwr__pedal--4"></div>
<div class="sunflwr__pedal--5"></div>
<div class="sunflwr__pedal--6"></div>
<div class="sunflwr__pedal--7"></div>
<div class="sunflwr__pedal--8"></div>
<div class="sunflwr__pedal--9"></div>
<div class="sunflwr__pedal--10"></div>
<div class="sunflwr__pedal--11"></div>
<div class="sunflwr__pedal--12"></div>`;
flwr.style.left = `${leftPos}vw`;
flwr.style.height = `${dim}vmin`;
flwr.style.width = `${dim}vmin`;
flwr.style.zIndex = 100 - dim;
flwr.style.filter = `saturate(${getRandomArbitrary(70, 100)}%) brightness(${getRandomArbitrary(80, 150)}%)`;
document.querySelector('body').appendChild(flwr);
}, 150);
setTimeout(function() {
window.clearInterval(more);
}, numOfFlowers * 150);
}
document.body.addEventListener('click', () => {
growGarden();
});
})();