first commit :D

2025-11-14 18:35:30 +01:00
commit 6e346ac2c3
9 changed files with 567 additions and 0 deletions
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OOP</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <canvas id="scene"></canvas>
+  <script src="script.js"></script>
+</body>
+</html>
@@ -0,0 +1,113 @@
+//Prend l'éléménet Canva
+let canvas = document.getElementById('scene');
+//Dit que la scène est en 2D
+let ctx = canvas.getContext("2d");
+
+//modifie la taille
+let resizeCanvas = () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+//Applique la modification
+resizeCanvas()
+
+let onResize = (envent) => {
+    resizeCanvas()
+}
+
+window.addEventListener("resize", onResize);
+
+//class = majuscule / En gros défini les fonctions des boules unique
+class Boule {
+    constructor(x,y,s){
+        this.pos = {
+            x: x,
+            y: y
+        }
+        this.size = s
+        this.vx = -5+Math.random()*10;
+        this.vy = -5+Math.random()*10;
+
+        //j'ai pas compris les ||
+        // Collision avec les bords du canvas
+        if (this.pos.x + this.size > canvas.width || this.pos.x - this.size < 0) {
+             this.vx *= -1; // inverse la direction horizontale
+        }
+
+        if (this.pos.y + this.size > canvas.height || this.pos.y - this.size < 0) {
+           this.vy *= -1; // inverse la direction verticale
+}
+
+        
+
+    }
+
+    draw(){
+        
+        var randomColor = getRandomColor();
+
+        ctx.beginPath();
+        //cercle
+        ctx.arc(this.pos.x, this.pos.y, this.size, -10+Math.random()*20, 2 * Math.PI);
+        //randomcolor
+        ctx.fillStyle = randomColor;
+        ctx.fill();
+        ctx.strokeStyle = randomColor;
+        ctx.stroke();
+    }
+
+    move(){
+        this.pos.x += this.vx;
+        this.pos.y += this.vy;
+
+        // Collision avec les bords du canvas
+         if (this.pos.x + this.size > canvas.width || this.pos.x - this.size < 0) {
+             this.vx *= -1;
+          }
+
+          if (this.pos.y + this.size > canvas.height || this.pos.y - this.size < 0) {
+              this.vy *= -1;
+          }
+
+        
+        this.draw();
+    }
+}
+
+let boules = [];
+let maboule;
+for (let index = 0; index < 10000; index++) {
+    maboule = new Boule(
+        //dans quelle zone ça spawn
+        Math.random()*canvas.width,
+        Math.random()*canvas.height,
+        //taille
+        2+Math.random()*10
+    );
+    maboule.draw();
+    boules.push(maboule);
+
+}
+
+let anime = () => {
+    ctx.clearRect(0,0, canvas.width, canvas.height)
+    boules.forEach((boule) => {
+        boule.move();
+
+    })
+    window.requestAnimationFrame(anime);
+}
+
+//fonction randomcolor
+function getRandomColor() {
+    var letters = '0123456789ABCDEF';
+    var color = '#';
+    for (var i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 80 )];
+    }
+    return color;
+}
+
+window.requestAnimationFrame(anime);
+
+
@@ -0,0 +1,14 @@
+body{
+    margin: 0;
+    background-color: black;
+  }
+  
+  
+canvas#scene{
+    position: absolute;
+    z-index: 10;
+    top:0;
+    left:0;
+    /* width: 100%;
+    height:100%; */
+  }