HTML/index.html at master · mkssantos/HTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
	<title>Jogo da Memória</title>
	<link rel="stylesheet" type="text/css" href="../css/css.css">
</head>
<body style="background-color:black">
	<h1 id="titulo">Jogo da Memória</h1>
<p id="p"></p>
<div id="tabela01" align="center">
	<table border="4" id="borda">
		<tr>
			<td><h2>Placar</h2></td>
		</tr>
		<tr><td>Acertos: </td>
			<td> <h4 id="a"></h4></td>
		</tr>
		<tr><td>Erros:</td>
			<td><h4 id="e"></h4></td>
		</tr>
	</table>
</div>
<script type="text/javascript">
	var escolha = 0
	var acertos = 0
	var erros = 0

function contarAcertos(msg){
		if(msg == 'Acertou'){
			acertos++;
			document.getElementById("a").innerHTML = acertos
		} else {
			erros++;
			document.getElementById("e").innerHTML = erros
		}
	}
	function clicar(e){
		e.src = "../img/" + e.id + ".jpg"
		setTimeout(jogo, 50)

		function jogo(){
			if(escolha == 0){
				escolha = Number(e.id)
			} else {
				if(escolha > Number(e.id) && (escolha%2 == 0)){
					if(Number(e.id) == (escolha - 1)){
						contarAcertos('Acertou')
						document.getElementById(escolha).onclick=''
						document.getElementById(e.id).onclick=''
						alert('Parabéns!')
					} else {
						contarAcertos('Errou!')
						document.getElementById(escolha).src = "../img/frente.jpg"
						document.getElementById(e.id).src = "../img/frente.jpg"
						alert('Tente Novamente!')
					}
					escolha = 0
				} else if((escolha < Number(e.id)) && (escolha%2 != 0)) {
					if((escolha + 1) == Number(e.id)){
						contarAcertos('Acertou')
						document.getElementById(escolha).onclick=''
						document.getElementById(e.id).onclick=''
						alert('Parabéns!')
					} else {
						contarAcertos('Errou!')
						document.getElementById(escolha).src = "../img/frente.jpg"
						document.getElementById(e.id).src = "../img/frente.jpg"
						alert('Tente Novamente!')
					}
					escolha = 0
				} else {
					contarAcertos('Errou!')
					document.getElementById(escolha).src = "../img/frente.jpg"
					document.getElementById(e.id).src = "../img/frente.jpg"
					alert('Tente Novamente!')
					escolha = 0
				}
				if (acertos==12)
				{
					alert('Jogo Finalizado')
				}

			}
		}
	}
	function numerosAleatorios(){
		var tabela = '<table><tr>',sorteio = []
		while(sorteio.length < 24){
			var aleatorio = Math.floor(Math.random() * 24);
			if(sorteio.indexOf(aleatorio) == -1){
				sorteio.push(aleatorio);
			}
		}
		for(var i = 0; i < sorteio.length; i++){
	tabela += '<td><img onclick="clicar(this)" id="'+ (sorteio[i] + 1) +'" src="../img/frente.jpg"></td>'

			if((i+1)%6 == 0){
				tabela += "</tr><tr>"
			}
		}
		tabela += "</table>"
		document.getElementById('container').innerHTML = tabela
		document.getElementById('a').innerHTML=0
		document.getElementById('e').innerHTML=0
		acertos = 0
	 	erros = 0
	}
</script>
<div id='container' align="center"></div>
<div id="a01" align="center" style="display: block;">
<button onclick="numerosAleatorios()" id="a01" class="botao01">Começar o Jogo / Reset</button>
</div>
</body>
</html>