138 lines
3.7 KiB
JavaScript
138 lines
3.7 KiB
JavaScript
console.log('document', document);
|
|
|
|
let body = document.getElementById('body');
|
|
console.log('body', body);
|
|
|
|
let h = Math.random()*0;
|
|
let s = Math.random()*0;
|
|
let l = Math.random()*0;
|
|
body.style.backgroundColor = `hsl(${h} ${s} ${l})`;
|
|
|
|
|
|
// boules
|
|
let boules = [];
|
|
for (let index = 0; index < 100; index=index+1) {
|
|
boules[index] = document.createElement('div');
|
|
boules[index].classList.add('boule');
|
|
// boules[index].style.backgroundColor = 'rgb(255,0,255)';
|
|
|
|
// Hue Saturation Luminosité
|
|
boules[index].style.backgroundColor = 'hsl(180 180 50)';
|
|
|
|
|
|
// moitié couleur
|
|
if (index < 50) {
|
|
boules[index].style.backgroundColor = "green";
|
|
} else {
|
|
boules[index].style.backgroundColor = 'rgb(255,0,200)';
|
|
}
|
|
|
|
|
|
boules[index].style.top = (Math.random() * 1080)+ "px";
|
|
boules[index].style.left = (Math.random()* 1920) + "px";
|
|
|
|
let rayon = 20 + Math.random()*30;
|
|
boules[index].style.width = rayon+"px";
|
|
boules[index].style.height = rayon+"px";
|
|
boules[index].style.borderRadius = (rayon/2)+"px"
|
|
|
|
body.append(boules[index]);
|
|
}
|
|
console.log('boules', boules);
|
|
|
|
// losanges
|
|
let losanges = [];
|
|
for (let index = 0; index < 50; index++) {
|
|
losanges[index] = document.createElement('div');
|
|
losanges[index].classList.add('losange');
|
|
losanges[index].style.position = "absolute";
|
|
losanges[index].style.width = "30px";
|
|
losanges[index].style.height = "30px";
|
|
losanges[index].style.backgroundColor = `hsl(${index*3.6} 100 50)`;
|
|
losanges[index].style.top = (Math.random() * 1080) + "px";
|
|
losanges[index].style.left = (Math.random() * 1920) + "px";
|
|
losanges[index].style.transform = "rotate(45deg)"; // le fait ressembler à un losange
|
|
|
|
body.append(losanges[index]);
|
|
}
|
|
console.log('losanges', losanges);
|
|
|
|
// staaaarrrsss
|
|
|
|
let carre1 = document.createElement('div');
|
|
carre1.style.position = "absolute";
|
|
carre1.style.width = "30px";
|
|
carre1.style.height = "30px";
|
|
carre1.style.backgroundColor = "yellow";
|
|
carre1.style.top = "100px";
|
|
carre1.style.left = "100px";
|
|
carre1.style.transform = "rotate(45deg)"; // le premier losange
|
|
body.append(carre1);
|
|
|
|
let carre2 = document.createElement('div');
|
|
carre2.style.position = "absolute";
|
|
carre2.style.width = "30px";
|
|
carre2.style.height = "30px";
|
|
carre2.style.backgroundColor = "yellow";
|
|
carre2.style.top = "100px"; // même position que le premier
|
|
carre2.style.left = "100px";
|
|
carre2.style.transform = "rotate(90deg)";
|
|
body.append(carre2);
|
|
|
|
|
|
let stars = [];
|
|
for (let index = 0; index < 10; index++) {
|
|
let x = Math.random() * window.innerWidth; // pour bien aligner/avoir la même positoin et "window[...]" c'est pour s'adapter à n'importe quelle taille d'écran
|
|
let y = Math.random() * window.innerHeight;
|
|
let size = 20 + Math.random()*20;
|
|
|
|
let carre1 = document.createElement('div');
|
|
let carre2 = document.createElement('div');
|
|
|
|
[carre1, carre2].forEach((carre, index) => {
|
|
carre.style.position = "absolute";
|
|
carre.style.width = size + "px";
|
|
carre.style.height = size + "px";
|
|
carre.style.backgroundColor = "yellow";
|
|
carre.style.top = y + "px";
|
|
carre.style.left = x + "px";
|
|
carre.style.transform = index === 0 ? "rotate(45deg)" : "rotate(90deg)";
|
|
body.append(carre);
|
|
});
|
|
|
|
stars.push([carre1, carre2]);
|
|
}
|
|
|
|
console.log('stars', stars);
|
|
|
|
let monanime = () => {
|
|
let i = 0;
|
|
boules.forEach((boule) => { l
|
|
let vitesse_x
|
|
let vitesse_y
|
|
|
|
|
|
if (boule.style.backgroundColor == "green") {
|
|
vitesse_x = 2;
|
|
vitesse_y = 2;
|
|
}
|
|
|
|
else {
|
|
vitesse_x = -3;
|
|
vitesse_y = -3;
|
|
}
|
|
|
|
|
|
boule.style.left = (boule.offsetLeft+vitesse_x)+"px"
|
|
boule.style.top = (boule.offsetTop+vitesse_y)+"px"
|
|
|
|
i++;
|
|
});
|
|
|
|
window.requestAnimationFrame(monanime);
|
|
}
|
|
console.log('boules[0]');
|
|
|
|
window.requestAnimationFrame(monanime);
|
|
|