karine.huang/Club-info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit :D

Browse Source
This commit is contained in:
Karine HUANG 2025-11-14 17:35:38 +01:00
commit 13e6f240a3
6 changed files with 294 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
club-info/base-js/base.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css"
</head>
<body id="body">
<script src="script.js"></script>
</body>
</html>

78
club-info/base-js/script.js Normal file
View File

@ -0,0 +1,78 @@
console.log('hello');
let x = 5
let a = 10
let b = 2
let y;
y = a*x + b;
console.log(y);
console.log(outerHeight);
let leprenomdelours = 'hubert';
console.log(leprenomdelours);
let leprenomduloup = 'maurice';
console.log (leprenomduloup);
let letitredemacomptine = leprenomdelours + "&" + leprenomduloup;
console.log(letitredemacomptine);
console.log('document',document);
let balle = document.createElement('div');
balle.classList.add('balle');
body.prepend(balle);
let boules = [];
for (let index = 0; index < 200; index=index+1) {
boules[index] = document.createElement('div');
boules[index].classList.add('boule');
boules[index].style.backgroundColor = 'hsl(150 30 60)';
boules[index].style.backgroundColor = 'hsl(180 50 '+index+')';
boules[index].style.backgroundColor = 'hsl(180 50 ${index})';
boules[index].style.backgroundColor = 'hsl(180 ${index} 50)';
//boules[index].style.backgroundColor = 'hsl(${index*"3.6"} 80 80)';
boules[index].style.top = Math.random()*850+"px";
boules[index].style.left = Math.random()*1650+"px";
let rayon = 40 + Math.random()*60;
boules[index].style.witdh = rayon+'px';
boules[index].style.height = rayon+'px';
boules[index].style.borderRadius = (rayon/12)+'px';
body.append(boules[index]);
}
console.log('boules', boules);
let monanime = () => {
let i = 0;
boules.forEach((boule) => {
let impair = i%2;
let vitesse_x;
let vitesse_y;
if (impair) {
vitesse_x = vitesse_y = 3;
} else {
vitesse_x = vitesse_y = -3;
}
boule.style.bottom = (boule.offsetBottom+vitesse_x)+"px";
boule.style.top = (boule.offsetTop+vitesse_y)+"px";
i++;
});
window.requestAnimationFrame(monanime);
}
console.log('boules[0]', boules[0]);
window.requestAnimationFrame(monanime);

19
club-info/base-js/styles.css Normal file
View File

@ -0,0 +1,19 @@
body {background-color: rebeccapurple
}
div.balle{
width: 20px;
height: 20px;
border-radius: 70px;
background-color: rgba(194, 65, 65, 0.863);
}
div.boule{
position:absolute;
width: 70px;
height: 500px;
border-radius: 10px;
background-color: rosybrown;
opacity: 0.7;
}

16
club-info/canva/index.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OOP</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<h1>hii</h1>
<canvas id="scene"> </canvas>
<script src="script.js"></script>
</body>
</html>

151
club-info/canva/script.js Normal file
View File

@ -0,0 +1,151 @@
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);
class Boule {
constructor (x,y,s) {
this.pos = {
x:x,
y:y,
}
this.size = s
this.vx = -2+Math.random()*4;
this.vy = -2+Math.random()*4;
this.color = {
h:360,
s:50,
l:50
}
}
draw(){
ctx.beginPath();
ctx.fillStyle = `hsl(${this.color.h},${this.color.s}%,${this.color.l}%)`;
ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
ctx.fill();
/*ctx.fillStyle = "red";
ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
ctx.fill();*/
}
move(){
this.pos.x += this.vx;
this.pos.y += this.vy;
if (this.pos.x >= canvas.width || this.pos.x <= 0){
this.vx *=-1;
}
if (this.pos.y >= canvas.height || this.pos.y <= 0 ){
this.vy *=-1;
}
this.draw();
}
}
let boules = [];
let maboule;
function createBoule(){
maboule = new Boule(
canvas.width / 2,
canvas.height / 2,
2+Math.random()*10
);
maboule.draw();
boules.push(maboule);
}
setInterval(()=>{
createBoule();
},100)
let anime = () =>{
ctx.clearRect(0,0, canvas.width, canvas.height)
for (let i = 0; i < boules.length; i++) {
let boule_a = boules[i];
for (let j = i+1; j < boules.length; j++) {
let boule_b = boules[j];
// distance entre les centre des boules
let dist = Math.sqrt(
Math.pow(boule_b.pos.x - boule_a.pos.x, 2) +
Math.pow(boule_b.pos.y - boule_a.pos.y, 2)
);
if(dist < boule_a.size+boule_b.size){
nx = (boule_b.pos.x - boule_a.pos.x)/dist;
ny = (boule_b.pos.y - boule_a.pos.y)/dist;
vA_n = boule_a.vx*nx + boule_a.vy*ny
vB_n = boule_b.vx*nx + boule_b.vy*ny
boule_a.vx += (vB_n - vA_n) * nx
boule_a.vy += (vB_n - vA_n) * ny
boule_b.vx += (vA_n - vB_n) * nx
boule_b.vy += (vA_n - vB_n) * ny
boule_a.move();
boule_b.move();
}
}
boule_a.move();
}
window.requestAnimationFrame(anime);
}
window.requestAnimationFrame(anime);
let onMouseMove = (event) => {
// console.log('event', event);
// h 0 -> 360
// x 0 -> canvas.width
let h = 360 * (event.x / canvas.width);
// console.log('h', h);
let s = 100 * (event.y / canvas.height)
console.log('s', s);
boules.forEach(boule => {
boule.color.h = h;
boule.color.s = s;
});
}
window.addEventListener('mousemove', onMouseMove);
/*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
club-info/canva/styles.css Normal file
View File

@ -0,0 +1,16 @@
body{
margin: 0;
}
h1{
font-size: 10em;
}
canvas#scene{
position: absolute;
z-index: 10;
top: 0;
left: 0;
/*width: 100%;
height: 100%;*/
}