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 @@ Gegner +
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