endlich funktioniert

css/layout.css

@@ -21,6 +21,7 @@ body{
 }
 #tom{
     position: fixed;
+    display: none;
 }
 #fuchs {
     position: relative;
@@ -36,11 +37,15 @@ body{
 }
 #enemy{
     position: fixed;
+    top: 20px;
+    right: 30px;
+}
+#enemyZahl{
+    text-align: center;
 }
 .flexbox{
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
 }
 #rechnungen{
     padding: 0px;
@@ -50,7 +55,7 @@ body{
     width: 100%; 
 }
 #rechnung1, #rechnung2 {
-    width: 10%;
+    width: 20%;
     padding: 20px;
     text-align: center;
     z-index: 10;

index.html

@@ -30,6 +30,7 @@
             <img src="pics/fuchs_1.png" alt="fuchs">
         </div>
         <div id="enemy">
+            <div id="enemyZahl">100</div>
             <img src="pics/enemy_1.png" alt="Gegner">
         </div>
 

js/rechnungen.js

@@ -27,8 +27,6 @@ let gesamtzahlRechnungen = 5;
 const fuchsZahl = document.querySelector("#fuchsZahl");
 //Elemete für überlappungs Check
 const fuchsImg = document.querySelector("#fuchs img");
-const rechnung1Hitbox = document.querySelector("#hitbox1");
-const rechnung2Hitbox = document.querySelector("#hitbox2");
 
 rechnungenSpawn(maxZahl,maxMal,maxDurch);
 //wie viele Rechnungen bisher gespawed sind
@@ -40,6 +38,18 @@ let richtigeEntscheidungen = 0;
 //Wie viele richtige entscheidungen braucht der Spieler um am ende, gegen das Müll monster, zu gewinnen
 let zielRichtigeEntscheidungen = 3;
 let gameWon = false;
+//Variabeln für die WinAnimation
+const enemy = document.querySelector("#enemy");
+const enemyZahl = document.querySelector("#enemyZahl");
+let voreisntellungenFertig = false;
+//auf welcher höhe startet der Enemy?
+const enemyTopStart = -300;
+let enemyTop = enemyTopStart;
+enemy.style.top = enemyTop + "px";
+//speed des Enemys, wie schnell er fallen soll
+const speedEnemy = 0.2;
+//maximale pixel Tiefe bis der Enemy aufhört zu fallen
+const maxTiefeEnemy = 100;
 
 //returned den int in der Rechnung, nur die zahl ohne rechenzeichen
 function rechnung1Int(){
@@ -114,7 +124,7 @@ function checkOverlap(objekt1, objekt2) {
     return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom); //true wenn die objekte überlappen
 }
 function rechne(){
-    if(checkOverlap(fuchsImg,rechnung1Hitbox)){
+    if(checkOverlap(fuchsImg,rechnung1Text)){
         fuchsZahl.innerText = ergebnis(parseInt(fuchsZahl.innerText),rechnung1Int(),rechnung1Zeichen());
         console.log("Rechnung 1");
         bereitsEinmalOverlappt = true;
@@ -122,7 +132,7 @@ function rechne(){
             richtigeEntscheidungen++;
         }
     }
-    if(checkOverlap(fuchs,rechnung2Hitbox)){
+    if(checkOverlap(fuchsImg,rechnung2Text)){
         fuchsZahl.innerText = ergebnis(parseInt(fuchsZahl.innerText),rechnung2Int(),rechnung2Zeichen());
         console.log("Rechnung 2");
         bereitsEinmalOverlappt = true;
@@ -146,7 +156,37 @@ function ergebnis(zahl1,zahl2,rechenzeichen){
     }
     return 0;
 }
-setInterval(()=>{
+function playWinAnimation(){
+    if(gameWon){
+        if(!voreisntellungenFertig){
+            enemyZahl.innerText = "" + (parseInt(fuchsZahl.innerText) - Math.floor(Math.random()*50));
+            voreisntellungenFertig = true;
+        }
+        enemyMoven(speedEnemy,maxTiefeEnemy);
+        
+    }
+}
+function playLoseAnimation(){
+    if(gameWon == false){
+        if(!voreisntellungenFertig){
+            enemyZahl.innerText = "" + (parseInt(fuchsZahl.innerText) + Math.floor(Math.random()*100));
+            voreisntellungenFertig = true;
+        }
+        enemyMoven(speedEnemy,maxTiefeEnemy);
+        
+    }
+}
+function enemyMoven(speed,maxtiefe){
+    let nextTop = enemyTop + 10 * speed;
+    
+    if(nextTop > maxtiefe){
+        
+    }else{
+        enemy.style.top = nextTop + "px";
+        enemyTop = nextTop;
+    }
+}
+function gameloopRechnungen(){
     if(counterRechnungen <= gesamtzahlRechnungen){
         rechnungMoven(speedRechnungen,maxTiefeRechunngen);
         if(!bereitsEinmalOverlappt){
@@ -156,9 +196,12 @@ setInterval(()=>{
     }else{
         if(richtigeEntscheidungen >= zielRichtigeEntscheidungen){
             gameWon = true;
+            playWinAnimation();
             console.log("Müllmonster besiegt!!!");
         }else{
             gameWon = false;
+            playLoseAnimation();
         }
     }
-}, 10);
+}
+setInterval(gameloopRechnungen, 10);