diff --git a/css/layout.css b/css/layout.css index cac489a..619fa08 100644 --- a/css/layout.css +++ b/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; diff --git a/index.html b/index.html index e94433c..27bb769 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,7 @@ fuchs
+
100
Gegner
diff --git a/js/rechnungen.js b/js/rechnungen.js index f002e6b..0ec81a8 100644 --- a/js/rechnungen.js +++ b/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); \ No newline at end of file +} +setInterval(gameloopRechnungen, 10); \ No newline at end of file