Good afternoon, right now I'm developing a javascript, html and css project. it is the Game of the Rooster, the game works only that I need that the warning of victory or of tie only appears after the X or the O. And what is happening is that the alert appears 1º that the image. After searching I found the setTimeout () method, but I do not understand how to use it.
I'll put all the code I have so far.
Thank you very much
var jogador = 'X';
var empate = 0;
function vJogo (id){
var src = vSrc(id);
var pc = document.getElementById('pc').checked;
if (src=="branco.jpg") {
document.getElementById(id).src="images/" + jogador + ".jpg";
empate++;
if (vencedor()){
alert("Fim do jogo! Parabéns !!! Venceu o "+ jogador );
return;
}
if(empate >= 9){
alert("Empate !!!");
return;
}
if (jogador =='X') {
jogador = 'O';
}else{
jogador = 'X';
}
}
if(pc && jogador == 'O'){
vJogo(computadorJoga());
}
}
function computadorJoga(){
if (vSrc('cel4')=='branco.jpg') {
return 'cel4' ;
}
return 'cel' + (Math.floor(Math.random()*9)+1);
}
function vSrc(id){
var src = document.getElementById(id).src;
return src.substring(src.length -10, src.length);
}
function vencedor (){
if ((vSrc('cel0')==vSrc('cel1')) && (vSrc('cel0')== vSrc('cel2')) && vSrc('cel0') !='branco.jpg') {
return true;
}
if ((vSrc('cel3')==vSrc('cel4')) && (vSrc('cel3')== vSrc('cel5')) && vSrc('cel3') !='branco.jpg') {
return true;
}
if ((vSrc('cel6')==vSrc('cel7')) && (vSrc('cel6')== vSrc('cel8')) && vSrc('cel6') !='branco.jpg') {
return true;
}
if ((vSrc('cel0')==vSrc('cel3')) && (vSrc('cel0')== vSrc('cel6')) && vSrc('cel0') !='branco.jpg') {
return true;
}
if ((vSrc('cel1')==vSrc('cel4')) && (vSrc('cel1')== vSrc('cel7')) && vSrc('cel1') !='branco.jpg') {
return true;
}
if ((vSrc('cel2')==vSrc('cel5')) && (vSrc('cel2')== vSrc('cel8')) && vSrc('cel2') !='branco.jpg') {
return true;
}
if ((vSrc('cel0')==vSrc('cel4')) && (vSrc('cel0')== vSrc('cel8')) && vSrc('cel0') !='branco.jpg') {
return true;
}
if ((vSrc('cel2')==vSrc('cel4')) && (vSrc('cel2')== vSrc('cel6')) && vSrc('cel2') !='branco.jpg') {
return true;
}
return false;
}
function novoJogo(){
location.reload();
}body{
background:silver;
}
h1{
font-size:40px;
color: bold;
text-align: center;
text-shadow: 3px 4px 3px red;
}
h3{
color: bold;
}
table{
width: 450px;
height:300px;
border:2px solid red;
border-spacing: 5px;
margin:auto;
box-shadow: 3px 3px 3px silver;
}
table tr {
background-color: silver;
}
table tr td {
text-align:center;
width:33.33%}
img {
border-radius: 10px;
box-shadow: 0px 17px 10px -10px rgba(0,0,0,0.4);
cursor: pointer;
transition: all ease-in-out 300ms;
}
input{
border-color: red;
margin-left: 200px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/funcao.js"></script>
<title>Jogo do Galo</title>
</head>
<body>
<div>
<h1>Jogo do Galo</h1>
<h3>Computador</h3>
<input type="checkbox" name="checkbox" id="pc" >
<table>
<tr>
<td ><img src="images/branco.jpg" id="cel0" onclick="vJogo(this.id)"></td>
<td><img src="images/branco.jpg" id="cel1" onclick="vJogo(this.id)"></td>
<td><img src="images/branco.jpg" id="cel2" onclick="vJogo(this.id)"></td>
</tr>
<tr>
<td ><img src="images/branco.jpg" id="cel3" onclick="vJogo(this.id)"></td>
<td><img src="images/branco.jpg" id="cel4" onclick="vJogo(this.id)"></td>
<td ><img src="images/branco.jpg" id="cel5" onclick="vJogo(this.id)"></td>
</tr>
<tr>
<td ><img src="images/branco.jpg" id="cel6" onclick="vJogo(this.id)"></td>
<td ><img src="images/branco.jpg" id="cel7" onclick="vJogo(this.id)"></td>
<td ><img src="images/branco.jpg" id="cel8" onclick="vJogo(this.id)"></td>
</tr>
</table>
<input type="button" value="NOVO JOGO" name="botao" id="botao" onclick="novoJogo()">
</div >
</body>
</html>