JogoDaBelha

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Jogo da Velha do Tio Zaraki </title>
    <style>
        th{
            width: 55px;
            height: 40px;
            padding: 0px;
            background-color: gray;
        }

        button{
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
    <p> Bem Vindo Ao Jogo Da Velha do Fucking Tio Zaraki :D! </p>
    <hr>
    <table border='1'>
        <tr>
            <td id='score' colspan='3'> <span id='p1'>P1</span> Score: | <span id='p2'>P2</span> Score: </td>
        </tr>
        <tr>
            <td colspan='3' id='jogada'> Jogada: 0 </td>
        </tr>
        <tr>
            <th><button id='1' onclick="Marcar(this)"> - </button> </th>
            <th><button id='2' onclick="Marcar(this)"> - </button> </th>
            <th><button id='3' onclick="Marcar(this)"> - </button> </th>
        </tr>
        <tr>
            <th><button id='4' onclick="Marcar(this)"> - </button> </th>
            <th><button id='5' onclick="Marcar(this)"> - </button> </th>
            <th><button id='6' onclick="Marcar(this)"> - </button> </th>
        </tr>
        <tr>
            <th><button id='7' onclick="Marcar(this)"> - </button> </th>
            <th><button id='8' onclick="Marcar(this)"> - </button> </th>
            <th><button id='9' onclick="Marcar(this)"> - </button> </th>
        </tr>
    </table>

    <a id='reiniciar' href='#' onclick="zerador()"> Reiniciar Partida </a> <br>
    <a id='reiniciar' href='#' onclick="zerador(null,true)"> Zerar Placar </a>

    <script>
    var p1 = 0;
    var p2 = 0;
    var turno = 'O';
    var values = [0];
    turnos(turno);
    // Preenchendo todos os campos da array values com ' - '
    for (var j = 1; j <= 9; j++)
    {
        values.push(document.getElementById(j).textContent);
    }

    // função que checa de quem é o turno.
    function turnos(turno){
        if(turno == 'O'){
            document.getElementById('p1').style.color = 'green';
            document.getElementById('p1').style.fontWeight = 'bolder';

            document.getElementById('p2').style.color = 'black';
            document.getElementById('p2').style.fontWeight = 'normal';
            return 'X';
        }else{
            document.getElementById('p2').style.color = 'green';
            document.getElementById('p2').style.fontWeight = 'bolder';
            document.getElementById('p1').style.color = 'black';
            document.getElementById('p1').style.fontWeight = 'normal';
            return 'O';
        }
    }

    function jogada(times){
            document.getElementById('jogada').textContent = 'Jogada: '+values[0];
    }
    </script>

    <script>
    function Marcar(id){
        var texto = id.textContent;
        var campo_x = id.id;

        if(turno == 'O' && (texto != 'X' && texto != 'O')){
        turno = turnos(turno);
        document.getElementById(campo_x).textContent = 'O';
        values[campo_x] = 'O';
        }else if(turno == 'X' && (texto != 'X' && texto != 'O')){
        turno = turnos(turno);
        document.getElementById(campo_x).textContent = 'X';
        values[campo_x] = 'X';
        }else{
            alert('Campo Já Escolhido');
            Marcar();
        }

        horizontal();
        vertical();
        diagonal();
        values[0]++;
        verif(values[0]);
        jogada(values[0]);
    }

    function verif(verif){
        if(verif == 9){
            zerador();
            alert('Deu Velha');

        }
    }


    function horizontal(){
        // Horizontal

        if(values[1] == 'O' && values[2] == 'O' && values[3] == 'O'){
        p1++;
        document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
        zerador('p1');
        }else if(values[1] == 'X' && values[2] == 'X' && values[3] == 'X'){
        p2++;
        document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
        zerador('p2');
        }

        if(values[4] == 'O' && values[5] == 'O' && values[6] == 'O'){
        p1++;
        document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
        zerador('p1');
        }else if(values[4] == 'X' && values[5] == 'X' && values[6] == 'X'){
        p2++;
        document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
        zerador('p2');
        }

        if(values[7] == 'O' && values[8] == 'O' && values[9] == 'O'){
        p1++;
        document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
        zerador('p1');
        }else if(values[7] == 'X' && values[8] == 'X' && values[9] == 'X'){
        p2++;
        document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
        zerador('p2');
        }
    }

    function vertical(){
        // Vertical
            if(values[1] == 'O' && values[4] == 'O' && values[7] == 'O'){
            p1++;
            document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
            zerador('p1');
            }else if(values[1] == 'X' && values[4] == 'X' && values[7] == 'X'){
            p2++;
            document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
            zerador('p2');
            }

            if(values[2] == 'O' && values[5] == 'O' && values[8] == 'O'){
            p1++;
            document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
            zerador('p1');
            }else if(values[2] == 'X' && values[5] == 'X' && values[8] == 'X'){
            p2++;
            document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
            zerador('p2');
            }

            if(values[3] == 'O' && values[6] == 'O' && values[9] == 'O'){
            p1++;
            document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
            zerador('p1');
            }else if(values[3] == 'X' && values[6] == 'X' && values[9] == 'X'){
            p2++;
            document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
            zerador('p2');
            }
    }

    function diagonal(){
        // Diagonal
        for (var i = 1; i <= 2; i++) {
            if(values[i] == 'O' && values[i+4] == 'O' && values[i+8] == 'O'){
            p1++;
            document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
            zerador('p1');
            }else if(values[i] == 'X' && values[i+4] == 'X' && values[i+8] == 'X'){
            p2++;
            document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
            zerador('p2');
            }
        };
    }


    function zerador(win, zerar){

        for (var i = 1; i <= 9; i++) {
            document.getElementById(i).textContent = '-';
            values = [0];
        };

        if(win == 'p1'){
            alert('O Player 1 Venceu!');
        }else if(win == 'p2'){
            alert('O Player 2 Venceu!');
        }

        if(zerar){
            p1 = 0;
            p2 = 0;
            document.getElementById('score').textContent = ' P1 Score: '+p1+' | P2 Score: '+p2;
        }
    }
    </script>
</body>
</html>