Un enemy ca marche

Zakinane · May 28, 2024 · 2594423 · 2594423
1 parent 0f2d70c
commit 2594423
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 10 deletions.
diff --git a/game/game.css b/game/game.css
@@ -99,23 +99,44 @@ a:hover {
   width: 70px;
   left: 50%;
   transform: translateX(-50%);
-  bottom: 0px;
-  margin-bottom: 100px;
+  bottom: -1000px;
+  margin-bottom: 50px;
   cursor: url("../img/cursor/cursorHover.png"), auto;
   animation: decollage 1s 3s ease-in forwards;
 }
 @keyframes decollage {
   0% {
+    bottom: -1000px;
+  }
+  100% {
     bottom: 0px;
   }
+}
+.enemy{
+  position: absolute;
+  z-index: 103;
+  width: 50px;
+  top: -500px;
+  margin-top: 50px;
+  animation: dedecollage 1s 4s ease-in forwards;
+}
+.enemyTest{
+  left: 50%;
+  transform: translateX(-50%);/*temp*/
+}
+@keyframes dedecollage {
+  0% {
+    top: -500px;
+  }
   100% {
-    bottom: 40%;
+    top: 0px;
   }
 }
+
 .projectile{
   position: absolute;
   height: 20px;
   z-index: 102;
-  bottom: 40%;
+  bottom: 0px;
   margin-bottom: 150px;
 }
diff --git a/game/game.html b/game/game.html
@@ -11,6 +11,7 @@
   <body>
     <audio class="moneyAudio" src="../assets/money.mp3" hidden></audio>
     <audio class="pioupiou" src="../assets/pioupiou.mp3"></audio>
+    <audio class="boumEnemy" src="../assets/enemyDeath.mp3"></audio>
     <div class="container">
       <div class="controls">
         <h2 style="padding-bottom: 30px">Controls :</h2>
@@ -26,8 +27,9 @@ <h5>SHOOT</h5>
 
       <!-- El sa7 -->
       <main>
+        <img class="You" src="../img/You.png">
+        <img class="enemy enemyTest"  src="../img/plankton.png">
         <div class="screen">
-          <img class="You" src="../img/You.png">
         </div>
       </main>
 

diff --git a/game/game.js b/game/game.js
@@ -1,5 +1,5 @@
 ////////////////////////////////SCREEN
-const screen = document.querySelector(".screen");
+const screen = document.querySelector("main");
 function getScreenBounds() {
   const rect = screen.getBoundingClientRect();
   return { left: rect.left, right: rect.right };
@@ -27,6 +27,7 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 //others
 const pioupiou = document.querySelector(".pioupiou");
+const boumEnemy = document.querySelector(".boumEnemy")
 
 ///////////////////////////////////////////////ME
 const You = document.querySelector(".You");
@@ -40,7 +41,37 @@ You.addEventListener("click", function () {
   audioMoney.play();
 });
 
-/////////////////////////////////////////////ACTIONS
+
+/////////////////////////////////////////////ENEMY
+const enemyTest = document.querySelector(".enemyTest")
+// const enemies = [];
+
+// function createEnemy() {
+//   const enemy = document.createElement("img");
+//   enemy.classList.add("enemy");
+//   enemy.src = "../img/plankton.png";
+//   enemy.style.left = You.style.left;
+//   enemies.push(enemy);
+//   screen.appendChild(enemy);
+
+//   setTimeout(createEnemy,1000);
+// }
+// setTimeout(createEnemy,2000);
+
+function deathEnemy(enemyTest, ProjX, ProjY, ProjW) {
+  if (
+    ProjY <= enemyTest.y + enemyTest.height &&
+    ProjX >= enemyTest.x - enemyTest.width &&
+    ProjX + ProjW <= enemyTest.x + enemyTest.width
+  ) {
+    boumEnemy.play();
+    //// enemy.remove();
+    enemyTest.remove();
+    return 1;
+  }
+}
+
+/////////////////////////////////////////////ACTIONS  
 function goLeft() {
   let Xpos = getXpos();
   const { left: MAX_LEFT } = getScreenBounds();
@@ -57,14 +88,42 @@ function goRight() {
   }
 }
 
-function Shoot() {
-  let Xpos = getXpos();
+function ShootUp() {
   const projectile = document.createElement("img");
   projectile.src = "../img/moneyyyy.png";
   projectile.classList.add("projectile");
+  screen.appendChild(projectile);
+  projectile.style.left = You.style.left;
+  projectile.style.bottom = "60px";
   pioupiou.play();
+
+  function moveProjectile() {
+    let currentBottom = parseInt(projectile.style.bottom);
+    projectile.style.bottom = currentBottom + 10 + "px";
+
+    //colision all enemies
+
+    // enemies.forEach((enemy) => {
+    //   deathEnemy(enemy,projectile.x,projectile.y,projectile.width);
+    // });
+    if(deathEnemy(enemyTest,projectile.x,projectile.y,projectile.width)){
+      projectile.remove();
+    }
+
+
+    //out of screen
+    if (currentBottom < 800) {
+      requestAnimationFrame(moveProjectile);
+    } else {
+      projectile.remove();
+    }
+  }
+
+  // Lancer le déplacement du projectile
+  requestAnimationFrame(moveProjectile);
 }
 
+
 //////////////////////////////////////////CONTROLS
 //Fluidity
 var keys = {};
@@ -76,9 +135,17 @@ document.addEventListener("keyup", (key) => {
   keys[key.code] = false;
 });
 
+let lastShotTime = 0;
 function Controls() {
   if (keys["Space"]) {
-    Shoot();
+    const currentTime = Date.now();
+    const timeSinceLastShot = currentTime - lastShotTime;
+
+    // if (timeSinceLastShot > 500) { //latence
+    //   ShootUp();
+    //   lastShotTime = currentTime;
+    // }
+    ShootUp(); //A SUP
   }
   if (keys["ArrowLeft"]) {
     goLeft();