From e778fbd5be8f420af5990c4dea1f8128ed7fe650 Mon Sep 17 00:00:00 2001 From: bach Date: Fri, 7 Nov 2025 17:04:06 +0100 Subject: [PATCH] OOP --- oop/index.html | 14 +++++++++ oop/script.js | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++ oop/styles.css | 16 ++++++++++ 3 files changed, 109 insertions(+) create mode 100644 oop/index.html create mode 100644 oop/script.js create mode 100644 oop/styles.css diff --git a/oop/index.html b/oop/index.html new file mode 100644 index 0000000..233dc22 --- /dev/null +++ b/oop/index.html @@ -0,0 +1,14 @@ + + + + + + OOP + + + + + + + + \ No newline at end of file diff --git a/oop/script.js b/oop/script.js new file mode 100644 index 0000000..3f0d8d7 --- /dev/null +++ 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); \ No newline at end of file diff --git a/oop/styles.css b/oop/styles.css new file mode 100644 index 0000000..e08d1ed --- /dev/null +++ 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%; */ +} \ No newline at end of file