DA FINAL!!!!

<!DOCTYPE html>
<html>
<head>
    <title>Jogo do galo</title>
    <meta charset="utf-8">
    <style type="text/css">

        body{
            background-color: blue;
            color: white;
        }

        table,td{
            border: 1px solid white;
            margin: auto;
            border-collapse: collapse;
            background-color: green;
            text-align: center;

        }

        td{
            width: 100px;
            height: 100px;

        }

        table{
            width: 300px;
            height: 300px;
        }

        p{
            text-align: center;
        }

        input{
            border-radius: 15px;
        }

        input[type=button]{
            width: 150px;
            height: 27px;
            border-color: yellow;
        }

        input[type=text]{
            text-align: center;
            border-color: yellow;
        }

        .off{
            background-color: brown;
        }

        .on{
            background-color: green;
        }

        .naoganhou{
            display: none;
        }

        .ganhou{
            background-color: yellow;
            border: 1px solid black;
            color: black;
            width: 50%;
            margin: auto;
        }

    </style>
</head>
<body>
    <?php

        $turnbd = new mysqli('localhost','root','','exemplo da');

        if ($turnbd->connect_error) {
            die('Erro na ligação : ('. $turnbd->connect_errno .') '. $turnbd->connect_error);

        }

        //Inserçao

        if(isset($_POST['inserir'])){

            $query = "INSERT INTO resultados(numero,nick,tempo) VALUES(?,?,?)";


            if ($_POST['numero']=='' || $_POST['nick']=='' || $_POST['tempo']=='') {
                echo "<div class='alert'><h1>Existem campos que nao foram preenchidos!</h1></div>";
            }

            else{


                $statement = $turnbd->prepare($query);

                $statement->bind_param('sss', $_POST["numero"],
                                                $_POST["nick"],
                                                $_POST["tempo"]);
                $statement->execute();

                if ($statement->affected_rows>0){
                        echo "<div class='alert'><h1> O seu registo foi inserido!</h1></div>";
                }
                else{
                    die('Erro: ('. $turnbd->errno .') '. $turnbd->error);
                }
                $statement->close();

            }

            $turnbd->close();
        }

    ?>
    <h1 style="text-align: center; text-shadow: 2px 2px grey;">Jogo do Galo</h1>
    <h2 style="text-align: center; text-shadow: 2px 2px grey;">Contra o CPU</h2>
    <div class="naoganhou" id="vitoria">
        <h1 style="text-align: center;">PARABÉNS, VOCÊ GANHOU!!!</h1>
        <form class="" action="" method="post">
            <p style="text-align:center;">Introduza aqui o seu numero de aluno numero de aluno:</p>
            <p style="text-align:center;"><input type="text" name="numero" value="" placeholder="Numero" ></p>
            <p style="text-align:center;"> Introduza aqui o seu nickname:</p>
            <p style="text-align:center;"><input type="text" name="nick" value="" placeholder="Nome" ></p>
            <p style="text-align:center;">O seu tempo:</p>
            <p style="text-align:center;"><input type="text" name="tempo" value="" id="tempo" readonly=""></p>
            <p style="text-align:center;"><input class="" name="inserir" type="submit" value="Enviar Resultados"></p>
        </form>
    </div>
    <br>
    <br>
    <table>
        <tr>
            <td class="off" id="a1" onclick="marca('a1');">&nbsp;</td>
            <td class="off" id="a2" onclick="marca('a2');">&nbsp;</td>
            <td class="off" id="a3" onclick="marca('a3');">&nbsp;</td>
        </tr>
        <tr>
            <td class="off" id="a4" onclick="marca('a4');">&nbsp;</td>
            <td class="off" id="a5" onclick="marca('a5');">&nbsp;</td>
            <td class="off" id="a6" onclick="marca('a6');">&nbsp;</td>
        </tr>
        <tr>
            <td class="off" id="a7" onclick="marca('a7');">&nbsp;</td>
            <td class="off" id="a8" onclick="marca('a8');">&nbsp;</td>
            <td class="off" id="a9" onclick="marca('a9');">&nbsp;</td>
        </tr>
    </table>
    <p><input type="button" name="start" value="Start" id="start" onclick="start();interval();"></p>
    <p><input type="button" name="reset" value="Reset" id="reset" onclick="limpa()"></p>
    <h1 style="text-align: center;"  id="cronometro">00 : 00 : 00 : 00</h1>
    <p>Jogador<br><input type="text" name="jg1" id="jg1" value="0"></p>
    <p>CPU<br><input type="text" name="jg2" id="jg2" value="0"></p>
    <p>Empate<br><input type="text" name="emp" id="emp" value="0"></p>

    <script type="text/javascript">
        var j=0;
        var i,b,c,j,w;
        var win=0;
        var jogada=0;
        var k =0;
        var linhascpu;
        var linhasplayer;
        var board = [0, 0, 0, 0, 0, 0, 0, 0, 0];

        var cs = 0;
        var s = 0;
        var m = 0;
        var h = 0;
        var mcs = 0;
        var ms = 0;
        var mm = 0;
        var mh = 0;
        var form=document.getElementById('form');


        function interval() {
                intervalo= setInterval(cron,10);
        }

        function start(){
            document.getElementById('vitoria').className= "naoganhou";
            for(i=1;i<=9;i++){
                if(document.getElementById('a' +i).className= "off"){
                    document.getElementById('a' +i).className= "on"
                }
            }
        }

        function cron() {

        cs++;

        if (cs == 100 ) {
            s++; cs=0;
        }
        if (s == 60) {
            m++; s = 0;
        }
        if (m == 60) {
            h++; s = 0; m = 0;
        }


        if (cs<10) {
        mcs= "0" + cs
        }
        else{
            mcs= cs
        }

        if (s<10) {
            ms= "0" + s
        }
        else{
            ms=s
        }

        if (m<10) {
            mm= "0" + m
        }
        else{
            mm=m
        }

        if (h<10) {
            mh= "0" + h
        }
        else{
            mh=h
        }


        document.getElementById('cronometro').innerHTML= mh + " : " + mm + " : " + ms + " : " + mcs;

    }

    function recomeçar(){
        s=0;
        cs=0;
        m=0;
        h=0;
        document.getElementById('cronometro').innerHTML= "00 : 00 : 00 : 00"
        clearInterval(intervalo);
    }


        function marca(x){
            if (win==0 && k==0) {
                if(document.getElementById(x).innerHTML=='&nbsp;' && document.getElementById(x).className== "on"){
                    document.getElementById(x).innerHTML='X';
                    for (i=1;i<=9;i++){
                        if(document.getElementById('a' +i).innerHTML=='X'){
                            board[i-1]=1;
                        }
                    }
                    jogada++;
                    k=1;
                    verifica();
                }

                else{
                    alert('Não pode clickar nesta casa.')
                }


            if (jogada<9 && win==0 && k==1 /*&& modojogo==2*/) {

                if (jogada==1 && k==1) {
                    if (board[4]==1) {
                        board[6]=2;
                        console.log(board);
                        jogada++;
                        document.getElementById('a7').innerHTML='O';
                        k=0;
                        verifica();
                    }
                    else{
                        board[4]=2;
                        console.log(board);
                        jogada++;
                        document.getElementById('a5').innerHTML='O';
                        k=0;
                        verifica();
                    }
                }

                if (jogada==3 && k==1) {
                    if (board[2]==1 && board[6]==1 || board[0]==1 && board[8]==1) {
                        board[7]=2;
                        console.log(board);
                        jogada++;
                        document.getElementById('a8').innerHTML='O';
                        k=0;
                        verifica();
                    }
                    else if(board[4]==1 && board[2]==1 || board[4]==1 && board[0]==1 || board[4]==1 && board[8]==1){
                        if (board[8]==0) {
                            board[8]=2;
                            console.log(board);
                            jogada++;
                            document.getElementById('a9').innerHTML='O';
                            k=0;
                            verifica();
                        }
                        else if (board[0]==0) {
                            board[0]=2;
                            console.log(board);
                            jogada++;
                            document.getElementById('a1').innerHTML='O';
                            k=0;
                            verifica();
                        }

                    }

                }


                if (k==1) {
                    for(i=0,b=3,c=6;i<=3;i++,b++,c++){
                        if(board[i]==board[b] && board[i]!=0 || board[i]==board[c] && board[i]!=0 || board[b]==board[c] && board[b]!=0){
                            if (board[i]==0) {
                                board[i]=2;
                                console.log(board);
                                jogada++;
                                document.getElementById('a'+(i+1)).innerHTML='O';
                                k=0;
                                verifica();
                            }
                            else if (board[b]==0) {
                                board[b]=2;
                                console.log(board);
                                jogada++;
                                document.getElementById('a'+(b+1)).innerHTML='O';
                                k=0;
                                verifica();
                            }
                            else if (board[c]==0) {
                                board[c]=2;
                                console.log(board);
                                jogada++;
                                document.getElementById('a'+(c+1)).innerHTML='O';
                                k=0;
                                verifica();
                            }
                        }
                    }
                }

                if (k==1) {
                    for(i=0,b=1,c=2;i<=6;i=i+3,b=b+3,c=c+3){
                        if(board[i]==board[b] && board[i]!=0 || board[i]==board[c] && board[i]!=0 || board[b]==board[c] && board[b]!=0){
                            if (board[i]==0) {
                                board[i]=2;
                                console.log(board);
                                jogada++;
                                document.getElementById('a'+(i+1)).innerHTML='O';
                                k=0;
                                verifica();
                            }
                            else if (board[b]==0) {
                                board[b]=2;
                                console.log(board);
                                jogada++;
                                document.getElementById('a'+(b+1)).innerHTML='O';
                                k=0;
                                verifica();
                            }
                            else if (board[c]==0) {
                                board[c]=2;
                                console.log(board);
                                jogada++;
                                document.getElementById('a'+(c+1)).innerHTML='O';
                                k=0;
                                verifica();
                            }
                        }
                    }
                }

                if (k==1) {
                    if (board[0]==board[4] && board[0]!=0 || board[0]==board[8] && board[0]!=0 || board[4]==board[8] && board[4]!=0){
                        if (board[0]==0) {
                                board[0]=2;
                                console.log(board);
                                jogada++;
                                document.getElementById('a1').innerHTML='O';
                                k=0;
                                verifica();
                            }
                            else if (board[4]==0) {
                                board[4]=2;
                                console.log(board);
                                jogada++;
                                document.getElementById('a5').innerHTML='O';
                                k=0;
                                verifica();
                            }
                            else if (board[8]==0) {
                                board[8]=2;
                                console.log(board);
                                jogada++;
                                document.getElementById('a9').innerHTML='O';
                                k=0;
                                verifica();
                            }
                    }
                }

                if (k==1) {
                    if (board[2]==board[4] && board[2]!=0 || board[2]==board[6] && board[2]!=0 || board[4]==board[6] && board[4]!=0){
                        if (board[2]==0) {
                                board[2]=2;
                                console.log(board);
                                jogada++;
                                document.getElementById('a3').innerHTML='O';
                                k=0;
                                verifica();
                            }
                            else if (board[4]==0) {
                                board[4]=2;
                                console.log(board);
                                jogada++;
                                document.getElementById('a5').innerHTML='O';
                                k=0;
                                verifica();
                            }
                            else if (board[6]==0) {
                                board[6]=2;
                                console.log(board);
                                jogada++;
                                document.getElementById('a7').innerHTML='O';
                                k=0;
                                verifica();
                            }
                    }
                }

                if(k==1){
                    do{
                        c=Math.floor((Math.random()*9)+1);
                    }while (document.getElementById('a' + c ).innerHTML!='&nbsp;' && document.getElementById(x).className== "on");
                    board[c-1]=2;
                    console.log(board);
                    jogada++;
                    document.getElementById('a'+c).innerHTML='O';
                    k=0;
                    verifica();
                }


            }

        }
    }

     /*if (jogada<9 && win==0 && k==1 && modojogo==1){
        if(document.getElementById(x).innerHTML=='&nbsp;' && document.getElementById(x).className== "on"){
                    document.getElementById(x).innerHTML='O';
                    for (i=1;i<=9;i++){
                        if(document.getElementById('a' +i).innerHTML=='O'){
                            board[i-1]=1;
                        }
                    }
                    jogada++;
                    k=0;
                    verifica();
                }

                else{
                    alert('Não pode clickar nesta casa.')
                }
    }*/


        function verifica(){

            for(i=1,b=4,c=7;i<=3;i++,b++,c++){
                if(win==0){
                    if (document.getElementById('a' + i).innerHTML==document.getElementById('a' + b).innerHTML && document.getElementById('a' + i).innerHTML== document.getElementById('a' + c).innerHTML && document.getElementById('a' + i).innerHTML!='&nbsp;') {
                        if(document.getElementById('a'+i).innerHTML=='X'){
                            alert('Jogador venceu!');
                            document.getElementById('jg1').value=parseInt(document.getElementById('jg1').value) + 1;
                            win=1;
                            board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
                            for(i=1;i<=9;i++){
                                if(document.getElementById('a' +i).className= "on"){
                                            document.getElementById('a' +i).className= "off";
                                    }
                            }
                            document.getElementById('vitoria').className= "ganhou";
                            document.getElementById('tempo').value=mh + " : " + mm + " : " + ms + " : " + mcs;
                            limpa();
                            recomeçar();

                        }
                        else
                            if(document.getElementById('a'+i).innerHTML=='O'){
                            alert('CPU venceu!');
                            document.getElementById('jg2').value=parseInt(document.getElementById('jg2').value) + 1;
                            win=1;
                            board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
                            for(i=1;i<=9;i++){
                                if(document.getElementById('a' +i).className= "on"){
                                         document.getElementById('a' +i).className= "off";
                                    }
                            }
                            limpa();
                            recomeçar();
                        }
                    }
                }
            }

            for(i=1,b=2,c=3;i<=7;i=i+3,b=b+3,c=c+3){
                if(win==0){
                    if (document.getElementById('a' + i).innerHTML==document.getElementById('a' + b).innerHTML && document.getElementById('a' + i).innerHTML== document.getElementById('a' + c).innerHTML && document.getElementById('a' + i).innerHTML!='&nbsp;') {
                        if(document.getElementById('a'+i).innerHTML=='X'){
                            alert('Jogador venceu!');
                            document.getElementById('jg1').value=parseInt(document.getElementById('jg1').value) + 1;
                            win=1;
                            board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
                            for(i=1;i<=9;i++){
                                if(document.getElementById('a' +i).className= "on"){
                                            document.getElementById('a' +i).className= "off";
                                    }
                            }
                            document.getElementById('vitoria').className= "ganhou";
                            document.getElementById('tempo').value=mh + " : " + mm + " : " + ms + " : " + mcs;
                            limpa();
                            recomeçar();

                        }
                        else
                            if(document.getElementById('a'+i).innerHTML=='O'){
                                alert('CPU venceu!');
                                document.getElementById('jg2').value=parseInt(document.getElementById('jg2').value) + 1;
                                win=1;
                                board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
                                for(i=1;i<=9;i++){
                                    if(document.getElementById('a' +i).className= "on"){
                                            document.getElementById('a' +i).className= "off";
                                        }
                                }
                                limpa();
                                recomeçar();
                            }
                    }

                }
            }

            if(win==0){
                if(document.getElementById('a1').innerHTML== document.getElementById('a5').innerHTML && document.getElementById('a1').innerHTML==document.getElementById('a9').innerHTML && document.getElementById('a1').innerHTML!='&nbsp;'){
                    if(document.getElementById('a1').innerHTML=='X' && document.getElementById('a5').innerHTML=='X' && document.getElementById('a9').innerHTML=='X' ){
                        alert('Jogador venceu!');
                        document.getElementById('jg1').value=parseInt(document.getElementById('jg1').value) + 1;
                        win=1;
                        board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
                        for(i=1;i<=9;i++){
                                if(document.getElementById('a' +i).className= "on"){
                                            document.getElementById('a' +i).className= "off";
                                    }
                            }
                            document.getElementById('vitoria').className= "ganhou";
                            document.getElementById('tempo').value=mh + " : " + mm + " : " + ms + " : " + mcs;
                            limpa();
                            recomeçar();

                    }
                    else
                        if(document.getElementById('a1').innerHTML=='O' && document.getElementById('a5').innerHTML=='O' && document.getElementById('a9').innerHTML=='O' ){
                            alert('CPU venceu!');
                            document.getElementById('jg2').value=parseInt(document.getElementById('jg2').value) + 1;
                            win=1;
                            board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
                            for(i=1;i<=9;i++){
                                if(document.getElementById('a' +i).className= "on"){
                                            document.getElementById('a' +i).className= "off";
                                    }
                            }
                            limpa();
                            recomeçar();
                        }

                }
            }

            if(win==0){
                if(document.getElementById('a3').innerHTML== document.getElementById('a5').innerHTML && document.getElementById('a3').innerHTML==document.getElementById('a7').innerHTML && document.getElementById('a3').innerHTML!='&nbsp;'){
                    if(document.getElementById('a3').innerHTML=='X' && document.getElementById('a5').innerHTML=='X' && document.getElementById('a7').innerHTML=='X' ){
                        alert('Jogador venceu!');
                        document.getElementById('jg1').value=parseInt(document.getElementById('jg1').value) + 1;
                        win=1;
                        board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
                        for(i=1;i<=9;i++){
                            if(document.getElementById('a' +i).className= "on"){
                                document.getElementById('a' +i).className= "off";
                            }
                        }
                        document.getElementById('vitoria').className= "ganhou";
                        document.getElementById('tempo').value=mh + " : " + mm + " : " + ms + " : " + mcs;
                        limpa();
                        recomeçar();

                    }
                    else
                        if(document.getElementById('a3').innerHTML=='O' && document.getElementById('a5').innerHTML=='O' && document.getElementById('a7').innerHTML=='O' ){
                            alert('CPU venceu!');
                            document.getElementById('jg2').value=parseInt(document.getElementById('jg2').value) + 1;
                            win=1;
                            board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
                            for(i=1;i<=9;i++){
                                if(document.getElementById('a' +i).className= "on"){
                                            document.getElementById('a' +i).className= "off";
                                    }
                            }
                            limpa();
                            recomeçar();
                        }
                }
            }

            if (win==0 && jogada==9) {
                alert('Empate.');
                document.getElementById('emp').value=parseInt(document.getElementById('emp').value) + 1;
                board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
                for(i=1;i<=9;i++){
                    if(document.getElementById('a' +i).className= "on"){
                        document.getElementById('a' +i).className= "off";
                    }
                }
                limpa();
                recomeçar();


            }
        }
        function limpa(){
            for(i=1;i<=9;i++){
                document.getElementById('a' + i).innerHTML='&nbsp;';
            }
            jogada=0;
            win=0;
            j=0;
            k=0;
            board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
            s=0;
            cs=0;
            m=0;
            h=0;
            document.getElementById('cronometro').innerHTML= "00 : 00 : 00 : 00"
        }

    </script>
</body>
</html>