From 17625c305e6fc1002fe45c47d6941051f7a7c692 Mon Sep 17 00:00:00 2001
From: klikev <kevinkliewer04@gmail.com>
Date: Sat, 31 Aug 2024 19:38:24 +0200
Subject: [PATCH] hilfe

---
 css/layout.css   | 27 +++++++++++----------------
 index.html       |  2 ++
 js/rechnungen.js | 30 +++++++++++++++++++++++++++++-
 3 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/css/layout.css b/css/layout.css
index bec8234..cac489a 100644
--- a/css/layout.css
+++ b/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;
-    margin-right: 100px;
+    left: 20px;
 }
 
 #rechnung2{
     background-color: red;
     border-radius: 15px;
     outline: 8px solid black;
-    margin-left: 100px;
-    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;
+    right: 20px;
 }
 #fuchsZahl{
     padding-left: 100px;
     font-size: 30px;
+    width: 10%;
 }
+#hitbox1, #hitbox2{
+    width: 50px;
+    height: 10px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 234ca00..e94433c 100644
--- a/index.html
+++ b/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>
diff --git a/js/rechnungen.js b/js/rechnungen.js
index 387bc4e..3d6cff3 100644
--- a/js/rechnungen.js
+++ b/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);
\ No newline at end of file