Browse Source

inheritance

bach 5 months ago
parent
commit
2fc66cec64
2 changed files with 68 additions and 15 deletions
  1. 57 15
      cours-js/oop.js
  2. 11 0
      cours-js/styles.css

+ 57 - 15
cours-js/oop.js

@@ -1,52 +1,94 @@
 
 // programmation orienté object
 
-class Ball {
+class Particule {
   constructor(id){
     this.id = id;
 
-    this.vitesse_x = (-10 + Math.random() * 20)/100;
-    this.vitesse_y = (-10 + Math.random() * 20)/100;
+    this.vitesse_x = (-10 + Math.random() * 20)/10;
+    this.vitesse_y = (-10 + Math.random() * 20)/10;
 
     this.pos_x =  Math.random() * 500;
     this.pos_y =  Math.random() * 500;  
 
+  }
+  
+  bouge(){
+    // console.log(this);
+    // this.pos_x = this.pos_x + this.vitesse_x
+    this.pos_x += this.vitesse_x;
+    this.pos_y += this.vitesse_y;
+    this.html.style.top = this.pos_y+'px';
+    this.html.style.left = this.pos_x+'px';
+  }
+    
+}
+
+
+class Ball extends Particule {
+  constructor(id){
+    super(id);
+  
     this.html = document.createElement('span');
-    this.html.innerText = this.id;
+    // this.html.innerText = this.id;
     this.html.classList.add('ball');
     this.html.style.top = this.pos_y+'px';
     this.html.style.left = this.pos_x+'px';
     this.html.addEventListener('click', this.click.bind(this))
     document.body.append(this.html);
-  }
   
+  }
+
   click(event){
     // console.log('click', this);
     this.html.style.backgroundColor = "rgb("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+")";
   }
 
-  bouge(){
-    // console.log(this);
-    // this.pos_x = this.pos_x + this.vitesse_x
-    this.pos_x += this.vitesse_x;
-    this.pos_y += this.vitesse_y;
+}
+
+class Carre extends Particule {
+  constructor(id){
+    super(id);
+
+    this.spinspeed = Math.random()*20;
+    this.spinangle = 0;
+
+    this.html = document.createElement('div');
+    // this.html.innerText = this.id;
+    this.html.classList.add('carre');
     this.html.style.top = this.pos_y+'px';
     this.html.style.left = this.pos_x+'px';
+    this.html.style.rotate = this.spinangle;
+    this.html.addEventListener('click', this.click.bind(this))
+    document.body.append(this.html);
   }
-    
-}
 
+  bouge(){
+    super.bouge();
+    this.spinangle += this.spinspeed;
+    this.html.style.rotate = this.spinangle+'deg';
+  }
+
+  click(event){
+    // console.log('click', this);
+    this.html.style.backgroundColor = "rgb("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+")";
+  }
+}
 
 
-var mesballes = [];
+var mesparticules = [];
 var newball, html;
 
 for (let i = 0; i < 100; i++) {
-  mesballes.push(new Ball(i));
+  if(Math.random() > 0.5){
+    mesparticules.push(new Ball(i));
+  }else{
+    mesparticules.push(new Carre(i));
+  }
 }
 
 var animate = function(){
-  mesballes.forEach(ball => {
+  mesparticules.forEach(ball => {
     ball.bouge();
   });
 

+ 11 - 0
cours-js/styles.css

@@ -13,4 +13,15 @@ ul{
     display: block;
     cursor: pointer;
     color: white;
+}
+.carre{
+    background-color: blue;
+    /* border-radius: 10px; */
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    display: block;
+    cursor: pointer;
+    color: white;
+    
 }