gabrielle.guichard/ClubInfo_OOP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Gabrielle GUICHARD 2025-11-14 18:35:41 +01:00
commit af812baf03
9 changed files with 520 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
Bases_JS/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>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body id="body">
<script src="script.js"></script>
</body>
</html>

118
Bases_JS/script.js Normal file
View File

@ -0,0 +1,118 @@
console.log('Salut :)');
// Les variables
// fonction d'une droite
// y = ax + b
// x et y sont des variables
// variable type number
let x = 3;
let a = 2;
let b = 23;
let y;
y = a*x + b;
console.log(y);
console.log(outerHeight);
// variable string (chaine de charactères)
let leprenomdelours = "hubert";
console.log(leprenomdelours);
let leprenomduloup = "maurice";
console.log(leprenomduloup);
// concatenation
let letritredemacomptine = leprenomdelours + " & " + leprenomduloup;
console.log(letritredemacomptine);
console.log(a + letritredemacomptine);
// boolean (vrai ou faux)
// https://fr.wikipedia.org/wiki/Alg%C3%A8bre_de_Boole_(logique)
let jesuisunevache = false;
let youaregreat = true;
console.log(jesuisunevache, youaregreat);
// comparaison
let lalignedescend = a < 0;
console.log("lalignedescend", lalignedescend);
// random (Aleatoire)
let unnombrealeatoire = 50 + Math.random() * 50;
// Array (tableau)
let malistedecourses = [
"beurre",
"salade",
"glace",
10,
true
];
console.log("malistedecourses", malistedecourses[0]);
// Object (objet)
let malistedecourseencoremieux = {
"biocoop": "l'adresse de biocoop",
"intermarcher": 99,
"salut": false
}
console.log("malistedecourseencoremieux", malistedecourseencoremieux.biocoop);
// nested (imbriquer)
let objectarraynested = {
"biocoop":[
{'beurre':1},
{'yahourt':10}
],
'leclerc':[
{'essence':10}
]
}
console.log("objectarraynested", objectarraynested);
// comment afficher des trucs
// créer un element html virtuel
console.log('document', document);
let body = document.getElementById('body');
console.log('body', body);
let h = Math.random()*360;
let s = Math.random()*100;
let l = Math.random()*100;
body.style.backgroundColor = `hsl(${h} ${s} ${l})`;
let balle = document.createElement('div');
balle.classList.add('balle');
body.prepend(balle);
// Les boucles
let boules = [];
for (let index = 0; index < 100; index=index+1) {
boules[index] = document.createElement('div');
boules[index].classList.add('boule');
// boules[index].style.backgroundColor = 'rgb(255,0,255)';
// HSL Hue Saturation Luminosity
// boules[index].style.backgroundColor = 'hsl(180 50 50)';
// 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} 50 50)`;
boules[index].style.top = Math.random()*700+"px";
boules[index].style.left = Math.random()*700+"px";
let rayon = 20 + Math.random()*30;
boules[index].style.width = rayon+"px";
boules[index].style.height = rayon+"px";
boules[index].style.borderRadius = (rayon/2)+"px"
body.append(boules[index]);
}
console.log('boules', boules);

23
Bases_JS/styles.css Normal file
View File

@ -0,0 +1,23 @@
body{
background-color: aqua;
}
h1{
font-weight: 900;
font-size: 240px;
}
div.balle{
width: 20px;
height:20px;
border-radius: 10px;
background-color: black;
}
div.boule{
position: absolute;
width: 10px;
height:10px;
border-radius: 10px;
background-color: red;
}

14
Test_Bases/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>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body id="body">
<script src="script.js"></script>
</body>
</html>

137
Test_Bases/script.js Normal file
View File

@ -0,0 +1,137 @@
console.log('document', document);
let body = document.getElementById('body');
console.log('body', body);
let h = Math.random()*0;
let s = Math.random()*0;
let l = Math.random()*0;
body.style.backgroundColor = `hsl(${h} ${s} ${l})`;
// boules
let boules = [];
for (let index = 0; index < 100; index=index+1) {
boules[index] = document.createElement('div');
boules[index].classList.add('boule');
// boules[index].style.backgroundColor = 'rgb(255,0,255)';
// Hue Saturation Luminosité
boules[index].style.backgroundColor = 'hsl(180 180 50)';
// moitié couleur
if (index < 50) {
boules[index].style.backgroundColor = "green";
} else {
boules[index].style.backgroundColor = 'rgb(255,0,200)';
}
boules[index].style.top = (Math.random() * 1080)+ "px";
boules[index].style.left = (Math.random()* 1920) + "px";
let rayon = 20 + Math.random()*30;
boules[index].style.width = rayon+"px";
boules[index].style.height = rayon+"px";
boules[index].style.borderRadius = (rayon/2)+"px"
body.append(boules[index]);
}
console.log('boules', boules);
// losanges
let losanges = [];
for (let index = 0; index < 50; index++) {
losanges[index] = document.createElement('div');
losanges[index].classList.add('losange');
losanges[index].style.position = "absolute";
losanges[index].style.width = "30px";
losanges[index].style.height = "30px";
losanges[index].style.backgroundColor = `hsl(${index*3.6} 100 50)`;
losanges[index].style.top = (Math.random() * 1080) + "px";
losanges[index].style.left = (Math.random() * 1920) + "px";
losanges[index].style.transform = "rotate(45deg)"; // le fait ressembler à un losange
body.append(losanges[index]);
}
console.log('losanges', losanges);
// staaaarrrsss
let carre1 = document.createElement('div');
carre1.style.position = "absolute";
carre1.style.width = "30px";
carre1.style.height = "30px";
carre1.style.backgroundColor = "yellow";
carre1.style.top = "100px";
carre1.style.left = "100px";
carre1.style.transform = "rotate(45deg)"; // le premier losange
body.append(carre1);
let carre2 = document.createElement('div');
carre2.style.position = "absolute";
carre2.style.width = "30px";
carre2.style.height = "30px";
carre2.style.backgroundColor = "yellow";
carre2.style.top = "100px"; // même position que le premier
carre2.style.left = "100px";
carre2.style.transform = "rotate(90deg)";
body.append(carre2);
let stars = [];
for (let index = 0; index < 10; index++) {
let x = Math.random() * window.innerWidth; // pour bien aligner/avoir la même positoin et "window[...]" c'est pour s'adapter à n'importe quelle taille d'écran
let y = Math.random() * window.innerHeight;
let size = 20 + Math.random()*20;
let carre1 = document.createElement('div');
let carre2 = document.createElement('div');
[carre1, carre2].forEach((carre, index) => {
carre.style.position = "absolute";
carre.style.width = size + "px";
carre.style.height = size + "px";
carre.style.backgroundColor = "yellow";
carre.style.top = y + "px";
carre.style.left = x + "px";
carre.style.transform = index === 0 ? "rotate(45deg)" : "rotate(90deg)";
body.append(carre);
});
stars.push([carre1, carre2]);
}
console.log('stars', stars);
let monanime = () => {
let i = 0;
boules.forEach((boule) => { l
let vitesse_x
let vitesse_y
if (boule.style.backgroundColor == "green") {
vitesse_x = 2;
vitesse_y = 2;
}
else {
vitesse_x = -3;
vitesse_y = -3;
}
boule.style.left = (boule.offsetLeft+vitesse_x)+"px"
boule.style.top = (boule.offsetTop+vitesse_y)+"px"
i++;
});
window.requestAnimationFrame(monanime);
}
console.log('boules[0]');
window.requestAnimationFrame(monanime);

25
Test_Bases/styles.css Normal file
View File

@ -0,0 +1,25 @@
div.boule{
position: absolute;
width: 10px;
height:10px;
border-radius: 10px;
}
div.losanges{
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
}
div.stars{
position: absolute
width: 40px;
height: 40px;
border-radius: 10px;
}

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>

159
oop/script.js Normal file
View File

@ -0,0 +1,159 @@
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 // rayon
this.vx = -2+Math.random()*4;
this.vy = -2+Math.random()*4;
// this.color = 'hsl(360, 50%, 50%)'
this.color = {
h:360,
s:50,
l:50
}
}
draw(){
// console.log('draw', this);
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.fillRect(300, 300, 100, 100);
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, // Math.random()*canvas.width,
canvas.height / 2, // Math.random()*canvas.height,
2+Math.random()*10
);
maboule.draw();
boules.push(maboule);
}
// for (let index = 0; index < 10000; index++) {
// createBoule();
// }
setInterval(()=>{
createBoule();
}, 1000)
let anime = () => {
ctx.clearRect(0,0, canvas.width, canvas.height)
// boules.forEach((boule_a) => {
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)
);
// console.log('dist', dist);
if(dist < boule_a.size+boule_b.size){
// console.log('ça touche');
// distance inferieure a la somme des deux rayons
// ça touche
// boule_a.vx *= -1;
// boule_a.vy *= -1;
// boule_b.vx *= -1;
// boule_b.vy *= -1;
nx = (boule_b.pos.x - boule_a.pos.x)/dist; // normale de x = positon de x divisé par la distance absolue
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); // pour que ca ait effet sur abcisse
// console.log('h', h);
let s = 100 * (event.y / canvas.height); // pour que ca ait effet sur ordonnée > techniquement same pour luminosité
let l = 100 * (event.y/ canvas.height);
boules.forEach(boule => {
boule.color.h = h;
boule.color.s = s;
boule.color.l = l;
});
}
window.addEventListener('mousemove', onMouseMove);

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