css/layout.css

@@ -41,6 +41,7 @@ body{
 }
 #rechnungen{
     padding: 0px;
+    justify-content: space-between;
     position: relative;
     top: 1px;
 }
@@ -51,21 +52,9 @@ body{
     text-align: center;
     font-size: 1.5em;
     z-index: 10;
-    position: fixed;
+    position: relative;
     display: inline-block;
 }
-#rechnung1{
-    background-color: rgb(0, 225, 255);
-    border-radius: 15px;
-    outline: 8px solid black;
-    left: 15%;
-}
-#rechnung2{
-    background-color: red;
-    border-radius: 15px;
-    outline: 8px solid black;
-    right: 15%;
-}
 #rechnung1 img, #rechnung2 img {
     position: absolute;
     top: 50%;

index.html

@@ -12,10 +12,12 @@
         <div id="rechnungen" class="flexbox">
 
             <div id="rechnung1">
+                <img src="pics/RechenBlockRot.png" alt="">
                 <div id="rechnung1Text">*5</div>
             </div>
             
             <div id="rechnung2">
+                <img src="pics/RechenBlockBlau.png" alt="">
                 <div id="rechnung2Text">+5</div>
             </div>
 

js/rechnungen.js

@@ -14,17 +14,17 @@ function rechnungMoven(speed){
     if(nextTop > 800){
         rechnungen.style.top = "1px";
         rechnungenTop = 1;
-        rechnungenSpawn(100);
+        rechnungenSpawn();
     }else{
         rechnungenTop = nextTop;
     }
 }
-function rechnungenSpawn(maxzahl){
+function rechnungenSpawn(){
     let index = Math.floor(Math.random()*rechenzeichen.length);
-    let randomZahl = Math.floor(Math.random()*maxzahl);
+    let randomZahl = Math.floor(Math.random()*20);
     rechnung1Text.innerText = rechenzeichen[index] + randomZahl.toString();
     index = Math.floor(Math.random()*rechenzeichen.length);
-    randomZahl = Math.floor(Math.random()*maxzahl);
+    randomZahl = Math.floor(Math.random()*20);
     rechnung2Text.innerText = rechenzeichen[index] + randomZahl.toString();
 }
 setInterval(()=>{