Estou com um Problema que quando o Jogador 'X' ganha aparece o Alert normalmente, porém em seguida aparece um alert informando que o jogador 'O' ganhou tambem. Gostaria de informar só um alert com o ganhador.
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>
location.reload(true);
Isso fará com que a página seja realmente recarregada e não pega do temporário. Pode ser que algum valor esteja ficando na execução do jogo.