BON BARBANIVERSAIRE git statusgit status!

2026-02-18 15:58:16 +01:00 · 2026-02-18 15:58:16 +01:00 · dd266cf17f
commit dd266cf17f
parent 807480f3e5
10 changed files with 225 additions and 0 deletions
--- a/IMG/bougie.gif
+++ b/IMG/bougie.gif
--- a/IMG/fond.jpg
+++ b/IMG/fond.jpg
--- a/IMG/linux.png
+++ b/IMG/linux.png
--- a/IMG/plusultra.mp3
+++ b/IMG/plusultra.mp3
--- a/IMG/soundplace.jpg
+++ b/IMG/soundplace.jpg
--- a/IMG/soundplace.png
+++ b/IMG/soundplace.png
--- a/IMG/star.gif
+++ b/IMG/star.gif
--- a/index.html
+++ b/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HAPPY BIRTHDAY</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <img id="linux" src="IMG/linux.png">
+  <p>HAPPY BIRTHDAY</p>
+  <canvas id="scene"></canvas>
+  <script src="script.js"></script>
+</body>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,182 @@
+console.log("HAPPY BIRTHDAY BARBABACHIR");
+console.log("tu peux clicker sur les étoiles");
+
+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 Bougie {
+  constructor(x,y,s) {
+  this.pos = {
+    x: x,
+    y: y
+  }
+  this.size = s
+  this.img = new Image();
+  this.img.src = "IMG/bougie.gif";
+  }
+
+  draw(){
+    ctx.drawImage(this.img, this.pos.x, this.pos.y, this.size, this.size);
+  }
+
+}
+
+let ultrasound;
+
+class Star {
+  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.img = new Image();
+    this.img.src = "IMG/star.gif";
+
+    this.sound = new Audio("IMG/plusultra.mp3");
+  }
+
+  draw(){
+      ctx.drawImage(this.img, this.pos.x, this.pos.y, this.size, this.size);
+  }
+
+  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();
+  }
+
+  ultra() {
+    this.sound.currentTime = 0;
+    this.sound.play();
+  }
+
+  pixelClick(mouseX, mouseY) {
+    if (
+      mouseX < this.pos.x ||
+      mouseX > this.pos.x + this.size ||
+      mouseY < this.pos.y ||
+      mouseY > this.pos.y + this.size
+    ) {
+      return false;
+    }
+
+    let pixel = ctx.getImageData(mouseX, mouseY, 1, 1).data;
+
+    let alpha = pixel[3];
+
+    return alpha > 0; 
+  }
+}
+
+let stars = [];
+let mastar;
+function createStar(){
+  mastar = new Star(
+    canvas.width / 2, // Math.random()*canvas.width, 
+    canvas.height / 2, // Math.random()*canvas.height,
+    50+Math.random()*100
+  );
+  mastar.draw();
+  stars.push(mastar);
+}
+
+setInterval(()=>{
+  createStar();
+}, 5000)
+
+let bougies = [];
+let mabougie;
+let nextX = 0;
+for (let index = 0; index < 50; index++) {
+    mabougie = new Bougie(
+        //dans quelle zone ça spawn
+        // Math.random()*canvas.width,
+        nextX,
+        canvas.height - 200,
+        //taille
+        200
+        
+    );
+    mabougie.draw();
+    bougies.push(mabougie);
+    nextX += 45;
+    // console.log(mabougie);
+}
+
+let anime = () => {
+  ctx.clearRect(0,0, canvas.width, canvas.height)
+  bougies.forEach((bougie) => {
+      bougie.draw();
+
+  })
+  for (let i = 0; i < stars.length; i++) {
+    let star_a = stars[i];
+    for (let j = i+1; j < stars.length; j++) {
+      let star_b = stars[j];
+      let dist = Math.sqrt(
+        Math.pow(star_b.pos.x - star_a.pos.x, 2) + 
+        Math.pow(star_b.pos.y - star_a.pos.y, 2)
+      );
+      
+      if(dist < star_a.size+star_b.size){
+
+
+        nx = (star_b.pos.x - star_a.pos.x)/dist;
+        ny = (star_b.pos.y - star_a.pos.y)/dist;
+
+        vA_n = star_a.vx*nx + star_a.vy*ny
+        vB_n = star_b.vx*nx + star_b.vy*ny
+
+        star_a.vx +=  (vB_n - vA_n) * nx
+        star_a.vy += (vB_n - vA_n) * ny
+        star_b.vx += (vA_n - vB_n) * nx
+        star_b.vy += (vA_n - vB_n) * ny
+        star_a.move();
+        star_b.move();
+      }
+    }
+    star_a.move();
+  }
+  window.requestAnimationFrame(anime);
+}
+
+window.addEventListener("click", (event) => {
+  let rect = canvas.getBoundingClientRect();
+  let mouseX = event.clientX - rect.left;
+  let mouseY = event.clientY - rect.top;
+
+  stars.forEach(star => {
+    if (star.pixelClick(mouseX, mouseY)) {
+      star.ultra();
+      console.log("PLUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUS UULTRAAAAAAAAAAAAAAAA");
+    }
+  });
+});
+
+window.requestAnimationFrame(anime);
+
--- a/styles.css
+++ b/styles.css
@ -0,0 +1,28 @@
+body {
+    background-image: url("/IMG/fond.jpg") ;
+    background-size: cover;
+    background-position: relative;
+    margin: 0%;
+    padding-top: 0%;        
+} 
+
+canvas  {
+    display: block;
+}
+
+#linux {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 300px;
+    z-index: 10;
+}
+
+p {
+    position: absolute;
+    top: 1%;
+    left: 20%;
+    font-size: 50px ;
+    z-index: 10;    
+}
+