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>
        #obwoluta{
            position:relative;
            width:100%;
        }
        h1 {
            text-align: center;
        }

        #timer {
            position: absolute;
            top:50px;
            left:35%;
            margin: 0 auto;
            width: 400px;
            height: 30px;
            text-align: center;
            font-size: 25px;
            background-color: gray;
        }

        #pasek {
            background-color: red;
            z-index: 0;
            position: absolute;
            left: 0;
            top: 0;
            width: 400px;
            height: 30px;
        }

        #time {
            position: relative;
            color: black;
            z-index: 100;
        }

        #playArea>img {
            position: absolute;
            width: 100px;
            height: 100px;
        }

        #playArea {
            margin: 0 auto;
            position: absolute;
            left:35%;
            top: 100px;
            height: 500px;
            width: 500px;
        }

        #intro {
            margin: 0 auto;
            position: absolute;
            left:35%;
            top:100px;
            height: 500px;
            width: 500px;
            display: block;
        }
    </style>
    <script>
        window.onload = function () {
            document.getElementById("firstOption").addEventListener("click", function () {
                czas = 30000;
                document.getElementById("intro").style.display = "none"
                game()
            })

            document.getElementById("secondOption").addEventListener("click", function () {
                czas = 60000;
                document.getElementById("intro").style.display = "none"
                game()
            })

            document.getElementById("thirdOption").addEventListener("click", function () {
                czas = 90000;
                document.getElementById("intro").style.display = "none"
                game()
            })

            wybor();
            function wybor() {
                document.getElementById("intro").style.display = "block"
                document.getElementById("playArea").style.display = "none"
                document.getElementById("timer").style.display = "none"
            }

            function game() {
                node = document.getElementById("playArea")
                while (node.hasChildNodes()) {
                    node.removeChild(node.lastChild);
                }
                let height = 4;
                let width = 4;
                let count = 0
                let objs = []
                let actualClicked = []
                let swap = false
                let goingOn = false
                let sources = []
                for (let i = 1; i <= 8; i++) { sources.push("img/" + i + ".jpg"); sources.push("img/" + i + ".jpg") }
                shuffle(sources)
                document.getElementById("playArea").style.display = "block"
                for (let i = 0; i < height; i++) {
                    for (let j = 0; j < width; j++) {
                        let left = (j * 101).toString()
                        let top = (i * 101).toString()
                        let img = document.createElement('img')
                        //tablica reprezentujaca id src i zmienna clicked kazdego obrazka
                        objs.push({
                            id: 'id' + count,
                            src: sources[count],
                            clicked: false
                        })
                        img.src = 'img/0.jpg'
                        document.getElementById("playArea").appendChild(img).setAttribute('style', 'left:' + left + "px; top:" + top + 'px;')
                        img.id = 'id' + count
                        img.addEventListener("mousedown", listener)
                        count++
                    }
                }


                function listener(e) {
                    if (!goingOn) {
                        goingOn = true
                        timer(new Date().getTime())
                    }
                    let target = (e.target.id).slice(2)
                    //swap - czy dzieje sie jakies obrocenie obrazkow
                    if (swap == false) {
                        e.target.src = objs[target].src
                        //decyzja o dodaniu do arraya actualClicked
                        if (objs[target].clicked == false) {
                            actualClicked.push(objs[target])
                            objs[target].clicked = true
                        }
                        //porownanie przy rozmiarze arraya = 2
                        if (actualClicked.length == 2) {
                            console.log(actualClicked)
                            if (compare()) deleteimg()
                            else reswaping()
                        }
                    }
                }
                //funkcja obslugi obrocenia roznych obrazkow
                async function reswaping() {
                    swap = true
                    await sleep(300)
                    actualClicked.forEach(function (element) {
                        document.getElementById(element.id).src = 'img/0.jpg'
                        objs[(element.id).slice(2)].clicked = false
                    }, this);
                    actualClicked = []
                    swap = false
                }
                //funkcja obslugi obrocenia tych samych obrazkow
                async function deleteimg() {
                    swap = true
                    await sleep(300);
                    actualClicked.forEach(function (element) {
                        document.getElementById(element.id).removeEventListener("mousedown", listener);
                        objs[(element.id).slice(2)].clicked = false
                    }, this);
                    actualClicked = []
                    swap = false
                    count -= 2
                    if (count == 0) end('wygrana')
                }
                //zakonczenie gry
                function end(result) {
                    goingOn = false;
                    if (result == 'przegrana') {
                        window.alert('Przegrales xD')
                    }
                    else {
                        window.alert("Wygrales! czas:" + czas - (czas - currTime) / 1000)
                    }
                    wybor()
                }
                //porownanie pola src z actualClicka
                function compare() {
                    if (actualClicked[0].src == actualClicked[1].src) return true;
                    else return false;
                }

                //funkcja mieszajaca araya , credits : knuth - shuffle https://bost.ocks.org/mike/shuffle/
                function shuffle(srcs) {
                    var m = srcs.length, t, i;
                    // While there remain elements to shuffle…
                    while (m) {
                        // Pick a remaining element…
                        i = Math.floor(Math.random() * m--);
                        // And swap it with the current element.
                        t = srcs[m];
                        srcs[m] = srcs[i];
                        srcs[i] = t;
                    }
                    return srcs;
                }

                function sleep(ms) {
                    return new Promise(resolve => setTimeout(resolve, ms));
                }

                function timer(startTime) {
                    document.getElementById("timer").style.display = "block"
                    timeit()
                    function timeit() {
                        if (goingOn) {
                            currTime = new Date().getTime() - startTime
                            let timeleft = czas - currTime
                            if (timeleft < 0) end('przegrana')
                            var minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60))
                            var seconds = Math.floor((timeleft % (1000 * 60)) / 1000);
                            var miliseconds = timeleft%1000
                            document.getElementById("time").innerText = minutes + ":" + seconds + ":" +miliseconds
                            document.getElementById("pasek").style.width = (czas - currTime) / czas * 100 + '%'
                            requestAnimationFrame(timeit)
                        }
                    }
                }
            }
        }
    </script>
</head>

<body>
    <div id="obwoluta">
    <h1>Memory</h1>
    <div id="timer">
        <span id="time"></span>
        <div id="pasek"></div>
    </div>
    <div id="playArea">

    </div>
    <div id="intro">
        <img src="img/intro.png" alt="" usemap="#Map" />

        <map name="Map" id="Map">
            <area alt="" title="" href="#" shape="poly" coords="99,50,173,190,48,145" id="firstOption" />
            <area alt="" title="" href="#" shape="poly" coords="305,141,357,236,232,282" id="secondOption" />
            <area alt="" title="" href="#" shape="poly" coords="99,238,173,378,48,334" id="thirdOption" />
        </map>
    </div>
</div>
</body>

</html>