hilfe

css/layout.css

@@ -40,46 +40,41 @@ body{
 .flexbox{
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
 }
 #rechnungen{
     padding: 0px;
     position: relative;
     top: 1px;
+    justify-content: space-between;
+    width: 100%; 
 }
 #rechnung1, #rechnung2 {
-    width: 20%;
+    width: 10%;
     padding: 20px;
     text-align: center;
     z-index: 10;
     position: relative;
-    display: inline-block;
 }
 #rechnung1{
     background-color: rgb(0, 225, 255);
     border-radius: 15px;
     outline: 8px solid black;
-    margin-left: auto;
+    left: 20px;
-    margin-right: 100px;
 }
 
 #rechnung2{
     background-color: red;
     border-radius: 15px;
     outline: 8px solid black;
-    margin-left: 100px;
+    right: 20px;
-    margin-right: auto;
-}
-#rechnung1 img, #rechnung2 img {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: -1;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
 }
 #fuchsZahl{
     padding-left: 100px;
     font-size: 30px;
+    width: 10%;
 }
+#hitbox1, #hitbox2{
+    width: 50px;
+    height: 10px;
+}

index.html

@@ -13,10 +13,12 @@
 
             <div id="rechnung1">
                 <div id="rechnung1Text">*5</div>
+                <div id="hitbox1"></div>
             </div>
             
             <div id="rechnung2">
                 <div id="rechnung2Text">+5</div>
+                <div id="hitbox2"></div>
             </div>
 
         </div>

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);