bullets are completely animated

hackerplus.css

@@ -378,6 +378,141 @@ button:disabled {
     left: -40px;
   }
 }
+/* 
+.plusNinetyAnime {
+  animation: plusNinety 0.15s linear;
+}
+
+@keyframes plusNinety {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(90deg);
+  }
+}
+.minusNinetyAnime {
+  animation: minusNinety 0.15s linear;
+}
+
+@keyframes minusNinety {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-90deg);
+  }
+} */
+
+@keyframes upRight {
+  from{
+    transform: rotate(0deg);
+  }
+  to{
+    transform: rotate(90deg);
+  }
+}
+
+@keyframes upLeft{
+  from{
+    transform: rotate(0deg);
+  }
+  to{
+    transform: rotate(-90deg);
+  }
+}
+@keyframes downRight {
+  from{
+    transform: rotate(180deg);
+  }
+  to{
+    transform: rotate(90deg);
+  }
+}
+
+@keyframes downLeft{
+  from{
+    transform: rotate(180deg);
+  }
+  to{
+    transform: rotate(270deg);
+  }
+}
+@keyframes rightUp {
+  from{
+    transform: rotate(90deg);
+  }
+  to{
+    transform: rotate(0deg);
+  }
+
+}
+@keyframes rightDown {
+  from{
+    transform: rotate(90deg);
+  }
+  to{
+    transform: rotate(180deg);
+  }
+
+}
+@keyframes leftUp {
+  from{
+    transform: rotate(270deg);
+  }
+  to{
+    transform: rotate(360deg);
+  }
+}
+@keyframes leftDown {
+  from{
+    transform: rotate(270deg);
+  }
+  to{
+    transform: rotate(180deg);
+  }
+
+}
+.upRightAnime {
+  animation: upRight 0.15s linear;
+}
+
+.upLeftAnime {
+  animation: upLeft 0.15s linear;
+}
+
+.downRightAnime {
+  animation: downRight 0.15s linear;
+}
+
+.downLeftAnime {
+  animation: downLeft 0.15s linear;
+}
+
+.rightUpAnime {
+  animation: rightUp 0.15s linear;
+}
+
+.rightDownAnime {
+  animation: rightDown 0.15s linear;
+}
+
+.leftUpAnime {
+  animation: leftUp 0.15s linear;
+}
+
+.leftDownAnime {
+  animation: leftDown 0.15s linear;
+}
+
+
+
+
+
+
+
+
+
 
 #game-state-history {
   overflow-x: hidden;
@@ -554,7 +689,7 @@ button:disabled {
     animation: directionU 0.15s linear;
   }
 
-  html{
+  html {
     overflow-x: scroll;
     overflow-y: scroll;
   }

hackerplus.js

@@ -722,10 +722,8 @@ function shootBullet(row, column, bulletDirection) {
 }
 
 function moveBullet(location, row, column, bulletDirection) {
-  // Clear previous animation classes
   bulletDiv.classList = "bullet";
 
-  // Apply the appropriate animation class based on the bullet direction
   switch (bulletDirection) {
     case "right":
       if (bulletDiv.parentNode.childNodes.length == 1)
@@ -849,6 +847,7 @@ function handleSemiRicochetCollision(element, newRow, newColumn, location) {
   // console.log(bulletDirection);
 
   // console.log(element);
+  const oldBulletDirection = bulletDirection;
   if (element.style.transform === "rotate(0deg)") {
     // console.log(location);
     if (bulletDirection === "down") {
@@ -890,7 +889,7 @@ function handleSemiRicochetCollision(element, newRow, newColumn, location) {
     return;
   } else {
     shootBullet(newRow, newColumn, bulletDirection);
-    rotateDirBullet();
+    rotateDirBullet(oldBulletDirection); 
   }
 }
 function deleteSemiRicochet(element) {
@@ -918,7 +917,8 @@ function deleteSemiRicochet(element) {
 function handleRicochetCollision(element, newRow, newColumn, location) {
   // console.log(element.style.transform);
   bulletDiv.classList = "bullet";
-
+  const oldBulletDirection = bulletDirection;
+
   if (
     element.style.transform === "rotate(0deg)" ||
     element.style.transform === "rotate(180deg)"
@@ -957,23 +957,64 @@ function handleRicochetCollision(element, newRow, newColumn, location) {
     }
   }
   shootBullet(newRow, newColumn, bulletDirection);
-  rotateDirBullet();
+  rotateDirBullet(oldBulletDirection);
   // console.log(bulletDirection);
 }
-function rotateDirBullet() {
+function rotateDirBullet(oldBulletDirection) {
+  bulletDiv.classList = "bullet" //clear prev animaations
   // console.log(bulletDiv.style.transform);
+  if(oldBulletDirection === "up"){
+    if(bulletDirection === "left"){
+    bulletDiv.classList.add("upLeftAnime")
+    }else if(bulletDirection === "right"){
+      bulletDiv.classList.add("upRightAnime")
+    }
+  }else if(oldBulletDirection === "down"){
+    if(bulletDirection === "right"){
+      bulletDiv.classList.add("downRightAnime")
+      }else if(bulletDirection === "left"){
+        bulletDiv.classList.add("downLeftAnime")
+      }
+  }else if(oldBulletDirection === "left"){
+    if(bulletDirection==="up"){
+      bulletDiv.classList.add("leftUpAnime")
+    }else if(bulletDirection === "down"){
+      bulletDiv.classList.add("leftDownAnime")
+    }
+  }else if(oldBulletDirection === "right"){
+    if(bulletDirection==="up"){
+      bulletDiv.classList.add("rightUpAnime")
+
+    }else if(bulletDirection === "down"){
+      bulletDiv.classList.add("rightDownAnime")
+    }
+  }
+
+
   switch (bulletDirection) {
     case "left":
-      bulletDiv.style.transform = "rotate(270deg)";
+      setTimeout(()=>{
+        bulletDiv.style.transform = "rotate(270deg)";
+      },bulletSpeed)
+      // bulletDiv.style.transform = "rotate(270deg)"
       break;
     case "right":
-      bulletDiv.style.transform = "rotate(90deg)";
+      setTimeout(()=>{
+        bulletDiv.style.transform = "rotate(90deg)";
+      },bulletSpeed)
+      // bulletDiv.style.transform = "rotate(90deg)"
       break;
     case "up":
-      bulletDiv.style.transform = "rotate(0deg)";
+      setTimeout(()=>{
+        bulletDiv.style.transform = "rotate(0deg)";
+      },bulletSpeed)
+      // bulletDiv.style.transform = "rotate(0deg)";
       break;
     case "down":
-      bulletDiv.style.transform = "rotate(180deg)";
+      setTimeout(()=>{
+        bulletDiv.style.transform = "rotate(180deg)";
+      },bulletSpeed)
+      // bulletDiv.style.transform = "rotate(180deg)";
       break;
   }
 }

pieces/start-pieces.js

@@ -1,39 +1,39 @@
 
-let startPieces = ["", "", "",topCannon, "", topTitan, "",  "",
-topTank ,topSemiRicochet,"" ,topRicochet, "", "", "",  "",
-"", "", "", "", "", "", "", "",
-"", "", "", "", "", "", "", "",
-"", "", "", "", "", "", "", "",
-"", "", "", "", "",  "", "","",
-"","", "",bottomRicochet, "", "", "",bottomSemiRicochet,
-bottomTank, "", "", "",bottomCannon,  "", "", bottomTitan
+let startPieces = ["", topCannon, "", "", "", "", topTitan, "",
+  topTank, "", "", topRicochet, "", topSemiRicochet, "", "",
+  "", "", "", "", "", "", "", "",
+  "", "", "", "", "", "", "", "",
+  "", "", "", "", "", "", "", "",
+  "", "", "", "", "", "", "", "",
+  "", "", bottomSemiRicochet, "", bottomRicochet, "", "", bottomTank,
+  "", bottomTitan, "", "", "", "", bottomCannon, ""
 ];
 
 
-let initialPieces = ["", "", "",topCannon, "", topTitan, "",  "",
-topTank ,topSemiRicochet,"" ,topRicochet, "", "", "",  "",
-"", "", "", "", "", "", "", "",
-"", "", "", "", "", "", "", "",
-"", "", "", "", "", "", "", "",
-"", "", "", "", "",  "", "","",
-"","", "",bottomRicochet, "", "", "",bottomSemiRicochet,
-bottomTank, "", "", "",bottomCannon,  "", "", bottomTitan
+let initialPieces = ["", topCannon, "", "", "", "", topTitan, "",
+  topTank, "", "", topRicochet, "", topSemiRicochet, "", "",
+  "", "", "", "", "", "", "", "",
+  "", "", "", "", "", "", "", "",
+  "", "", "", "", "", "", "", "",
+  "", "", "", "", "", "", "", "",
+  "", "", bottomSemiRicochet, "", bottomRicochet, "", "", bottomTank,
+  "", bottomTitan, "", "", "", "", bottomCannon, ""
 ];
 
 const bluePieces = [
-    topRicochet,
-    topRicochet,
-    topSemiRicochet,
-    topTitan,
-    topTank,
-  ];
+  topRicochet,
+  topRicochet,
+  topSemiRicochet,
+  topTitan,
+  topTank,
+];
 const greenPieces = [
-    bottomRicochet,
-    bottomRicochet,
-    bottomSemiRicochet,
-    bottomTank,
-    bottomTitan
-];  
+  bottomRicochet,
+  bottomRicochet,
+  bottomSemiRicochet,
+  bottomTank,
+  bottomTitan
+];
 const blueCannons = [topCannon]
 const greenCannons = [bottomCannon]