Kevin hat gecooked

css/layout.css

@@ -36,9 +36,10 @@ body{
     width: 220px;
 }
 #enemy{
-    position: fixed;
-    top: 20px;
-    right: 30px;
+    position: relative;
+    width: 20%;
+    float: right;
+    z-index: 50;
 }
 #enemyZahl{
     text-align: center;
@@ -90,4 +91,17 @@ body{
     position: fixed;
     left: 45%; 
     display:none;
+    background-color: orange;
+    border-radius: 15px;
+    outline: 8px solid black;
+}
+#winText, #loseText{
+    display: none;
+    position: fixed;
+    text-align: center;
+    top: 20%;
+    left: 35%;
+    background-color: white;
+    border-radius: 15px;
+    outline: 8px solid black;
 }

index.html

@@ -34,6 +34,8 @@
             <img src="pics/enemy_1.png" alt="Gegner">
         </div>
 		
+        <div id="winText">Hurra du hast das Müllmonster besiegt</div>
+        <div id="loseText">Oh nein, das Müllmonster war zu stark</div>
 		<button id="restartButton">Neustart</button>
 
 

js/rechnungen.js

@@ -43,13 +43,19 @@ const enemy = document.querySelector("#enemy");
 const enemyZahl = document.querySelector("#enemyZahl");
 let voreisntellungenFertig = false;
 //auf welcher höhe startet der Enemy?
-const enemyTopStart = -300;
+const enemyTopStart = -700;
 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;
+//Button
+const restartButton = document.querySelector("#restartButton");
+const winText = document.querySelector("#winText");
+const loseText = document.querySelector("#loseText");
+const tom = document.querySelector("#tom");
+const tomImg = document.querySelector("#tom img");
 
 //returned den int in der Rechnung, nur die zahl ohne rechenzeichen
 function rechnung1Int(){
@@ -177,6 +183,23 @@ function ergebnis(zahl1,zahl2,rechenzeichen){
     }
     return 0;
 }
+function battle(){
+    if(parseInt(enemyZahl.innerText) > 0 && parseInt(fuchsZahl.innerText) > 0){
+        enemyZahl.innerText = "" + (parseInt(enemyZahl.innerText) - 1);
+        fuchsZahl.innerText = "" + (parseInt(fuchsZahl.innerText) - 1);
+    }else{
+        restartButton.style.display = "block";
+        if(gameWon){
+            winText.style.display = "block";
+            tom.style.display = "block";
+            tomImg.src = "pics/tom_3.png";
+        }else{
+            loseText.style.display = "block";
+            tom.style.display = "block";
+            tomImg.src = "pics/tom_1.png";
+        }
+    }
+}
 function playWinAnimation(){
     if(gameWon){
         if(!voreisntellungenFertig){
@@ -201,7 +224,7 @@ function enemyMoven(speed,maxtiefe){
     let nextTop = enemyTop + 10 * speed;
     
     if(nextTop > maxtiefe){
-        
+        battle();
     }else{
         enemy.style.top = nextTop + "px";
         enemyTop = nextTop;
@@ -225,4 +248,7 @@ function gameloopRechnungen(){
         }
     }
 }
+restartButton.addEventListener("click",()=>{
+    location.reload();
+});
 setInterval(gameloopRechnungen, 10);