oop

oop/script.js

@@ -15,27 +15,46 @@ function degToRad(deg) {
 // une loop ne peut pas fonctionner car l'image ne se rafraîchit pas entre les iteration de boucle
 // for (let index = 0; index < array.length; index++) {  
 // }
+// Une classe est un object que l'on va cloner, on va créer des instances de bidule
+class Bidule {
+  // le constructeur est appeler une fois au moment de new Bidule
+  constructor(r, x, y) {
+    // on definie les valeur de départ propre a chauqe instance
+    // 'this' correpsond a l'instance, autant de 'this' que d'instance
+    this.r = r;
+    this.x = x;
+    this.y = y;
+    this.a = 360;
+    this.vitesse = {
+      x:-2+Math.random()*4,
+      y:-2+Math.random()*4
+    }
+  }
+  // les methodes sont comme des fonction mais propre a chaque instance
+  bouge(){
+    this.x += this.vitesse.x;
+    this.y += this.vitesse.y;
+    this.dessine();
+  }
+  dessine(){
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.r, 0, degToRad(this.a));
+    ctx.fill();
+  }
+}
 
-let pos = {
-  x:50,
-  y:50,
-  r: 20,
-  a: 0
+let mesBidules = [];
+for (let i = 0; i < 2000; i++) {
+  mesBidules.push(new Bidule(2 + Math.random()*4, Math.random()*canvas.width, Math.random()*canvas.height));
 }
 
 let monAnime = function(){
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   
-  // pos.x = pos.x +1;
-  pos.x += 2;
-  // pos.x++;
-  // pos.r++;
-  pos.a++;
-  ctx.beginPath();
-  ctx.arc(pos.x, pos.y, pos.r, degToRad(pos.a), degToRad(pos.a+180));
-  ctx.stroke();
+  mesBidules.forEach(bidule => {
+    bidule.bouge();
+  });
 
-  // on relance la fonction a la prochaine frame
   window.requestAnimationFrame(monAnime);
 }