1

Boa tarde, neste momento estou a desenvolver um projeto de javascript, html e css. trata-se do jogo do Galo, o jogo funciona só que necessito que o alert de vitória ou de empate só apareça depois de o X ou a O. E o que está a acontecer é que o alert aparece 1º que a imagem. Depois de pesquisar encontrei o método setTimeout(), mas não estou a perceber como utilizar.

Vou colocar todo o código que tenho até agora.

Muito obrigado

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>

1 Resposta 1

3

Você pode fazer da seguinte forma: defina uma função em que você fará o alert().

function minhaFuncao() {
    alert('Chegou aqui.');
}

Agora, você pode chamar a função setTimeout passando como primeiro parâmetro uma função a ser executada e como segundo parâmetro o tempo que deve esperar para chamar essa função em milissegundos.

setTimeout(minhaFuncao, 4000);

No exemplo acima, a função minhaFuncao será executada após 4 segundos.

1
  • Muito Obrigado Phelipe, já funcionou. 18/01/2018 às 16:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .