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>
        #plansza {
            width: 800px;
            height: 800px;
            margin: auto;
        }

        table,
        td {
            border: 1px solid black;
            border-spacing: 0px;
            width: 40px;
            height: 40px;
        }

        .bok {
            background-color: lightgreen;
        }

        .srodek {
            background-color: lightyellow;
        }

        .robaczek {
            width: 40px;
            height: 40px;
            background-color: lightpink;
        }
    </style>
</head>

<body>
    <table id="plansza"></table>
    <script>
        var plansza = new Array
        var ruch = 1
        var tab1 = []
        function tworzeniePlanszy() {
            var tabela = document.getElementById("plansza")
            for (var y = 0; y < 20; y++) {
                plansza[y] = new Array
                var rzadek = document.createElement("tr")
                tabela.appendChild(rzadek)
                for (var x = 0; x < 20; x++) {
                    plansza[y][x] = "[" + y + "," + x + "]"
                    var komorka = document.createElement("td")
                    komorka.id = plansza[y][x]
                    if (y == 0 || x == 0 || y == 19 || x == 19) {
                        komorka.className = "bok"
                        tab1.push({
                            osx: x,
                            osy: y
                        })
                    }
                    else {
                        komorka.className = "srodek"
                        tab1.push({
                            osx: x,
                            osy: y
                        })
                    }

                    rzadek.appendChild(komorka)
                }
            }
            plansza[10][10].className = "robaczek"


        }
        tworzeniePlanszy()
        console.log(plansza)
    </script>
</body>

</html>