Tutorial joguinho de encontrar

Joguinho para windows

Esse jogo é um arquivo hta
Esse tipo de arquivo é executável mas o código-fonte pode ser acessado em um editor.

HTML e executável ao mesmo tempo.

Imagens

As imagens do jogo foram originalmente disponibilizadas pelo site kenney.nl

Baixe as 13 imagens que são misturadas para gerar os rostos no jogo.
É preciso extrair os arquivos.

Arquivo principal

Essa é a base do arquivo chamado shuffle faces.hta

<hta:application border="thin" maximizebutton="no" minimizebutton="no" scroll="no">
<html>
<title>Shuffle Faces</title>
<meta name="viewport" content="width=device-width">
<style>
body {
	background-color: #727272;
	margin-top: 16px;
	text-align: center;
}
</style>
<body onkeydown="placar(event.keyCode);"></body>
<script>
window.resizeTo(626, 444);
</script>
</html>

O código css

O layout do body é simples.

O jogo exibe 4 div
São pequenas e são position:absolute
E são display:inline
Elas exibem pequenas letras.

As span são as expressions.
O background delas exibe as formas e as cores.
Por cima delas (com z-index) vão as faces.

#pontos e #tempo são divs 'display:inline' 'position:absolute'.

body {
	background-color: #727272;
	margin-top: 16px;
	text-align: center;
}

div {
	display: inline;
	background-color: #444444;
	color: #ffffff;
	width: 38px;
	padding: 8px 0px;
	font-family: Impact;
	position: absolute;
	text-transform: uppercase;
}

span {
	width: 160px;
	height: 160px;
	background-image: url('images/shapes.png');
}

#pontos {
	top: 14px;
	right: 14px;
}

#tempo {
	top: 14px;
	left: 14px;
}

A função render()

Esse código primeiro sorteia uma letra para cada uma das tres expressões que são exibidas.

Depois sorteia uma expressão aleatória.

Depois uma grande string (contentendo a tela do jogo) é atribuída ao innerHTML do <body>

function render() {
	letras = [];

	letras[0] = parseInt(Math.random() * expression.length);
	do {
		letras[1] = parseInt(Math.random() * expression.length);
	} while (letras[0] == letras[1]);
	do {
		letras[2] = parseInt(Math.random() * expression.length);
	} while (letras[0] == letras[2] || letras[1] == letras[2]);

	rc = randomColor(1);
	rs = randomShape(1);
	re = randomExpression(1);

	face = "<span style=\""+rs+ " " + rc+"\"><img src='images/"+re+"' " + randomMargins() + "></span>";

	document.body.innerHTML = "<div id=tempo></div><div id=pontos>"+score+"</div>" + face + "<br><br><br> &nbsp; &nbsp; &nbsp; ";

	randomFace = parseInt(Math.random() * 3);

	for(v = 0; v < 3; v++) {
		if(v == randomFace)
			document.body.innerHTML += "<span style=\""+rs + " " + rc+"\"><div>"+expression[letras[v]]+"</div><img src='images/"+re+"' " + randomMargins() + "></span> &nbsp; &nbsp; &nbsp; ";
		else
			document.body.innerHTML += "<span style=\""+randomShape(0) + " " + randomColor(0)+"\"><div>"+expression[letras[v]]+"</div><img src='images/"+randomExpression(0)+"' " + randomMargins() + "></span> &nbsp; &nbsp; &nbsp; ";
	}
}

Essa função gera faces aleatórias e atribui letras aleatórias a essas faces.

A função cronometro()

Essa função atualiza o cronômetro no topo da tela do jogo.

function cronometro() {
	document.getElementById('tempo').innerHTML = ((tempo--) / 10).toFixed(1);

	if(tempo > -1)
		setTimeout("cronometro();", 100);
	else {
		document.body.innerHTML = "<div id=tempo>18.0</div><div id=pontos>"+score+"</div>" + face + "<br><br><br> &nbsp; &nbsp; &nbsp; ";
		for(v = 0; v < 3; v++) {
			document.body.innerHTML += "<span style=\""+randomShape(0) + " " + randomColor(0)+"\"><div>F5</div><img src='images/"+randomExpression(0)+"' " + randomMargins() + "></span> &nbsp; &nbsp; &nbsp; ";
		}
	}
}

Quando o tempo acaba essa função exibe a tela para que o jogador reinicie o jogo.

A função placar()

Essa função identifica a tecla que o user pressionou e atualiza o placar e o cronômetro.

function placar(k) {
	if(tempo > -1) {
		if((randomFace == 0 && k == 65 + letras[0]) || (randomFace == 1 && k == 65 + letras[1]) || (randomFace == 2 && k == 65 + letras[2])) {
			score++;
			if(score %5 == 0)
				tempo += 30;
		}
		render();
	}
}

O Código Completo

<hta:application border="thin" maximizebutton="no" minimizebutton="no" scroll="no">
<html>
<title>Shuffle Faces</title>
<meta name="viewport" content="width=device-width">
<style>
body {
	background-color: #727272;
	margin-top: 16px;
	text-align: center;
}

div {
	display: inline;
	background-color: #444444;
	color: #ffffff;
	width: 38px;
	padding: 8px 0px;
	font-family: Impact;
	position: absolute;
	text-transform: uppercase;
}

span {
	width: 160px;
	height: 160px;
	background-image: url('images/shapes.png');
}

#pontos {
	top: 14px;
	right: 14px;
}

#tempo {
	top: 14px;
	left: 14px;
}
</style>

<body onkeydown="placar(event.keyCode);"></body>

<script>
window.resizeTo(626, 444);

expression = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "x", "w", "y", "z"];

function randomColor(s) {
	if(s)
		return "background-position-y:" + (160 * parseInt(Math.random() * 6)) + "px;";
	else do {
		x = "background-position-y:" + (160 * parseInt(Math.random() * 6)) + "px;";
	} while (x == rc);
	return x;
}

function randomShape(s) {
	if(s)
		return "background-position-x:" + (160 * parseInt(Math.random() * 4)) + "px;";
	else do {
		x = "background-position-x:" + (160 * parseInt(Math.random() * 4)) + "px;";
	} while (x == rs);
	return x;
}

function randomExpression(s) {
	if(s)
		return expression[parseInt(Math.random() * 12)] + ".png";
	else do {
		x = expression[parseInt(Math.random() * 12)] + ".png";
	} while (x == re);
	return x;
}

function randomMarginTop() {
	return "margin-top:" + (16 + (parseInt(Math.random() * 5) * 14)) + "px;";
}
function randomMarginLeft() {
	return "margin-left:" + (-3 + (parseInt(Math.random() * 6) * 9)) + "px;'";
}
function randomMargins() {
	return "style='"+randomMarginTop()+" "+randomMarginLeft()+"'";
}

function render() {
	letras = [];

	letras[0] = parseInt(Math.random() * expression.length);
	do {
		letras[1] = parseInt(Math.random() * expression.length);
	} while (letras[0] == letras[1]);
	do {
		letras[2] = parseInt(Math.random() * expression.length);
	} while (letras[0] == letras[2] || letras[1] == letras[2]);

	rc = randomColor(1);
	rs = randomShape(1);
	re = randomExpression(1);

	face = "<span style=\""+rs+ " " + rc+"\"><img src='images/"+re+"' " + randomMargins() + "></span>";

	document.body.innerHTML = "<div id=tempo></div><div id=pontos>"+score+"</div>" + face + "<br><br><br> &nbsp; &nbsp; &nbsp; ";

	randomFace = parseInt(Math.random() * 3);

	for(v = 0; v < 3; v++) {
		if(v == randomFace)
			document.body.innerHTML += "<span style=\""+rs + " " + rc+"\"><div>"+expression[letras[v]]+"</div><img src='images/"+re+"' " + randomMargins() + "></span> &nbsp; &nbsp; &nbsp; ";
		else
			document.body.innerHTML += "<span style=\""+randomShape(0) + " " + randomColor(0)+"\"><div>"+expression[letras[v]]+"</div><img src='images/"+randomExpression(0)+"' " + randomMargins() + "></span> &nbsp; &nbsp; &nbsp; ";
	}
}

function cronometro() {
	document.getElementById('tempo').innerHTML = ((tempo--) / 10).toFixed(1);

	if(tempo > -1)
		setTimeout("cronometro();", 100);
	else {
		document.body.innerHTML = "<div id=tempo>18.0</div><div id=pontos>"+score+"</div>" + face + "<br><br><br> &nbsp; &nbsp; &nbsp; ";
		for(v = 0; v < 3; v++) {
			document.body.innerHTML += "<span style=\""+randomShape(0) + " " + randomColor(0)+"\"><div>F5</div><img src='images/"+randomExpression(0)+"' " + randomMargins() + "></span> &nbsp; &nbsp; &nbsp; ";
		}
	}
}

function placar(k) {
	if(tempo > -1) {
		if((randomFace == 0 && k == 65 + letras[0]) || (randomFace == 1 && k == 65 + letras[1]) || (randomFace == 2 && k == 65 + letras[2])) {
			score++;
			if(score %5 == 0)
				tempo += 30;
		}
		render();
	}
}

tempo = 180;
score = 0;
render();
cronometro();
</script>
</html>

Jogo Shuffle Faces

Divirta-se com o jogo Shuffle Faces

Tutoriais