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>
</head>
    <style>
        body{
            margin: 0 auto;
            text-align: center;
        }
        img{

            width:150px;
            height: 100px;
        }
    </style>

    <script>
       function init() {
            tab1 = document.getElementsByTagName("img");
            console.log(tab1);

            for (i = 0; i < tab1.length; i += 2) {
                tab1[i].src = "img/" + (i / 2 + 1) + ".png";
                tab1[i + 1].src = "img/" + (i / 2 + 1) + ".png";
            }

            var tab3 = []; // losowanie
            for (var a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], i = a.length; i--;) {
                var random = a.splice(Math.floor(Math.random() * (i + 1)), 1)[0];
                tab3.push(random);
            }
            console.log("przed losowaniem:", tab3)

            var tab4 = [];
           console.log("przed losowaniem:", tab4)
            for (i = 0; i < tab1.length; i++) {
                tab4.push(tab1[i].src);
            }

            var f=function(ccc){
                return function(){
                    console.log(ccc);
                    console.log(tab3,ccc);
                    tab1[ccc].src=pom[ccc];

                }
            }
            for (let i = 0; i < 16; i++) {
                tab1[i].src = tab4[tab3[i]];
                tab1[i].onclick=f(i)
                console.log("Po losowaniu:",tab1[i].src)
            }
           var pom = [];
           console.log("pomieszane tablice:", pom)
            for (i = 0; i < tab1.length; i++) {
                pom.push(tab1[i].src);
            }


      for (i = 0; i < 16; i++) {      // zakrywanie
                tab1[i].src = "img/0.png";
            }
            }


    </script>
<body onload="init();">
    <h1>GRA W MEMORY</h1>
<img src="img/0.png" alt="brak" class="1">
<img src="img/0.png" alt="brak" class="1">
<img src="img/0.png" alt="brak" class="1">
<img src="img/0.png" alt="brak" class="1">
<br/>
<img src="img/0.png" alt="brak" class="2">
<img src="img/0.png" alt="brak" class="2">
<img src="img/0.png" alt="brak" class="2">
<img src="img/0.png" alt="brak" class="2">
<br/>
<img src="img/0.png" alt="brak" class="3">
<img src="img/0.png" alt="brak" class="3">
<img src="img/0.png" alt="brak" class="3">
<img src="img/0.png" alt="brak" class="3">
<br/>
<img src="img/0.png" alt="brak" class="1">
<img src="img/0.png" alt="brak" class="1">
<img src="img/0.png" alt="brak" class="1">
<img src="img/0.png" alt="brak" class="1">

</body>

</html>