Problem with Javascript Game Old

Asked

Viewed 119 times

1

I have a Problem that when Player 'X' wins appears Alert normally, but then an Alert appears informing that Player 'O' 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>
javascript

  • See if it helps the command location.reload(true); This will cause the page to be actually reloaded and not taken from the temporary. It may be that some value is getting in the game execution.

1 answer

1


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

The location.reload(); will not prevent the rest of the function from running before starting to reload the page. With this, the function is run again (chkJogo(jogadaDoComputador());).

The return; will prevent the function from continuing to be executed, and when the alert is closed, will occur the Reload.

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';
     }    
}

  • Perfect Now Worked the way I wanted, Thank you very much!! Good Diia !!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.