Browse Source

object-oriented

Bachir Soussi Chiadmi 4 months ago
parent
commit
f857dd4fc8
3 changed files with 111 additions and 0 deletions
  1. 10 0
      object-oriented/assets/css/styles.css
  2. 88 0
      object-oriented/assets/js/main.js
  3. 13 0
      object-oriented/index.html

+ 10 - 0
object-oriented/assets/css/styles.css

@@ -0,0 +1,10 @@
+html{
+  /* background-color: red; */
+}
+
+.rond{
+  position:absolute;
+  width:50px; height:50px;
+  border-radius: 25px;
+  background-color: black;
+}

+ 88 - 0
object-oriented/assets/js/main.js

@@ -0,0 +1,88 @@
+(function(){
+  console.log('hello');
+  var body = document.querySelectorAll('body')[0];
+
+  function Rond(id){
+    this.id = id;
+
+    if (typeof Rond.initialized == "undefined") {
+
+      Rond.prototype.init = function(){
+        this.diametre = 10+Math.random()*50;
+        this.speedx = -10 + Math.random()*10;
+        this.speedy = -10 + Math.random()*10;
+
+        this.position = {
+          top:100+Math.random()*1000,
+          left:100+Math.random()*1000
+        };
+
+        this.draw();
+      };
+
+      Rond.prototype.draw = function(){
+        this.div = document.createElement('div');
+        // this.textnode = document.createTextNode('Hello la div !');
+        // div.appendChild(textnode);
+        body.appendChild(this.div);
+        this.div.classList.add("rond");
+        this.div.style.top = this.position.top+"px";
+        this.div.style.left = this.position.left+"px";
+        this.div.style.width = this.diametre+"px";
+        this.div.style.height = this.diametre+"px";
+        this.div.style.borderRadius = (this.diametre/2)+"px";
+      };
+
+      Rond.prototype.move = function(){
+        this.position = {
+          top:this.position.top+this.speedy,
+          left:this.position.left+this.speedx
+        }
+
+        this.div.style.top = this.position.top+"px";
+        this.div.style.left = this.position.left+"px";
+      };
+
+      Rond.initialized = true;
+    }
+
+    this.init();
+  };
+
+  // function Rond(id){
+  //   this.id = id;
+  //
+  //   if (typeof Rond.initialized == "undefined") {
+  //
+  //     Rond.prototype.init = function(){
+  //
+  //     };
+  //
+  //     Rond.initialized = true;
+  //   }
+  //
+  //   this.init();
+  // };
+  // new Rond();
+
+
+
+  // new Rond(1);
+  // new Rond(2);
+  var ronds = [];
+  for (var i = 0; i < 100; i++) {
+    ronds.push(new Rond(i));
+  }
+
+  function anime(){
+    for (var i = 0; i < ronds.length; i++) {
+      ronds[i].move();
+    }
+    window.requestAnimationFrame(anime);
+  }
+
+  window.requestAnimationFrame(anime);
+
+
+
+})();

+ 13 - 0
object-oriented/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Oriented object</title>
+    <link rel="stylesheet" href="assets/css/styles.css">
+  </head>
+  <body>
+
+
+    <script src="assets/js/main.js" charset="utf-8"></script>
+  </body>
+</html>