FEE_MathRunner/js/rechnungen.js

const rechnungen = document.querySelector("#rechnungen");

//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.2;
//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");


//RechnungenSpawn Parameter
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
rechnungenSpawn(maxZahl,maxMal,maxDurch);
//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 > maxtiefe){
        rechnungen.style.top = rechnungenTopStart + "px";
        rechnungenTop = rechnungenTopStart;
        rechnungenSpawn(maxZahl,maxMal,maxDurch);
        bereitsEinmalOverlappt = false;
        counterRechnungen++;
    }else{
        rechnungenTop = nextTop;
    }
}
function generateRandomZahl(index,maxzahl,maxMal,maxDurch){
    if(rechenzeichen[index] == '+' || rechenzeichen[index] == '-'){
        return randomZahl = Math.floor(Math.random()*maxzahl);
    }
    if(rechenzeichen[index] == '*'){
        return randomZahl = Math.floor(Math.random()*maxMal);
    }
    if(rechenzeichen[index] == ':'){
        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 = generateRandomIndex();
    randomZahl = generateRandomZahl(index,maxZahl,maxMal,maxDurch);

    while(ergebnis(parseInt(fuchsZahl.innerText),randomZahl,rechenzeichen[index]) < 0){
        randomZahl = generateRandomZahl(index,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,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 == '+'){
        return zahl1 + zahl2;
    }
    if(rechenzeichen == '-'){
        return zahl1 - zahl2;
    }
    if(rechenzeichen == '*'){
        return zahl1 * zahl2;
    }
    if(rechenzeichen == ':'){
        return zahl1 / zahl2;
    }
    return 0;
}
function battle(){
    if(parseInt(enemyZahl.innerText) > 0 && parseInt(fuchsZahl.innerText) > 0){
        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);