Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body {
        margin: 0;
        border: 0;
        padding: 0;
        background-color: black;
    }
    #plansza {
        width: 600px;
        height: 600px;
        border-right: 5px solid white;
        border-bottom: 5px solid white;
        background-color: black;
    }
    .bloczek {
        width: 48px;
        height: 20px;
        border: 1px solid black;
        float: left;
        background-color: green;
    }
    .suwaczek {
        width: 200px;
        height: 20px;
        background-color: #800000;
        border-radius: 20px;
        position: relative;
        top: 580px;
    }
    .kuleczka {
        width: 20px;
        height: 20px;
        background-color: magenta;
        border-radius: 20px;
        position: relative;
    }
    #zyciaH3 {
        color: white;
        margin-left: 20px;
        font-size: 40px;
    }

    </style>
</head>
<body onkeydown="klik(event);">
    <div id="plansza" onmousemove="ruszajMycha(event);"></div>
    <h3 id="zyciaH3"></h3>
</body>
<script>
    //szerokosc bloczka = 50px
    //wysokosc bloczka = 20px
    //bloczkow na szerokosci: 12
    //bloczkow na wysokosci: 10
    //width: 48px height: 20px
    //border - 2 piksele
let wysokosc = 10;
let szerokosc = 12;
let planszaDiv = document.getElementById("plansza");
let h3 = document.getElementById("zyciaH3");
let suwakDiv;
let kuleczkaDiv;
let zycia = 3;
//Dostepne kierunki: LewoGora,PrawoGora,LewoDol,PrawoDol
let kierunekKulki = "PrawoGora";
let intervalRuchu;

//Tworzy podstawową część planszy
stworzWszystko();
ustawIntervaly();
wyswietlZycia();
function klik(event) {
    console.log(event.key)
    if(event.key == "ArrowLeft" || event.key == "a") {
        ruszSuwak("lewo");
    } else if(event.key == "ArrowRight" || event.key == "d") {
        ruszSuwak("prawo");
    }
}

function ruszSuwak(kierunek) {
    let aktualnyLeftSuwaka = parseInt(suwakDiv.style.left);
    if(kierunek == "lewo" && aktualnyLeftSuwaka >= 15) {
        //obsługuje ruch w lewo
        aktualnyLeftSuwaka -= 15;
    } else if(kierunek == "prawo" && aktualnyLeftSuwaka <= 385) {
        //obsługuje ruch w prawo
        aktualnyLeftSuwaka += 15;
    }
    suwakDiv.style.left = (aktualnyLeftSuwaka) + "px";
}

function ruszKulke() {
    let aktualnyLeftKulki = parseInt(kuleczkaDiv.style.left);
    let aktualnyTopKulki = parseInt(kuleczkaDiv.style.top);
    let aktualnyLeftSuwaka = parseInt(suwakDiv.style.left);
    if(kierunekKulki == "PrawoGora") {
        aktualnyLeftKulki++;
        aktualnyTopKulki--;
    } else if(kierunekKulki == "LewoGora") {
        aktualnyLeftKulki--;
        aktualnyTopKulki--;
    } else if(kierunekKulki == "PrawoDol") {
        aktualnyLeftKulki++;
        aktualnyTopKulki++;
    } else if(kierunekKulki == "LewoDol") {
        aktualnyLeftKulki--;
        aktualnyTopKulki++;
    }
    kuleczkaDiv.style.left = (aktualnyLeftKulki) + "px";
    kuleczkaDiv.style.top = (aktualnyTopKulki) + "px";
    if(aktualnyLeftKulki == 580 && kierunekKulki == "PrawoGora") {
        kierunekKulki = "LewoGora";
    }
    if(aktualnyLeftKulki == 580 && kierunekKulki == "PrawoDol") {
        kierunekKulki = "LewoDol";
    }
    if(aktualnyLeftKulki == 0 && kierunekKulki == "LewoGora") {
        kierunekKulki = "PrawoGora";
    }
    if(aktualnyLeftKulki == 0 && kierunekKulki == "LewoDol") {
        kierunekKulki = "PrawoDol";
    }
    if(aktualnyTopKulki == -20 && kierunekKulki == "LewoGora") {
        kierunekKulki = "LewoDol";
    }
    if(aktualnyTopKulki == -20 && kierunekKulki == "PrawoGora") {
        kierunekKulki = "PrawoDol";
    }
    if(aktualnyTopKulki == 560) {
        odejmijZycie();
    }
    if(aktualnyTopKulki == 540 && aktualnyLeftKulki >= aktualnyLeftSuwaka-10 && aktualnyLeftKulki <= aktualnyLeftSuwaka + 90) {
        kierunekKulki = "LewoGora";
    } else if(aktualnyTopKulki == 540 && aktualnyLeftKulki >= aktualnyLeftSuwaka-10 && aktualnyLeftKulki <= aktualnyLeftSuwaka + 190) {
        kierunekKulki = "PrawoGora";
    }
}

function wyswietlZycia() {
    h3.innerHTML = "Pozostałych żyć: " + zycia;
}

function odejmijZycie() {
    if(zycia == 0) {
        alert("Przegrałeś!");
        h3.innerHTML = "Przegrałeś, nie możesz kontynuować gry";
        planszaDiv.removeChild(kuleczkaDiv);
        planszaDiv.removeChild(suwakDiv);
        return;
    }
    zycia--;
    wyswietlZycia();
    //przywracamy do ustawień początkowych
    kierunekKulki = "PrawoGora";
    suwakDiv.style.left = "200px";
    kuleczkaDiv.style.left = "290px";
    kuleczkaDiv.style.top = "540px";
    alert("Tracisz zycie. Pozostalych zyc: " + zycia);

}
function ruszajMycha(event) {
    if(event.screenX <= 500 && event.screenX >= 100) {
        suwakDiv.style.left = (event.screenX-100) + "px";
    }
}

function ustawIntervaly() {
    intervalRuchu = setInterval(() => {
        ruszKulke();
    }, 1)
}

//Stworzenie podstawowej części planszy
function stworzWszystko() {
    for(let y = 0; y < wysokosc; y++) {
        for(let x = 0; x < szerokosc; x++) {
            let bloczekDiv = document.createElement("div");
            bloczekDiv.className = "bloczek";
            planszaDiv.appendChild(bloczekDiv);
        }
    }
    //Stworzenie suwaka
    suwakDiv = document.createElement("div");
    suwakDiv.className = "suwaczek";
    suwakDiv.style.left = "200px";

    //Stworzenie kulki
    kuleczkaDiv = document.createElement("div");
    kuleczkaDiv.className = "kuleczka";
    kuleczkaDiv.style.left = "290px";
    kuleczkaDiv.style.top = "540px";

    //W kulce ustawiamy top i left recznie, w suwaku ustawiamy tylko left recznie, bo top sie nie zmienia
    //reszte styli ustawiamy sobie u gory w styles
    planszaDiv.append(suwakDiv);
    planszaDiv.append(kuleczkaDiv);
}
</script>
</html>