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