+ HAPPY BIRTHDAY
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e825e50 --- /dev/null +++ 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); + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3b98149 --- /dev/null +++ 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; +} +