OOP

2025-11-07 17:04:06 +01:00
parent a82fe03a3d
commit e778fbd5be
3 changed files with 109 additions and 0 deletions
--- a/oop/index.html
+++ b/oop/index.html
@@ -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>OOP</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <!-- <h1>Salut</h1> -->
+  <canvas id="scene"></canvas>
+  <script src="script.js"></script>
+</body>
+</html>
--- a/oop/script.js
+++ b/oop/script.js
@@ -0,0 +1,79 @@
+let canvas = document.getElementById('scene');
+let ctx = canvas.getContext("2d");
+
+
+let resizeCanvas = () => {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;  
+}
+resizeCanvas()
+
+
+let onResize = (event) => {
+  resizeCanvas()
+}
+
+window.addEventListener('resize', onResize);
+
+// ctx.fillStyle = "green";
+// ctx.fillRect(300, 300, 100, 100);
+
+
+
+
+class Boule {
+  constructor(x, y, s) {
+    // this.x = x;
+    // this.y = y;
+    this.pos = {
+      x: x,
+      y: y
+    }
+    this.size = s
+    this.vx = -2+Math.random()*4;
+    this.vy = -2+Math.random()*4;
+  }
+
+  draw(){
+    // console.log('draw', this);
+    ctx.beginPath();
+    ctx.fillStyle = 'red';
+    ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
+    // ctx.fillRect(300, 300, 100, 100);
+    ctx.fill();
+  }
+
+  move(){
+    this.pos.x += this.vx;
+    this.pos.y += this.vy;
+    this.draw();
+  }
+}
+
+
+
+
+let boules = [];
+let maboule;
+for (let index = 0; index < 10000; index++) {
+  maboule = new Boule(
+    Math.random()*canvas.width, 
+    Math.random()*canvas.height,
+    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);  
+}
+
+window.requestAnimationFrame(anime);
--- a/oop/styles.css
+++ b/oop/styles.css
@@ -0,0 +1,16 @@
+body{
+  margin: 0;
+}
+
+h1{
+  font-size: 18em;
+}
+
+canvas#scene{
+  position: absolute;
+  z-index: 10;
+  top:0;
+  left:0;
+  /* width: 100%;
+  height:100%; */
+}