diff --git a/css/layout.css b/css/layout.css
index b277227..9a9be4d 100644
--- a/css/layout.css
+++ b/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;
}
\ No newline at end of file
diff --git a/index.html b/index.html
index e475163..9175f2b 100644
--- a/index.html
+++ b/index.html
@@ -34,6 +34,8 @@
+
Hurra du hast das Müllmonster besiegt
+ Oh nein, das Müllmonster war zu stark
diff --git a/js/rechnungen.js b/js/rechnungen.js
index 3adee70..ec6b9dd 100644
--- a/js/rechnungen.js
+++ b/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);
\ No newline at end of file