Problem with JavaScript Old Game

Navigation
1

I have a Problem that when the Player 'X' wins appears the Alert normally, but then an alert appears informing that the 'O' player has won as well. I would like to inform only one alert with the winner. 

var jogador = 'x';
var jogada = 0;

function chkJogo(id){
    var src = chkSrc(id);
    var cpu = document.getElementById('cpu').checked;
    if(src == "branco.png"){
     document.getElementById(id).src = "img/"+ jogador +".png";
     jogada++;
     if(chkVitoria()){
        alert('Fim do jogo!\n Vitória do '+ jogador);
        location.reload();
     }
     if(jogada >= 9){
        alert('Jogo Empatado!');
        location.reload();
     }
       if(jogador == 'x'){
         jogador = 'o';
       } else {
         jogador = 'x';
     }    
}



 if(cpu && jogador == 'o'){
    chkJogo(jogadaDoComputador());
  }
}   


function jogadaDoComputador(){

return 'cel' + Math.floor((Math.random() * 9) + 1);
}

function chkSrc(id){
    var src = document.getElementById(id).src;
    return src.substring(src.length - 10, src.length);
}

function chkVitoria(){
    if((chkSrc('cel1') == chkSrc('cel2')) && (chkSrc('cel1') ==
    chkSrc('cel3')) && (chkSrc('cel1') != 'branco.png')){
    return true;
    }
    if((chkSrc('cel4') == chkSrc('cel5')) && (chkSrc('cel4') ==
    chkSrc('cel6')) && (chkSrc('cel4') != 'branco.png')){
    return true;
    }
    if((chkSrc('cel7') == chkSrc('cel8')) && (chkSrc('cel7') ==
    chkSrc('cel9')) && (chkSrc('cel7') != 'branco.png')){
    return true;
    }
    if((chkSrc('cel1') == chkSrc('cel4')) && (chkSrc('cel1') ==
    chkSrc('cel7')) && (chkSrc('cel1') != 'branco.png')){
    return true;
    }
    if((chkSrc('cel2') == chkSrc('cel5')) && (chkSrc('cel2') ==
    chkSrc('cel8')) && (chkSrc('cel2') != 'branco.png')){
    return true;
    }
    if((chkSrc('cel3') == chkSrc('cel6')) && (chkSrc('cel3') ==
    chkSrc('cel9')) && (chkSrc('cel3') != 'branco.png')){
    return true;
    }
    if((chkSrc('cel1') == chkSrc('cel5')) && (chkSrc('cel1') ==
    chkSrc('cel9')) && (chkSrc('cel1') != 'branco.png')){
    return true;
    }
    if((chkSrc('cel3') == chkSrc('cel5')) && (chkSrc('cel3') ==
    chkSrc('cel7')) && (chkSrc('cel3') != 'branco.png')){
    return true;
    }
    return false;
}

HTML 

 <!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>Jogo da Velha</title>
<script type="text/javascript" src="js/script.js"></script>
 </head>
<body bgcolor="black">
<b style="color: aliceblue" id="msg">Computador</b> 
<input type="checkbox" id="cpu" checked>
<table border="0" cellspacing= "5" align="center">
    <tr>
    <td><img src="img/branco.png" id="cel1" onClick="chkJogo(this.id)"></td>
    <td><img src="img/branco.png" id="cel2" onClick="chkJogo(this.id)"></td>
    <td><img src="img/branco.png" id="cel3" onClick="chkJogo(this.id)"></td>
    </tr>
    <tr>
    <td><img src="img/branco.png" id="cel4" onClick="chkJogo(this.id)"></td>
    <td><img src="img/branco.png" id="cel5" onClick="chkJogo(this.id)"></td>
    <td><img src="img/branco.png" id="cel6" onClick="chkJogo(this.id)"></td>
    </tr>
    <tr>
    <td><img src="img/branco.png" id="cel7" onClick="chkJogo(this.id)"></td>
    <td><img src="img/branco.png" id="cel8" onClick="chkJogo(this.id)"></td>
    <td><img src="img/branco.png" id="cel9" onClick="chkJogo(this.id)"></td>
    </tr>   
</table>
</body>
</html>
    
asked by anonymous 08.08.2018 / 02:37

1 answer

1

Put a return; after each location.reload(); .

location.reload(); will not prevent the rest of the function from running before you start reloading the page. With this, the function is executed again ( chkJogo(jogadaDoComputador()); ).

The return; will prevent the function from continuing to run, and when alert is closed, reload will occur. 

function chkJogo(id){
    var src = chkSrc(id);
    var cpu = document.getElementById('cpu').checked;
    if(src == "branco.png"){
     document.getElementById(id).src = "img/"+ jogador +".png";
     jogada++;
     if(chkVitoria()){
        alert('Fim do jogo!\n Vitória do '+ jogador);
        location.reload();
        return; // ←←←←←←←←←←←←←←←←
     }
     if(jogada >= 9){
        alert('Jogo Empatado!');
        location.reload();
        return; // ←←←←←←←←←←←←←←←←
     }
       if(jogador == 'x'){
         jogador = 'o';
       } else {
         jogador = 'x';
     }    
}
    
08.08.2018 / 03:08
Filtering Power Pivot Table by ListBox When the 404 error in the header, and redirect to a specific page? [closed]