first commit

2025-11-14 18:35:41 +01:00
commit af812baf03
9 changed files with 520 additions and 0 deletions
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body id="body">
+
+
+  <script src="script.js"></script>
+</body>
+</html>
@@ -0,0 +1,137 @@
+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);
+
@@ -0,0 +1,25 @@
+  div.boule{
+    position: absolute;
+    width: 10px;
+    height:10px;
+    border-radius: 10px;
+
+  }
+
+  div.losanges{
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    
+}
+      
+div.stars{
+    position: absolute
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+
+}
+
+