dada

css/layout.css

@@ -2,11 +2,14 @@
     color: black;
     font-size: 30px;
 }
+body{
+    overflow: hidden;
+}
 #spielRaum{
     width: 1000px;
-    height: 1000px;
+    height: 800px;
     margin: auto;
-    background-color: yellow;
+    background-image: url("../pics/background.jpg");
     position: relative;
 }
 body{
@@ -18,22 +21,37 @@ body{
 }
 #tom{
     position: fixed;
+    display: none;
 }
 #fuchs {
-    position: fixed;
+    position: relative;
-    bottom: 1px;
+    bottom: -400px;
+    z-index: 59;
 }
 #fuchs img{
     width: 200px;
-    position: relative;
     left: 50px;
     z-index: 60;
 }
 #enemy img{
     width: 220px;
+    z-index: 51;
 }
 #enemy{
-    position: fixed;
+    position: relative;
+    width: 20%;
+    float: right;
+    z-index: 50;
+}
+#enemyZahl{
+    text-align: center;
+    color: white;
+    text-shadow: 
+        2px 2px 2px black,
+        -2px 2px 2px black,
+        2px -2px 2px black,
+        -2px -2px 2dvi black;
+    font-weight: bold;
 }
 .flexbox{
     display: flex;
@@ -43,41 +61,66 @@ body{
     padding: 0px;
     position: relative;
     top: 1px;
+    justify-content: space-between;
+    width: 100%; 
 }
 #rechnung1, #rechnung2 {
     width: 20%;
-    margin: 0 100px;
     padding: 20px;
     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%;
+    left: 20px;
 }
+
 #rechnung2{
     background-color: red;
     border-radius: 15px;
     outline: 8px solid black;
-    right: 15%;
+    right: 20px;
-}
-#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{
-    text-align: center;
+    padding-left: 100px;
-    margin-left: 100px;
+    font-size: 40px;
-    font-size: 30px;
+    font-weight: bold;
+    width: 10%;
+    z-index: 59;
+    color: white;
+    text-shadow: 
+        2px 2px 2px black,
+        -2px 2px 2px black,
+        2px -2px 2px black,
+        -2px -2px 2dvi black;
 }
+#hitbox1, #hitbox2{
+    width: 50px;
+    height: 10px;
+}
+#restartButton
+{
+    width: 200px;
+    height: 100px;
+    position: relative;
+    left: 40%; 
+    top: -10%;
+    display:none;
+    background-color: orange;
+    border-radius: 15px;
+    outline: 8px solid black;
+}
+#winText, #loseText{
+    width: 30%;
+    display: none;
+    position: relative;
+    text-align: center;
+    top: -15%;
+    left: 35%;
+    background-color: white;
+    border-radius: 15px;
+    outline: 8px solid black;
+}

css/startScreenLayout.css

@@ -16,8 +16,10 @@ body {
     text-align: center;
     padding: 20px;
     background-color: #ffffffcc;
-    border-radius: 15px;
+    width: 1000px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    height: 700px;
+    margin: auto;
+    position: relative;
 }
 
 

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>
@@ -28,8 +30,13 @@
             <img src="pics/fuchs_1.png" alt="fuchs">
         </div>
         <div id="enemy">
+            <div id="enemyZahl">100</div>
             <img src="pics/enemy_1.png" alt="Gegner">
         </div>
+		
+        <div id="winText">Hurra du hast das Müllmonster besiegt</div>
+        <div id="loseText">Oh nein, das Müllmonster war zu stark</div>
+		<button id="restartButton">Neustart</button>
 
 
         

js/allg.js

@@ -1,9 +1,11 @@
+// animation
 let playerAnim = [];
 let tomAnim = [];
 let enemyAnim = [];
+//player
 let playerAnimState = 0;
 let runDirection = 0;
-let runSpeed = 12;
+let runSpeed = 18;
 let animationSpeed = 50;
 let currentPosition = 0;
 let player = document.querySelector("#fuchs");
@@ -11,6 +13,9 @@ let playerSprite = document.querySelector("#fuchs img");
 let dIsPressed = false;
 let aIsPressed = false;
 let runAnimation;
+// Map
+const boxBorderLeft = -40;
+const boxBorderRight = 840;
 
 fillArrays();
 startAnimation();
@@ -90,7 +95,11 @@ document.addEventListener('keyup', function(event)
 //---------------------------------------------------------- Move Player ------------------------------------------------------------
 function move()
 {
-    currentPosition = currentPosition + runDirection * runSpeed;
+    let nextPosition = currentPosition + runDirection * runSpeed;
+    if(nextPosition > boxBorderLeft && nextPosition < boxBorderRight)
+    {
+        currentPosition = nextPosition;
+    }
     player.style.left =  currentPosition + "px";
 }
 

js/rechnungen.js

@@ -1,6 +1,16 @@
 const rechnungen = document.querySelector("#rechnungen");
-let rechnungenTop = 1;
 
+//auf welcher höhe starten die Rechnungen?
+const rechnungenTopStart = -100;
+let rechnungenTop = rechnungenTopStart;
+rechnungen.style.top = rechnungenTop + "px";
+
+//speed der Rechnungen, wie schnell sie fallen
+const speedRechnungen = 0.35;
+//maximale pixel Tiefe bis sie respawnen
+const maxTiefeRechunngen = 750;
+
+//Rechnungen und die 4er Rechenzeichen in unserem Spiel in einem Array
 const rechenzeichen = ['+','-','*',':'];
 const rechnung1Text = document.querySelector("#rechnung1Text");
 const rechnung2Text = document.querySelector("#rechnung2Text");
@@ -10,51 +20,153 @@ const rechnung2Text = document.querySelector("#rechnung2Text");
 const maxZahl = 100;
 const maxMal = 11;
 const maxDurch = 5;
+//wie viele Rechnungen sollen nacheinander spawnen
+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");
-
+//die ersten rechnungen erscheinen sofort
-//rechnung2Text.innerText = "hallo";
-
-rechnungen.style.top = rechnungenTop + "px";
 rechnungenSpawn(maxZahl,maxMal,maxDurch);
-function rechnungMoven(speed){
+//wie viele Rechnungen bisher gespawed sind
+let counterRechnungen = 1;
+//rechnung berührt?
+let bereitsEinmalOverlappt = false;
+//wie viele richtige Entscheidungen hat der Spieler zurzeit getroffen
+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 = -700;
+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;
+//Button
+const restartButton = document.querySelector("#restartButton");
+const winText = document.querySelector("#winText");
+const loseText = document.querySelector("#loseText");
+const tom = document.querySelector("#tom");
+const tomImg = document.querySelector("#tom img");
+
+//returned den int in der Rechnung, nur die zahl ohne rechenzeichen
+function rechnung1Int(){
+    let text = rechnung1Text.innerText;
+    //entfernen vom rechenzeichen (+,-,*,:)
+    text = text.substring(1);
+    let zahl = parseInt(text);
+    return zahl;
+}
+//returned den int in der Rechnung, nur die zahl ohne rechenzeichen
+function rechnung2Int(){
+    let text = rechnung2Text.innerText;
+    //entfernen vom rechenzeichen (+,-,*,:)
+    text = text.substring(1);
+    let zahl = parseInt(text);
+    return zahl;
+}
+//returned das rechenzeichen der derzeitigen Rechnung ohne zahl
+function rechnung1Zeichen(){
+    let text = rechnung1Text.innerText;
+    return text.charAt(0)
+}
+//returned das rechenzeichen der derzeitigen Rechnung ohne zahl
+function rechnung2Zeichen(){
+    let text = rechnung2Text.innerText;
+    return text.charAt(0)
+}
+
+function rechnungMoven(speed,maxtiefe){
     let nextTop = rechnungenTop + 10 * speed;
     rechnungen.style.top = nextTop + "px";
-    if(nextTop > 800){
+    if(nextTop > maxtiefe){
-        rechnungen.style.top = "1px";
+        rechnungen.style.top = rechnungenTopStart + "px";
-        rechnungenTop = 1;
+        rechnungenTop = rechnungenTopStart;
         rechnungenSpawn(maxZahl,maxMal,maxDurch);
+        bereitsEinmalOverlappt = false;
+        counterRechnungen++;
     }else{
         rechnungenTop = nextTop;
     }
 }
-function rechnungenSpawn(maxzahl,maxMal,maxDurch){
+function generateRandomZahl(index,maxzahl,maxMal,maxDurch){
-    let index = Math.floor(Math.random()*rechenzeichen.length);
-    let randomZahl = 0;
     if(rechenzeichen[index] == '+' || rechenzeichen[index] == '-'){
-        randomZahl = Math.floor(Math.random()*maxzahl);
+        return randomZahl = Math.floor(Math.random()*maxzahl);
     }
     if(rechenzeichen[index] == '*'){
-        randomZahl = Math.floor(Math.random()*maxMal);
+        return randomZahl = Math.floor(Math.random()*maxMal);
     }
     if(rechenzeichen[index] == ':'){
-        randomZahl = Math.floor(Math.random()*maxDurch) + 1;
+        return randomZahl = Math.floor(Math.random()*maxDurch) + 1;
+    }
+    return 0;
+}
+//
+function generateRandomIndex(){
+    let random = Math.random();
+    if(random < 0.5){
+        return 0;
+    }
+    if(random < 0.8){
+        return 1;
+    }
+    if(random < 0.9){
+        return 2;
+    }else{
+        return 3;
+    }
+}
+function rechnungenSpawn(){
+    let index = generateRandomIndex();
+    let randomZahl = 0;
+    
+    randomZahl = generateRandomZahl(index,maxZahl,maxMal,maxDurch);
+
+    while(ergebnis(parseInt(fuchsZahl.innerText),randomZahl,rechenzeichen[index]) < 0){
+        randomZahl = generateRandomZahl(index,maxZahl,maxMal,maxDurch);
     }
     rechnung1Text.innerText = rechenzeichen[index] + randomZahl.toString();
 
-    index = Math.floor(Math.random()*rechenzeichen.length);
+    index = generateRandomIndex();
-    if(rechenzeichen[index] == '+' || rechenzeichen[index] == '-'){
+    randomZahl = generateRandomZahl(index,maxZahl,maxMal,maxDurch);
-        randomZahl = Math.floor(Math.random()*maxzahl);
+
-    }
+    while(ergebnis(parseInt(fuchsZahl.innerText),randomZahl,rechenzeichen[index]) < 0){
-    if(rechenzeichen[index] == '*'){
+        randomZahl = generateRandomZahl(index,maxZahl,maxMal,maxDurch);
-        randomZahl = Math.floor(Math.random()*maxMal);
-    }
-    if(rechenzeichen[index] == ':'){
-        randomZahl = Math.floor(Math.random()*maxDurch) + 1;
     }
     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,rechnung1Text)){
+        fuchsZahl.innerText = ergebnis(parseInt(fuchsZahl.innerText),rechnung1Int(),rechnung1Zeichen());
+        console.log("Rechnung 1");
+        bereitsEinmalOverlappt = true;
+        if(ergebnis(parseInt(fuchsZahl.innerText),rechnung1Int(),rechnung1Zeichen()) >= ergebnis(parseInt(fuchsZahl.innerText),rechnung2Int(),rechnung2Zeichen())){
+            richtigeEntscheidungen++;
+        }
+    }
+    if(checkOverlap(fuchsImg,rechnung2Text)){
+        fuchsZahl.innerText = ergebnis(parseInt(fuchsZahl.innerText),rechnung2Int(),rechnung2Zeichen());
+        console.log("Rechnung 2");
+        bereitsEinmalOverlappt = true;
+        if(ergebnis(parseInt(fuchsZahl.innerText),rechnung2Int(),rechnung2Zeichen()) >= ergebnis(parseInt(fuchsZahl.innerText),rechnung1Int(),rechnung1Zeichen())){
+            richtigeEntscheidungen++;
+        }
+    }
 }
 function ergebnis(zahl1,zahl2,rechenzeichen){
     if(rechenzeichen == '+'){
@@ -71,6 +183,72 @@ function ergebnis(zahl1,zahl2,rechenzeichen){
     }
     return 0;
 }
-setInterval(()=>{
+function battle(){
-    rechnungMoven(0.2);
+    if(parseInt(enemyZahl.innerText) > 0 && parseInt(fuchsZahl.innerText) > 0){
-}, 10);
+        enemyZahl.innerText = "" + (parseInt(enemyZahl.innerText) - 1);
+        fuchsZahl.innerText = "" + (parseInt(fuchsZahl.innerText) - 1);
+    }else{
+        restartButton.style.display = "block";
+        if(gameWon){
+            winText.style.display = "block";
+            tom.style.display = "block";
+            tomImg.src = "pics/tom_3.png";
+        }else{
+            loseText.style.display = "block";
+            tom.style.display = "block";
+            tomImg.src = "pics/tom_1.png";
+        }
+    }
+}
+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){
+        battle();
+    }else{
+        enemy.style.top = nextTop + "px";
+        enemyTop = nextTop;
+    }
+}
+function gameloopRechnungen(){
+    if(counterRechnungen <= gesamtzahlRechnungen){
+        rechnungMoven(speedRechnungen,maxTiefeRechunngen);
+        if(!bereitsEinmalOverlappt){
+            rechne();
+        }
+        
+    }else{
+        if(richtigeEntscheidungen >= zielRichtigeEntscheidungen){
+            gameWon = true;
+            playWinAnimation();
+            console.log("Müllmonster besiegt!!!");
+        }else{
+            gameWon = false;
+            playLoseAnimation();
+        }
+    }
+}
+restartButton.addEventListener("click",()=>{
+    location.reload();
+});
+setInterval(gameloopRechnungen, 10);

js/startjs.js

@@ -1,5 +1,27 @@
-const startButton = document.querySelector("#startScreen button");
+const weiterButton = document.querySelector("#startScreen button");
+let storyAbschnitt = 0;
+let story = ["Oh Nein, Das Müllmonster ist ausgebrochen!", 
+    "Wir müssen es wieder einfangen!", 
+    "Du bist ein Fuchs und bewegst dich mit A und D",
+    "Du hast einen Zahl über deinen Kopf",
+    "Und dein Ziel ist es, diese so groß wie möglich zu machen",
+    "Laufe also durch die richtigen Rechnungen um deine Zahl zu vergrößern",
+    "Wenn du am Ende die größere Zahl als das Müllmosnter hast, gewinnst du",
+    "Viel Glück"];
+let text = document.getElementById("storyText");
+let tomAnim = ["pics/tom_1.png", "pics/tom_2.png", "pics/tom_3.png"]
+let tom = document.getElementById("tomBild");
 
-startButton.addEventListener("click", ()=>{
+weiterButton.addEventListener("click", ()=>{
-    window.location.href = 'index.html';
+    if(storyAbschnitt <= 7)
+    {
+        text.innerText = story[storyAbschnitt];
+    }
+    else
+    {
+        window.location.href = 'index.html';
+    }
+    tom.src = tomAnim[storyAbschnitt%3];
+    console.log(tomAnim[storyAbschnitt%3]);
+    storyAbschnitt++;
 });

startScreen.html

@@ -9,13 +9,13 @@
 <body>
     <div id="spielRaum">
         <div id="startScreen">
-            <h1>Willkommen zu MathRunner</h1>
+            <h1 id = "storyText" >Willkommen zu MathRunner</h1>
-            <button id="startButton">Start</button>
+            <button id="startButton">Weiter</button>
+        </div>
+		<div id="tom">
+            <img id="tomBild" src="pics/tom_1.png" alt="tom">
         </div>
     </div>
-    <script src="js/rechnungen.js"></script>
-    <script src="js/funktionen.js"></script>
     <script src="js/startjs.js"></script>
-    <script src="js/allg.js"></script>
 </body>
 </html>