klienckie_stefanczyk/Lekcja_03/z1.html

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lekcja 3</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }

        body {
            background-color: rgb(40, 40, 45);
        }

        main {
            background-color: darkslategray;
            width: fit-content;
            padding: 1em;
            margin: 1em auto;
            border-radius: 3px;
        }

        h1 {
            text-align: center;
            color: white;
        }

        nav {
            width: 100%;
            display: flex;
        }

        button {
            width: 100%;
            margin: 1em .5em;
            border: none;
            padding: 1em;
            font-size: 1em;
            font-weight: bold;
            color: white;
            border-radius: 3px;
        }

        #start {
            background-color: skyblue;
        }

        #ruch {
            background-color: green;
        }

        #reset {
            background-color: red;
        }

        #start:hover {
            background-color: blueviolet;
        }

        #ruch:hover {
            background-color: blueviolet;
        }

        #reset:hover {
            background-color: blueviolet;
        }

        button:hover {
            cursor: pointer;
        }

        #plansza {
            width: 320px;
            height: 320px;
            background-color: azure;
            margin: .5em auto;
            position: relative;
            overflow: hidden;
            border-radius: 3px;
        }

        #wiadomosc {
            height: 1em;
            margin: 1em;
            margin-bottom: .5em;
            text-align: center;
            color: white;
            font-weight: bold;
        }

        .pole {
            width: 40px;
            height: 40px;
            position: absolute;
            background-color: gray;
            border-radius: 3px;
        }

        .pole:hover {
            cursor: pointer;
        }

        .gracz {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 100%;

            left: -40px;

            transition: all 100ms ease;

            display: flex;
            font-weight: bold;
            color: white;
            justify-content: center;
            align-items: center;
            border: 3px solid green;
        }

        #gracz1 {
            background-color: blue;
        }

        #gracz2 {
            background-color: orange;
        }
    </style>
    <script src="lib/jquery.js"></script>
    <script>
        $(document).ready(function () {
            const wiersze = 5
            const kolumny = 5

            let started = false
            let tura_g1 = true
            let licznik_g1 = 0
            let licznik_g2 = 0

            let wspolrzedne = new Array()

            for (let i = 0; i < wiersze; i++) {
                for (let j = 0; j < kolumny; j++) {
                    const pole = $("<div>").addClass("pole")

                    let id = (i * wiersze) + j
                    let poleX = (j * 60) + 20
                    let poleY = (i * 60) + 20

                    pole.css("left", poleX)
                    pole.css("top", poleY)

                    pole.on("click", function () {
                        let pass = false

                        if (wspolrzedne.length == 0) { pass = true } else {
                            if (wspolrzedne[wspolrzedne.length - 1].i == i) {
                                if (wspolrzedne[wspolrzedne.length - 1].j - 1 == j | wspolrzedne[wspolrzedne.length - 1].j + 1 == j) {
                                    pass = true
                                }
                            } else if (wspolrzedne[wspolrzedne.length - 1].j == j) {
                                if (wspolrzedne[wspolrzedne.length - 1].i - 1 == i | wspolrzedne[wspolrzedne.length - 1].i + 1 == i) {
                                    pass = true
                                }
                            }
                        }

                        if (pass) {
                            let deleted = false
                            for (let k = 0; k < wspolrzedne.length; k++) {
                                if (wspolrzedne[k].id == id) {
                                    $(this).css("background-color", "gray")
                                    wspolrzedne.splice(k, 1)
                                    deleted = true
                                    break
                                }
                            }

                            if (!deleted) {
                                wspolrzedne.push({ id: id, posX: poleX, posY: poleY, i: i, j: j })
                                $(this).css("background-color", "green")
                            }

                            $("#wiadomosc").text(`Ścieżka ma ${wspolrzedne.length} pól.`)
                        } else {
                            $("#wiadomosc").text(`Dziura w ścieżce!`)
                        }
                    })
                    $("#plansza").prepend(pole)
                }
            }

            $("#start").on("click", function () {
                if (!started) {
                    if (wspolrzedne.length < 3) {
                        $("#wiadomosc").text("Musisz wybrać co najmniej 3 pola!")
                    } else {
                        started = true

                        licznik_g2 = wspolrzedne.length - 1;

                        $("#gracz1").css("left", wspolrzedne[licznik_g1].posX)
                        $("#gracz1").css("top", wspolrzedne[licznik_g1].posY)

                        $("#gracz2").css("left", wspolrzedne[licznik_g2].posX)
                        $("#gracz2").css("top", wspolrzedne[licznik_g2].posY)

                        $("#wiadomosc").text("Gra rozpoczęta! Gracz 1 zaczyna.")
                    }
                }
            })

            $("#ruch").on("click", function () {
                if (started) {
                    if (tura_g1) {
                        if (licznik_g1 >= wspolrzedne.length - 1) {
                            $("#wiadomosc").text("Koniec gry dla gracza 1!")
                        } else {
                            licznik_g1++
                            $("#gracz1").css("left", wspolrzedne[licznik_g1].posX)
                            $("#gracz1").css("top", wspolrzedne[licznik_g1].posY)
                            $("#wiadomosc").text("Ruch gracza 1. Teraz ruch gracza 2.")
                        }
                    } else {
                        if (licznik_g2 <= 0) {
                            $("#wiadomosc").text("Koniec gry dla gracza 2!")
                        } else {
                            licznik_g2--
                            $("#gracz2").css("left", wspolrzedne[licznik_g2].posX)
                            $("#gracz2").css("top", wspolrzedne[licznik_g2].posY)
                            $("#wiadomosc").text("Ruch gracza 2. Teraz ruch gracza 1.")
                        }
                    }

                    tura_g1 = !tura_g1
                }
            })

            $("#reset").on("click", function () {
                $("#gracz1").css("left", "-40px")
                $("#gracz2").css("left", "-40px")
                $("#gracz1").css("top", "0px")
                $("#gracz2").css("top", "0px")

                wspolrzedne = []
                tura_g1 = true
                licznik_g1 = 0
                licznik_g2 = 0
                started = false

                $(".pole").css("background-color", "gray")
                $("#wiadomosc").text("Wybierz co najmniej 3 pola i naciśnij START GRY")
            })
        })
    </script>
</head>

<body>
    <main>
        <h1>Labirynt - tablice obiektów</h1>
        <nav>
            <button id="start">START GRY</button>
            <button id="ruch">RUCH GRACZA</button>
            <button id="reset">RESETUJ</button>
        </nav>
        <div id="plansza">
            <div id="gracz1" class="gracz">1</div>
            <div id="gracz2" class="gracz">2</div>
        </div>
        <div id="wiadomosc">Wybierz co najmniej 3 pola i naciśnij START GRY</div>
    </main>
</body>

</html>