bachir/clubinfo-2526
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

OOP

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2025-11-07 17:04:06 +01:00
parent a82fe03a3d
commit e778fbd5be
3 changed files with 109 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
oop/index.html Normal file
View File

@@ -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>

79
oop/script.js Normal file
View File

@@ -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);

16
oop/styles.css Normal file
View File

@@ -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%; */
}