no ja pierdole.js

//http://wklej.to/viZxk

var rozmiarPlanszy = 10;
var tablicaStatkow = new Array(rozmiarPlanszy).fill(0)
tablicaStatkow[0] = new Array(rozmiarPlanszy).fill(0)

document.getElementById("plansza").style.width=32*rozmiarPlanszy+"px";

//GENERUJE PLANSZE
for(i=0;i<rozmiarPlanszy;i++){
    for(j=0;j<rozmiarPlanszy;j++){
        var div = document.createElement("DIV");
        div.id=i+","+j;
        var polozenie; var x; var y;

        div.onmouseenter=function(){
            polozenie=this.getAttribute("id");
            x = polozenie.charAt(0);
            y = polozenie.charAt(2);
            //console.log(x+" "+y);

            for (var a = 0; a < obecnieWybrany; a++){
                console.log(x+","+(parseInt(y)+a))
                document.getElementById(x+","+(parseInt(y)+a)).style.backgroundColor = "black"
            }
        };

        div.onmouseleave = function () {
            for (var a = 0; a < obecnieWybrany; a++){
                document.getElementById(x+","+(parseInt (y) + a) ).style.backgroundColor = "#fff"
            }
        }

        document.getElementById("plansza").appendChild(div);
    }
}

//GENERUJE STATKI DO WYBORU
var tablicaRozmiarow = ["4","3","3","2","2","2","1","1","1","1"];
var iloscStatkow = tablicaRozmiarow.length;
var obecnieWybrany = tablicaRozmiarow[0];

var kolor = "black";            //DEFAULTOWY KOLOR STATKÓW
var hoverKolor = "red";         //KOLOR STATKÓW PO NAJECHANIU
var klikKolor = "blue";         //KOLOR PO KLIKNIECIU W STATEK

for(i=0; i<iloscStatkow; i++){
    var wymiary = (document.getElementById("plansza").scrollHeight)/rozmiarPlanszy;

    var div = document.createElement("DIV");

    //NADAJE MU STYL
    div.style.width=wymiary*tablicaRozmiarow[i]+"px";
    div.style.height=wymiary+"px";
    div.style.backgroundColor = kolor;
    div.style.marginBottom = "10px";
    div.id=i;

    //ZMIANA KOLORU PO NAJECHANIU
    div.onmouseenter=function(){this.style.backgroundColor = hoverKolor};
    div.onmouseleave=function(){this.style.backgroundColor = kolor};

    //WYBIERANIE STATKÓW
    var czyWybrany=['0','0','0','0','0','0','0','0','0','0'];

    div.onclick=function(){
        //ODZNACZAM WSZYSKIE
        for(i=0;i<czyWybrany.length;i++){
            czyWybrany[i]='0';
        }

        //DO TABELI ZAPISUJE GDZIE JEST TEN, W KTORY KLIKAM
        czyWybrany[this.id]=1;

        for(i=0;i<czyWybrany.length;i++){
            if(czyWybrany[i]=='0'){
                document.getElementById(i).style.backgroundColor = kolor;
                document.getElementById(i).onmouseenter=function(){this.style.backgroundColor = hoverKolor};
                document.getElementById(i).onmouseleave=function(){this.style.backgroundColor = kolor};
            }
            else{
                this.style.backgroundColor = klikKolor;
                this.onmouseenter=false;
                this.onmouseleave=false;
                czyWybrany[this.id]='1';
                obecnieWybrany=tablicaRozmiarow[this.id];
            }
        }
    }

    document.getElementById("statki-do-wyboru").appendChild(div);
}

//PIERWSZY WYBRANY Z AUTOMATU
document.getElementById("0").style.backgroundColor = klikKolor;
document.getElementById("0").onmouseenter=false;
document.getElementById("0").onmouseleave=false;
czyWybrany[0]='1';