Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iks - Oks / Danijel Obradovic NRT-79/12</title>

    <style>
        .polje {
            border: 1px solid #666;
            box-sizing: border-box;
            display: inline-block;
            font-size: 32px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            width: 100px;
        }

        .polje .sadrzaj {
            display: inline-block;
            vertical-align: middle;
        }

        #reset {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<p>Trenutno igra: <span id="trenutni-igrac"></span></p>

<div id="tabla"></div>

<button id="reset">Nova igra</button>

<script>
    const trenutniIgrac = document.querySelector('#trenutni-igrac');
    const tabla =  document.querySelector('#tabla');
    const resetDugme =  document.querySelector('#reset');

    function inicijalizujStanje() {
        return {
            modelTable:[
                [null, null, null],
                [null, null, null],
                [null, null, null]
            ],
            igraci: ['X', 'O'],
            trenutniIgrac: 0,
            kraj: false,
            potez: 0,
        };
    }

    stanje = inicijalizujStanje();

    function prikaziTablu() {
        trenutniIgrac.textContent = stanje.igraci[stanje.trenutniIgrac];

        tabla.innerHTML = '';

        for (let i = 0; i < 3; i++) {
            const red = document.createElement('div');
            red.classList.add('red');

            for (let j = 0; j < 3; j++) {
                const polje = document.createElement('div');
                polje.classList.add('polje');
                polje.setAttribute('data-i', i);
                polje.setAttribute('data-j', j);

                const sadrzaj = document.createElement('span');
                sadrzaj.classList.add('sadrzaj');
                sadrzaj.textContent = stanje.modelTable[i][j];
                polje.appendChild(sadrzaj);
                red.appendChild(polje);
            }

            tabla.appendChild(red);
        }
    }

    function zakaciListenere() {
        tabla.addEventListener('click', event => {
            if (stanje.kraj) {
                return;
            }

            if (!event.target.classList.contains('polje')) {
                return;
            }

            const polje = event.target;
            const i = parseInt(polje.getAttribute('data-i'), 10);
            const j = parseInt(polje.getAttribute('data-j'), 10);

            if (stanje.modelTable[i][j] !== null) {
                alert('Ovo polje je vec popunjeno!');

                return;
            }

            const igrac = stanje.igraci[stanje.trenutniIgrac];
            stanje.modelTable[i][j] = igrac;

            const pobedonosniPokret = proveraPobede(stanje.modelTable, igrac);

            stanje.potez++;

            if (!pobedonosniPokret) {
                stanje.trenutniIgrac = (stanje.trenutniIgrac + 1) % 2;

                prikaziTablu();

                if (stanje.potez === 9) {
                    alert('Odigrali ste nereseno!');
                }
            } else {
                prikaziTablu();

                stanje.kraj = true;

                alert(`Igrac ${igrac} je pobedio!`);
            }
        });

        resetDugme.addEventListener('click', () => {
            if (confirm('Da li zelite da pokrenete novu igru?')) {
                stanje = inicijalizujStanje();

                prikaziTablu();
            }
        });
    }

    function proveraPobede(tabla, igrac) {
        // Proveri horizontalno.
        for (let i = 0; i < 3; i++) {
            if (tabla[i].every(polje => polje === igrac)) {
                return true;
            }
        }

        // Proveri vertikalno.
        for (let j = 0; j < 3; j++) {
            let imamoLiPobednika = true;

            for (let i = 0; i < 3; i++) {
                if (tabla[i][j] !== igrac) {
                    imamoLiPobednika = false;

                    break;
                }
            }

            if (imamoLiPobednika) {
                return imamoLiPobednika;
            }
        }

        // Proveri dijagonalno - od juga ka istoku.
        let imamoLiPobednika = true;

        for (let i = 0; i < 3; i++) {
            if (tabla[i][i] !== igrac) {
                imamoLiPobednika = false;

                break;
            }
        }

        if (imamoLiPobednika) {
            return imamoLiPobednika;
        }

        // Proveri dijagonalno - od severa ka istoku.
        imamoLiPobednika = true;

        for (let i = 3 - 1, j = 0; i >= 0; i--, j++) {
            if (tabla[i][j] !== igrac) {
                imamoLiPobednika = false;

                break;
            }
        }

        if (imamoLiPobednika) {
            return imamoLiPobednika;
        }

        return false;
    }

    prikaziTablu();
    zakaciListenere();
</script>
</body>
</html>