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>
        *{
            margin:0;
            padding:0;
        }
        #poj{
            position:relative
        }
        .pole{
            font-size:30px;
            font-weight:bolder;
            text-align:center;
        }
    </style>
    <script src="libs/jquery.js"></script>
</head>
<body>
    <div id="main">

    </div>
    <script>
       $(document).ready(function(){
        let tab = [];
        createGame();
        klikanie();
        let wygrana = 0;
        function klikanie(){
        let kolko = false;


        $('.pole').on('click', function(){
            if (kolko){
                $(this).html('O').addClass('checkedy').off('click');
                tab.push(this)
                kolko = !kolko;

            }
            else{
                $(this).html('X').addClass('checkedx').off('click');
                tab.push(this)

                kolko = !kolko;
                console.log(this)
            }
           setTimeout(function(){winCheck()},100);
        });
        }
        function createGame(){
            $('.pole').remove()
            let numer = 1
            for (let i = 0; i < 3; i++){
                for(let j = 0; j < 3; j++){
                    let pole = $('<div>').addClass('pole').css({'position': 'absolute', 'width': '50px', 'height': '50px', 'border': '1px solid black', 'top': 50 + 50 * i, 'left': 50*j }).addClass('p'+numer);
                    $('#main').append(pole);
                    numer++
                }
            }
            $('.pole').on('click', klikanie());
        }
        function winCheck(){


                if($('.p1').hasClass('checkedx') && $('.p4').hasClass('checkedx') && $('.p7').hasClass('checkedx')){
                    wygrana = 1
                    console.log('eluwa1')
                }
                else if($('.p2').hasClass('checkedx') && $('.p5').hasClass('checkedx') && $('.p8').hasClass('checkedx')){
                    wygrana = 1
                    console.log('eluwa2')
                }
                else if($('.p3').hasClass('checkedx') && $('.p6').hasClass('checkedx') && $('.p9').hasClass('checkedx')){
                    wygrana = 1
                    console.log('eluwa3')
                }
                else if($('.p1').hasClass('checkedx') && $('.p2').hasClass('checkedx') && $('.p3').hasClass('checkedx')){
                    wygrana = 1
                    console.log('eluwa4')
                }
                else if($('.p4').hasClass('checkedx') && $('.p5').hasClass('checkedx') && $('.p6').hasClass('checkedx')){
                    wygrana = 1
                    console.log('eluwa5')
                }
                else if($('.p7').hasClass('checkedx') && $('.p8').hasClass('checkedx') && $('.p9').hasClass('checkedx')){
                    wygrana = 1
                    console.log('eluwa6')
                }
                else if($('.p1').hasClass('checkedx') && $('.p5').hasClass('checkedx') && $('.p9').hasClass('checkedx')){
                    wygrana = 1
                    console.log('eluwa7')
                }
                else if($('.p3').hasClass('checkedx') && $('.p5').hasClass('checkedx') && $('.p7').hasClass('checkedx')){
                    wygrana = 1
                    console.log('eluwa8')
                }
                else if($('.p1').hasClass('checkedy') && $('.p4').hasClass('checkedy') && $('.p7').hasClass('checkedy')){
                    wygrana = 2
                    console.log('eluwa9')
                }
                else if($('.p2').hasClass('checkedy') && $('.p5').hasClass('checkedy') && $('.p8').hasClass('checkedy')){
                    wygrana = 2
                    console.log('1eluwa')
                }
                else if($('.p3').hasClass('checkedy') && $('.p6').hasClass('checkedy') && $('.p7').hasClass('checkedy')){
                    wygrana = 2
                    console.log('2eluwa')
                }
                else if($('.p1').hasClass('checkedy') && $('.p2').hasClass('checkedy') && $('.p3').hasClass('checkedy')){
                    wygrana = 2
                    console.log('3eluwa')
                }
                else if($('.p4').hasClass('checkedy') && $('.p5').hasClass('checkedy') && $('.p6').hasClass('checkedy')){
                    wygrana = 2
                    console.log('4eluwa')
                }
                else if($('.p7').hasClass('checkedy') && $('.p8').hasClass('checkedy') && $('.p9').hasClass('checkedy')){
                    wygrana = 2
                    console.log('5eluwa')
                }
                else if($('.p1').hasClass('checkedy') && $('.p5').hasClass('checkedy') && $('.p9').hasClass('checkedy')){
                    wygrana = 2
                    console.log('6eluwa')
                }
                else if($('.p3').hasClass('checkedy') && $('.p5').hasClass('checkedy') && $('.p7').hasClass('checkedy')){
                    wygrana = 2
                    console.log('7eluwa')
                }
                else if(tab.length == 9 ){
                    wygrana = 3
                }


            if(wygrana == 2){
                window.alert('WYGRANA KÓŁKA, aby zagrac od nowa nacisnij ok')
                wygrana = 0
                createGame();
            }
            else if(wygrana == 1){
                window.alert('WYGRANA KRZYŻYKA, aby zagrac od nowa nacisnij ok')
                wygrana = 0
                createGame();
            }
            else if(wygrana == 3){
                window.alert ('REMIS, aby zagrac od nowa nacisnij ok')
                wygrana = 0
                createGame();
            }
        }
       /* function klikniecie(){
            if (kolko){
                $(this).html('O').addClass('o').off('click');
                kolko = !kolko;
                console.log(this);
            }
            else{
                $(this).html('X').addClass('x').off('click');
                kolko = !kolko;
                console.log(this)
            }
        }*/

       })
    </script>
</body>
</html>