From af812baf033a8f4eb41d7857eb53d2c4fa9fb9c7 Mon Sep 17 00:00:00 2001 From: Gabrielle Date: Fri, 14 Nov 2025 18:35:41 +0100 Subject: [PATCH] first commit --- Bases_JS/index.html | 14 ++++ Bases_JS/script.js | 118 +++++++++++++++++++++++++++++++ Bases_JS/styles.css | 23 ++++++ Test_Bases/index.html | 14 ++++ Test_Bases/script.js | 137 ++++++++++++++++++++++++++++++++++++ Test_Bases/styles.css | 25 +++++++ oop/index.html | 14 ++++ oop/script.js | 159 ++++++++++++++++++++++++++++++++++++++++++ oop/styles.css | 16 +++++ 9 files changed, 520 insertions(+) create mode 100644 Bases_JS/index.html create mode 100644 Bases_JS/script.js create mode 100644 Bases_JS/styles.css create mode 100644 Test_Bases/index.html create mode 100644 Test_Bases/script.js create mode 100644 Test_Bases/styles.css create mode 100644 oop/index.html create mode 100644 oop/script.js create mode 100644 oop/styles.css diff --git a/Bases_JS/index.html b/Bases_JS/index.html new file mode 100644 index 0000000..a6a4ffd --- /dev/null +++ b/Bases_JS/index.html @@ -0,0 +1,14 @@ + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/Bases_JS/script.js b/Bases_JS/script.js new file mode 100644 index 0000000..7fe6e23 --- /dev/null +++ b/Bases_JS/script.js @@ -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); diff --git a/Bases_JS/styles.css b/Bases_JS/styles.css new file mode 100644 index 0000000..9a4fa91 --- /dev/null +++ b/Bases_JS/styles.css @@ -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; + } \ No newline at end of file diff --git a/Test_Bases/index.html b/Test_Bases/index.html new file mode 100644 index 0000000..1d03c2e --- /dev/null +++ b/Test_Bases/index.html @@ -0,0 +1,14 @@ + + + + + + Document + + + + + + + + diff --git a/Test_Bases/script.js b/Test_Bases/script.js new file mode 100644 index 0000000..6fdc927 --- /dev/null +++ b/Test_Bases/script.js @@ -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); + diff --git a/Test_Bases/styles.css b/Test_Bases/styles.css new file mode 100644 index 0000000..a8678ed --- /dev/null +++ b/Test_Bases/styles.css @@ -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; + +} + + \ No newline at end of file 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..9758c3a --- /dev/null +++ b/oop/script.js @@ -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); \ No newline at end of file diff --git a/oop/styles.css b/oop/styles.css new file mode 100644 index 0000000..074ed80 --- /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