Jogo de quebra-cabeça desenvolvido com JavaScript

[ads2]
Olá pessoal, fiz um joguinho simples usando HTML, JavaScript e a biblioteca jQuery. Não precisei nem de criar um motor de jogo, fiz apenas com laços de repetição for e com desvios condicionais if.

Teste o jogo | Baixe os arquivos

Você provavelmente deve lembrar daqueles quebra cabeças de letras e números, onde você tinha que mover as peças para que elas ficassem em sequencia. Algo parecido com o da imagem abaixo, porém o que desenvolvi tem apenas 9 espaços. Para começar eu criei um vetor com tamanho igual a 9, para guardar os números de 0 a 8, sendo que cada espaço do vetor corresponde a um espaço do quebra-cabeças. Depois criei um método inicio que guarda os valores de 0 a 8 no vetor, sendo que zero corresponde ao espaço em branco, para que quando o usuário abra a página do jogo ele esteja com os números posicionados nos lugares certos. A função destribui é usada para mostrar os botões na tela de acordo com as posições do vetor, ela é chamada sempre que alguma posição do vetor é mudada, para que haja a movimentação das peças. A função randomiza, serve para distribuir os números no vetor de forma aleatória, ou seja, para misturar as peças para que o jogo possa se iniciar, ela é chamada quando o usuário clica no botão Iniciar. Para que esta função seja funcional ela não pode guardar números repetidos no vetor, então eu usei das funções Math.random e Math.floor, nativas do JavaScript. A primeira nós usamos para pegar um número aleatório, onde eu posso determinar o espaço numérico de onde será pego o número, porém esta função devolve um número fracionado, por isso precisamos da segunda função que pega apenas o inteiro do resultado. Depois eu tenho que verificar se no vetor já existe um resultado igual ao que foi obtido aleatoriamente, se houver eu não posso guarda-lo no vetor e devo tentar outra vez, até que todo o vetor seja preenchido sem resultados ambíguos. Então vem a função logica, que como o nome diz trata-se da lógica do jogo, que é bem simples, mas extensa. O que fiz foi usar do evento clique de cada botão, por exemplo: se o usuário clicar no botão que está na posição zero, que é o superior esquerdo, eu devo testar se o espaço 1 do vetor, que corresponde ao botão da direita está igual a 0, se estiver eu faço a troca de valores e chamo o método destribui. Da mesma forma deve ser feita com os outros botões que são vizinhos do botão clicado de forma horizontal ou vertical, caso não haja nenhum que esteja igual a 0, ou seja em branco, nada acontece. Isso deve ser feito com todos os nove botões, por isso esta função é extensa. Por fim, a função testafim, que como o nome diz, o que ela faz é testar se o jogo já chegou ao fim, ou seja, se o jogador já conseguiu ordenar os números de 1 a 8 com o último espaço vazio. Para isso é necessário percorrer o vetor vendo se os itens estão ordenados. Veja todo o código abaixo:

index.html

Iniciar

estilo.css

body {
	margin: 0;
}
#puzzle{
	width: 300px;
	height: 300px;
	border: 1px solid black;
}
.pecas{
	width: 98px;
	height: 68px;
	background: url(puzzle.fw.png) no-repeat;
	float: left;
	text-align: center;
	font-size: 28px;
	padding-top: 30px;
}
.pecasNOT{
	width: 98px;
	height: 98px;
	float: left;
}

[ads2]

puzzle.js

/**
 * @author Jayr
 */
var num = new Array(9); //criando vetor global
$(document).ready(function(){ //quando a página estiver pronta
	inicial() //chamando função inicial
	logica() //chamando a lógica do jogo
	$('#zerar').click(function(){ //ao clicar no botão Iniciar
		randomiza(); //chama função que destribui os números aleatoriamente
		$(this).html('Recomeçar') //altera botao Iniciar para Recomeçar
	})
})
function inicial(){ //função inicial
	for(var q=0;q<num.length;q++){ //laço para percorrer o vetor
		num[q]=q+1;				//atribui os númetos às posições do vetor
	}
	num[8]=0; //atribui 0 a ultima posição
	destribui(); //chama a função destribui
}
function randomiza(){ //função de preenchimento aleatório
	for(var i=0;i<9;i++){ //laço para percorrer todo o vetor
		var randomico = Math.floor(Math.random()*9)+0; //gerando número aleatório
		var existe=false; //para saver se o numero existe ou não no vetor
		for(var cont=0;cont<i;cont++){ //função que percorre o vetor até onde já tenha sido preenchido
			if(num[cont]==randomico){ //verifica se o item no vetor é igual ao gerado 
				existe=true; //se é igual a variavel existe recebe verdadeiro
				break; //e o laço de verificação é interrompido
			}else{//se não é igual
				existe=false; //existe recebe falso
			}
		} //fim do laço que verifica a existencia
		if(!existe){ //se existe é igual a false
			num[i]=randomico; //o indice do vetor recebe o número gerado
		}else{ //se é verdadeiro
			i--; //o indice é decrementado para que haja um novo teste
		}
	} // fim do laço que percorre todo o vetor
	destribui(); //chama função destribui
}			
function destribui(){ //função destribui
	$('.tudo').remove(); //remove os itens já existentes no html
	for(var i=0;i<num.length;i++){ //laço para percorrer o vetor
		if(num[i]==0){ //se é igual a zero
			$('#puzzle').append('

');
		}else{ 
			$('#puzzle').append('

');
		}
	}
	logica();
}
function logica(){ //função lógia
	$('#peca0').click(function(){
		if(num[1]==0){
			num[1]=num[0];
			num[0]=0;
		}else if(num[3]==0){
			num[3]=num[0];
			num[0]=0;
		}
		destribui();
	})
	$('#peca1').click(function(){
		if(num[0]==0){
			num[0]=num[1];
			num[1]=0;
		}else if(num[2]==0){
			num[2]=num[1];
			num[1]=0;
		}else if(num[4]==0){
			num[4]=num[1];
			num[1]=0;
		}
		destribui();
	})
	$('#peca2').click(function(){
		if(num[1]==0){
			num[1]=num[2];
			num[2]=0;
		}else if(num[5]==0){
			num[5]=num[2];
			num[2]=0;
		}
		destribui();
	})
	$('#peca3').click(function(){
		if(num[0]==0){
			num[0]=num[3];
			num[3]=0;
		}else if(num[4]==0){
			num[4]=num[3];
			num[3]=0;
		}else if(num[6]==0){
			num[6]=num[3];
			num[3]=0;
		}
		destribui();
	})
	$('#peca4').click(function(){
		if(num[1]==0){
			num[1]=num[4];
			num[4]=0;
		}else if(num[3]==0){
			num[3]=num[4];
			num[4]=0;
		}else if(num[5]==0){
			num[5]=num[4];
			num[4]=0;
		}else if(num[7]==0){
			num[7]=num[4];
			num[4]=0;
		}
		destribui();
	})
	$('#peca5').click(function(){
		if(num[2]==0){
			num[2]=num[5];
			num[5]=0;
		}else if(num[4]==0){
			num[4]=num[5];
			num[5]=0;
		}else if(num[8]==0){
			num[8]=num[5];
			num[5]=0;
		}
		destribui();
	})
	$('#peca6').click(function(){
		if(num[3]==0){
			num[3]=num[6];
			num[6]=0;
		}else if(num[7]==0){
			num[7]=num[6];
			num[6]=0;
		}
		destribui();
	})
	$('#peca7').click(function(){
		if(num[4]==0){
			num[4]=num[7];
			num[7]=0;
		}else if(num[6]==0){
			num[6]=num[7];
			num[7]=0;
		}else if(num[8]==0){
			num[8]=num[7];
			num[7]=0;
		}
		destribui();
	})
	$('#peca8').click(function(){
		if(num[5]==0){
			num[5]=num[8];
			num[8]=0;
		}else if(num[7]==0){
			num[7]=num[8];
			num[8]=0;
		}
		destribui();
	})
	$('.pecas').click(function(){
		testafim();
	})
}
function testafim(){
	for(var a=0;a<num.length;a++){
		if(a<8){
			if((a+1)!=num[a]){
				break;
			}
		}
		if(a==8){
			alert('Você ganhou!')
		}
	}
}

[ads1]