Skip to main content
removeu 27 caracteres do conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294



  
    
    
        
        
    
    
        .botao{
            width:32%;
            height:100px;
            font-size:70px;
            font-weight:bold; 
            border-radius:0px;
            
        }
        
        #jogador{
            font-size:38px;
        }
       
    
  
        
          
                    
              
              
              
              
              
              
              
              
                       
          
      
      
          
            É a vez do jogador 1
          
      
      
           
    
    
    
     
        
        $(document).ready(function() {
          var jogador = 1;             
<head>
    <meta charset="utf-8">
  $("  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="https://maxcdn.botao")bootstrapcdn.click(function()com/bootstrap/3.3.7/css/bootstrap.min.css" {rel="stylesheet">
    <style type="text/css">
    if(jogador == 1)  .botao {
            width: 32%;
            height: 100px;
            $(this).text("X");font-size: 70px;
            jogadorfont-weight: =bold;
 2;           border-radius: 0px;
        }
        
        #jogador {
            font-size: 38px;
        } 

 else {  </style>

</head>

<body>
    <div class="row">
        <div class="container col-sm-4 col-sm-offset-4 bloco">
            <button id="btn1" name="btn1" class="btn btn-default botao"></button>
            <button id="btn2" name="btn2" class="btn btn-default botao"></button>
            <button id="btn3" name="btn3" class="btn btn-default botao"></button>
            <button id="btn4" name="btn4" class="btn btn-default botao"></button>
            <button id="btn5" name="btn5" class="btn btn-default botao"></button>
            <button id="btn6" name="btn6" class="btn btn-default botao"></button>
            <button id="btn7" name="btn7" class="btn btn-default botao"></button>
            <button id="btn8" name="btn8" class="btn btn-default botao"></button>
            <button id="btn9" name="btn9" class="btn btn-default botao"></button>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-5 col-sm-offset-3">
            <label class="col-sm-offset-3 col-xs-offset-2" id="jogador">É a vez do jogador 1</label>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(thisdocument).textready("O"function(); {
            var jogador = 1; 

            $(".botao").click(function() {
         }       if (jogador == 1) {
                    $("#jogador"this).text("X");
 a vez do jogador " +              jogador); = 2;

                } else {
                    $(this).text("O");
        
             jogador = 1;

                }
        
      }   $("#jogador").text("É a vez do jogador " + jogador); 
        
     });
        });

        function verificar() { 
           
  if (
     if(
           //Verificação na horizontal
                $("btn1,btn2,btn3").text("X") || $("btn4,btn5,btn6").text("X") || $("btn7,btn8,btn9").text("X") ||
                //Verificação na vertical   
                $("btn1,btn4,btn7").text("X") || $("btn2,btn5,btn8").text("X") || $("btn3,btn6,btn9").text("X") ||
                //Verificação na diagonal   
                $("btn1,btn5,btn9").text("X") || $("btn3,btn5,btn7").text("X")) {
           
                alert("O jogador 1 venceu !");
       }
       
 } else if (
   else if(
            //Verificação na horizontal
                $("btn1,btn2,btn3").text("O") || $("btn4,btn5,btn6").text("O") || $("btn7,btn8,btn9").text("O") ||
                //Verificação na vertical   
                $("btn1,btn4,btn7").text("O") || $("btn2,btn5,btn8").text("O") || $("btn3,btn6,btn9").text("O") ||
                //Verificação na diagonal   
                $("btn1,btn5,btn9").text("O") || $("btn3,btn5,btn7").text("O")) {
           
                alert("O jogador 2 venceu!");
       }
   }  }
        }
  
</script>>      </script>>
 
</body>



  
    
    
        
        
    
    
        .botao{
            width:32%;
            height:100px;
            font-size:70px;
            font-weight:bold; 
            border-radius:0px;
            
        }
        
        #jogador{
            font-size:38px;
        }
       
    
  
        
          
                    
              
              
              
              
              
              
              
              
                       
          
      
      
          
            É a vez do jogador 1
          
      
      
           
    
    
    
     
        
        $(document).ready(function() {
          var jogador = 1;             
       $(".botao").click(function() {
         if(jogador == 1) {               
            $(this).text("X");
            jogador = 2;               
             
         } else {
            $(this).text("O");
            jogador = 1;
            
         }
         $("#jogador").text( a vez do jogador " + jogador);
       });
        
        
              
        
      });        
   
    
    function verificar(){           
        if(
          //Verificação na horizontal
          $("btn1,btn2,btn3").text("X") || $("btn4,btn5,btn6").text("X") || $("btn7,btn8,btn9").text("X") ||
          //Verificação na vertical   
          $("btn1,btn4,btn7").text("X") || $("btn2,btn5,btn8").text("X") || $("btn3,btn6,btn9").text("X") ||
          //Verificação na diagonal   
          $("btn1,btn5,btn9").text("X") || $("btn3,btn5,btn7").text("X")){
           
               alert("O jogador 1 venceu !");
       }
       
       else if(
            //Verificação na horizontal
            $("btn1,btn2,btn3").text("O") || $("btn4,btn5,btn6").text("O") || $("btn7,btn8,btn9").text("O") ||
            //Verificação na vertical   
            $("btn1,btn4,btn7").text("O") || $("btn2,btn5,btn8").text("O") || $("btn3,btn6,btn9").text("O") ||
            //Verificação na diagonal   
            $("btn1,btn5,btn9").text("O") || $("btn3,btn5,btn7").text("O")){
           
               alert("O jogador 2 venceu!");
       }
   }          
  
</script>>      
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .botao {
            width: 32%;
            height: 100px;
            font-size: 70px;
            font-weight: bold;
            border-radius: 0px;
        }
        
        #jogador {
            font-size: 38px;
        } 

    </style>

</head>

<body>
    <div class="row">
        <div class="container col-sm-4 col-sm-offset-4 bloco">
            <button id="btn1" name="btn1" class="btn btn-default botao"></button>
            <button id="btn2" name="btn2" class="btn btn-default botao"></button>
            <button id="btn3" name="btn3" class="btn btn-default botao"></button>
            <button id="btn4" name="btn4" class="btn btn-default botao"></button>
            <button id="btn5" name="btn5" class="btn btn-default botao"></button>
            <button id="btn6" name="btn6" class="btn btn-default botao"></button>
            <button id="btn7" name="btn7" class="btn btn-default botao"></button>
            <button id="btn8" name="btn8" class="btn btn-default botao"></button>
            <button id="btn9" name="btn9" class="btn btn-default botao"></button>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-5 col-sm-offset-3">
            <label class="col-sm-offset-3 col-xs-offset-2" id="jogador">É a vez do jogador 1</label>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            var jogador = 1; 

            $(".botao").click(function() {
                if (jogador == 1) {
                    $(this).text("X");
                    jogador = 2;

                } else {
                    $(this).text("O");
                    jogador = 1;

                }
                $("#jogador").text("É a vez do jogador " + jogador); 
            });
        });

        function verificar() { 
            if (
                //Verificação na horizontal
                $("btn1,btn2,btn3").text("X") || $("btn4,btn5,btn6").text("X") || $("btn7,btn8,btn9").text("X") ||
                //Verificação na vertical   
                $("btn1,btn4,btn7").text("X") || $("btn2,btn5,btn8").text("X") || $("btn3,btn6,btn9").text("X") ||
                //Verificação na diagonal   
                $("btn1,btn5,btn9").text("X") || $("btn3,btn5,btn7").text("X")) {

                alert("O jogador 1 venceu !");
            } else if (
                //Verificação na horizontal
                $("btn1,btn2,btn3").text("O") || $("btn4,btn5,btn6").text("O") || $("btn7,btn8,btn9").text("O") ||
                //Verificação na vertical   
                $("btn1,btn4,btn7").text("O") || $("btn2,btn5,btn8").text("O") || $("btn3,btn6,btn9").text("O") ||
                //Verificação na diagonal   
                $("btn1,btn5,btn9").text("O") || $("btn3,btn5,btn7").text("O")) {

                alert("O jogador 2 venceu!");
            }
        }

    </script>>

</body>
Fonte Link

Verificação vencedor jogo da velha Jquery

Criei uma função para verificar linhas na horizonal, vertical e diagonal, pra ver qual é o vencedor, mas quando chamo a função ela mostra vencedor logo no primeiro clique. Alguem pode me ajudar no que alterar no codigo pra que a logica funcione?

Segue o codigo que ja tenho aqui:



  
    
    
        
        
    
    
        .botao{
            width:32%;
            height:100px;
            font-size:70px;
            font-weight:bold; 
            border-radius:0px;
            
        }
        
        #jogador{
            font-size:38px;
        }
       
    
  
        
          
                    
              
              
              
              
              
              
              
              
                       
          
      
      
          
            É a vez do jogador 1
          
      
      
           
    
    
    
     
        
        $(document).ready(function() {
          var jogador = 1;             
       $(".botao").click(function() {
         if(jogador == 1) {               
            $(this).text("X");
            jogador = 2;               
             
         } else {
            $(this).text("O");
            jogador = 1;
            
         }
         $("#jogador").text("É a vez do jogador " + jogador);
       });
        
       
              
        
     });        
  
    
    function verificar(){           
       if(
          //Verificação na horizontal
          $("btn1,btn2,btn3").text("X") || $("btn4,btn5,btn6").text("X") || $("btn7,btn8,btn9").text("X") ||
          //Verificação na vertical   
          $("btn1,btn4,btn7").text("X") || $("btn2,btn5,btn8").text("X") || $("btn3,btn6,btn9").text("X") ||
          //Verificação na diagonal   
          $("btn1,btn5,btn9").text("X") || $("btn3,btn5,btn7").text("X")){
           
               alert("O jogador 1 venceu !");
       }
       
       else if(
            //Verificação na horizontal
            $("btn1,btn2,btn3").text("O") || $("btn4,btn5,btn6").text("O") || $("btn7,btn8,btn9").text("O") ||
            //Verificação na vertical   
            $("btn1,btn4,btn7").text("O") || $("btn2,btn5,btn8").text("O") || $("btn3,btn6,btn9").text("O") ||
            //Verificação na diagonal   
            $("btn1,btn5,btn9").text("O") || $("btn3,btn5,btn7").text("O")){
           
               alert("O jogador 2 venceu!");
       }
   }          
  
</script>>