Untitled



    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <title>Hello World</title>

        <script>
            //load
            var tablica;
            window.addEventListener("load", onLoad, false);
            var ruchy;
            function onLoad() {
                //  var ile = prompt("ile?", "100");
                //  alert(ile);
                // }
                var main = document.getElementById("mainDiv");
                var button = document.getElementById("nowa");
                button.addEventListener("click", onChange, false);
                //format
               // main.style.background = "#000000";
                main.style.width = "300px";
                main.style.height = "300px";
                //main.style.border = "solid";
                //main.style.borderColor = "#ffff00";
                main.style.position = "absolute";
                //main.style.left = "10px";
                main.style.top = "60px";
                //dodanie małych divs
                var select = document.getElementById("mySelect");
                addSmallDivs(select.value);
                select.addEventListener("change", onChange, false);
                tablica = new Array();
                for (var i = 0; i < select.value * select.value; i++) {
                    tablica[i] = i;
                }
                document.getElementById("kolor").addEventListener("change", kolor, false);
            }
            function onChange() {
                var select = document.getElementById("mySelect");
                mainDiv.innerHTML = "";
                addSmallDivs(select.value);
                for (var i = 0; i < select.value * select.value; i++) {
                    tablica[i] = i;
                }

            }
            //
            function addSmallDivs(ile) {
                var rozmiar = window.innerWidth / document.getElementById("mySelect").value;
                rozmiar -= 10;
                //alert(rozmiar);
                var select = document.getElementById("mySelect");
                var main = document.getElementById("mainDiv");
                ruchy = (document.getElementById("mySelect").value * document.getElementById("mySelect").value)+1;
                for (var i = 0; i < ile; i++) {
                    for (var j = 0; j < ile; j++) {
                        var small = document.createElement("div");
                        var image = document.createElement("img");

                        main.appendChild(small);
                        //
                        small.appendChild(image);
                        image.style.visibility = false;
                        image.style.width = rozmiar + "px";
                        image.style.height = rozmiar + "px";
                        small.style.background = "green";
                        small.style.width = rozmiar + "px";
                        small.style.height = rozmiar + "px";
                        small.style.border = "solid";
                        small.style.borderColor = "#ffff00";
                        small.style.position = "absolute";
                        small.style.left = i * rozmiar + "px";
                        small.style.top = j * rozmiar + "px";
                        small.addEventListener("mousedown", onDown, false);
                        small.addEventListener("mouseup", onUp, false);

                    }
                }
            }
            var stan = false;

            function onDown(e) {
                var numer;
                var small = e.target; // target klikalny div
                var image = small.firstChild;
                var main = document.getElementById("mainDiv");
                //small.style.background = "#ff0000";
                for (var i = 0; i < main.childElementCount; i++) {
                    if (e.target == main.childNodes[i]) {
                        numer = i;
                    }
                }
                if (image.style.visibility == false);
                {
                    if (!stan) {
                        image.src = "grafika/krzyzyk.png";
                        tablica[numer] = "X";
                    }
                    else {
                        image.src = "grafika/kolko.png";
                        tablica[numer] = "O";
                    }
                    stan = !stan;
                    image.style.visibility = true;
                }


                wygrana();
                //alert("od lewej = " + small.style.left);
                ruchy--;
                if (ruchy == 0) {
                    alert("Koniec ruchów");
                    onChange();
                }


            }
            function onUp(e) {
                var small = e.target;
                //small.style.background = "#00ff00";


            }

            function wygrana() {
                var ROZMIAR = document.getElementById("mySelect").value;
                for (var i = 0; i < ROZMIAR; i++) {
                    var znak = tablica[i * ROZMIAR];
                    var win = true;
                    for (var j = 0; j < ROZMIAR; j++) {
                        if (tablica[j + i * ROZMIAR] != znak) {
                            win = false;
                            break;
                        }
                    }
                    if (win) {
                        alert(znak + " Wygrały");
                        onChange();
                        return;
                    }
                }
                for (var i = 0; i < ROZMIAR; i++) {
                    var znak = tablica[i];
                    for (var j = 0; j < ROZMIAR; j++) {
                        var win = true;
                        if (tablica[i + j * ROZMIAR] != znak) {
                            win = false;
                            break;
                        }
                    }
                    if (win) {
                        alert(znak + " Wygrały");
                        onChange();
                        return;
                    }
                }

                //od lewej do prawej
                var znak = tablica[0];
                var win = true;
                for (var i = 0; i < ROZMIAR; i++) {
                    if (tablica[i * ROZMIAR + i] != znak) {
                        win = false;
                        break;
                    }
                }
                if (win) {
                    alert(znak + " Wygrały");
                    onChange();
                    return;
                }

                //od prawej do lewej
                znak = tablica[ROZMIAR - 1];
                win = true;
                for (var i = 1; i <= ROZMIAR; i++) {
                    if (tablica[i * (ROZMIAR - 1)] != znak) {
                        win = false;
                        break;
                    }
                }
                if (win) {
                    alert(znak + " Wygrały");
                    onChange();
                    return;
                }

            }

            function kolor() {
                var kol = document.getElementById("kolor").value;
                var main = document.getElementById("mainDiv");
                for (i = 0; i < main.childElementCount; i++)
                    main.childNodes[i].style.backgroundColor = kol;

            }


        </script>
       <style>
           #mainDiv {
            margin: 0 auto;
           }
       </style>


    </head>
    <body>
        <select id="mySelect">
            <option value="3">3 x 3</option>
            <option value="4">4 x 4</option>
            <option value="5">5 x 5</option>
            <option value="6">6 x 6</option>

        </select>
                <select id="kolor">
            <option value="green">Zielony</option>
            <option value="red">Czerwony</option>
            <option value="white">Biały</option>
            <option value="yellow">Żółty</option>

        </select>
        <button id="nowa">
            nowa gra
        </button>

        <div id="mainDiv"></div>
       <!-- <script type="text/javascript" src="cordova.js"></script>-->

    </body>
    </html>