hilfe

js/rechnungen.js

@@ -25,10 +25,16 @@ let gesamtzahlRechnungen = 5;
 
 //Die Fuchszahl die dem Spieler angezeigt wird
 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
 let counterRechnungen = 1;
+//rechnung berührt?
+let bereitsEinmalOverlappt = false;
 
 //returned den int in der Rechnung, nur die zahl ohne rechenzeichen
 function rechnung1Int(){
@@ -61,10 +67,10 @@ function rechnungMoven(speed,maxtiefe){
     let nextTop = rechnungenTop + 10 * speed;
     rechnungen.style.top = nextTop + "px";
     if(nextTop > maxtiefe){
-        fuchsZahl.innerText = ergebnis(parseInt(fuchsZahl.innerText),rechnung1Int(),rechnung1Zeichen()); //DIES IST ZUM TESTEN SPÄTER RAUSNEHMEN!!!
         rechnungen.style.top = rechnungenTopStart + "px";
         rechnungenTop = rechnungenTopStart;
         rechnungenSpawn(maxZahl,maxMal,maxDurch);
+        bereitsEinmalOverlappt = false;
         counterRechnungen++;
     }else{
         rechnungenTop = nextTop;
@@ -96,6 +102,24 @@ function rechnungenSpawn(maxzahl,maxMal,maxDurch){
     }
     rechnung2Text.innerText = rechenzeichen[index] + randomZahl.toString();
 }
+function checkOverlap(objekt1, objekt2) {
+    const rect1 = objekt1.getBoundingClientRect(); //sorgt dafür, dass man die position der grenzen des Elements bekommt
+    const rect2 = objekt2.getBoundingClientRect();
+
+    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)){
+        fuchsZahl.innerText = ergebnis(parseInt(fuchsZahl.innerText),rechnung1Int(),rechnung1Zeichen());
+        console.log("Rechnung 1");
+        bereitsEinmalOverlappt = true;
+    }
+    if(checkOverlap(fuchs,rechnung2Hitbox)){
+        fuchsZahl.innerText = ergebnis(parseInt(fuchsZahl.innerText),rechnung2Int(),rechnung2Zeichen());
+        console.log("Rechnung 2");
+        bereitsEinmalOverlappt = true;
+    }
+}
 function ergebnis(zahl1,zahl2,rechenzeichen){
     if(rechenzeichen == '+'){
         return zahl1 + zahl2;
@@ -114,5 +138,9 @@ function ergebnis(zahl1,zahl2,rechenzeichen){
 setInterval(()=>{
     if(counterRechnungen <= gesamtzahlRechnungen){
         rechnungMoven(speedRechnungen,maxTiefeRechunngen);
+        if(!bereitsEinmalOverlappt){
+            rechne();
+        }
+        
     }
 }, 10);