Proiect jQuery: Spânzurătoarea… altfel (II)


În prima parte am pus temelia pentru un joc tip spânzurătoare. Marele minus atunci era că nu se numărau încercările (puteai să tot încerci până nimereai, fără limite). Din motive pur didactice în acest al doilea episod vom folosi o bară de progres pentru a arăta greşelile, precum şi o fereastră de dialog pentru a comunica rezultatul final, fie că am câştigat, fie că am pierdut.

Am ales să comentez codul. Poate nu sunt comentariile cele mai detaliate, dar pentru cei cu cunoştinţe minime de jQuery şi JavaScript va fi suficient. Ah, aş mai spune că şi în partea HTML şi în cea CSS au apărut mici schimbări, dar se pot vedea studiind sursa. Cele mai importante schimbări au fost însă în partea de JavaScript. Am încadrat toate div-urile într-un div de 700px lăţime, dar mai mult ca să încapă aici. Desigur, se poate opta pentru orice altă valoare. Am schimbat şi parte din tema folosită de jQuery, pentru un contrast mai bun (adică albastru mai închis) cu fundalul alb al paginii.

$(document).ready(function(){
	initGeneral(); //iniţializări diverse
	$(".cuvant").html(initCuvant()); //construim pe punem în div-ul cuvant
	$(".alfabet").html(initAlfabet()); //construim ce punem în div-ul alfabet
	//în div-ul măsurător e bara de progres a jocului
	$(".masurator").progressbar({value: 0,min: 0,max: incercari,step: 1});
	//vom folosi o fereastră de dialog pentru a marca finalul
	$(".rezultat").dialog({
		width: 250,
		height: 170,
		autoOpen: false,
		modal: true,
		buttons: {
				Ok: function(){
					$(this).dialog( "close" );
				}
			}
	});
	$('.butonlitera').click(function(){
		clickpe=$(this).text();
		gasit=false;
		for(i=0;i<litere.length;i++)
			if(litere[i]==clickpe){
				$("#litera"+i).flip({
					direction:'lr',
					content:"<font color=white>"+litere[i]+"</font>",
					color: "#4c7694",
					speed: 150
				});
				//clickul a fost pe o literă bună
				gasit=true;
				//avem mai puţine litere de găsit deci
				degasit--;
			}
		$(this).button("disable");
		if(gasit==false){
			//am găsit o literă bună, deci incrementăm bara de progres
			$(".masurator").progressbar("value",$(".masurator").progressbar("value")+1);
			//scădem numărul de încercări posibile, şi dacă e 0 am pierdut
			incercari--;
			if(incercari==0)
				finalizare("Vai, aţi pierdut! Uffffff!")
		}
		//dacă nu mai sunt litere de găsit, am câştigat
		if(!degasit)
			finalizare("Aţi câştigat! Ieeeee!");
	});
	$("button").button();
});

function initGeneral(){
	//iniţializări
	alfabet="AĂÂBCDEFGHIÎJKLMNOPQRSŞTŢUVWXYZ";
	cuvant="M-am fript";
	cuvant=cuvant.toUpperCase()
	incercari=7;
	degasit=0;
}

function initAlfabet(){
	//construim ce vom pune în div-ul alfabet
	text="";
	literealfabet=alfabet.split('');
	for(i=0;i<literealfabet.length;i++){
		text+="<button class='butonlitera' id='alfabet"+i+"'>"+literealfabet[i]+"</button>";
		if(i==14)
			text+="<br>";
	}
	return text;
}

function initCuvant(){
	//construim ce vom pune în div-ul cuvant
	text="";
	litere=cuvant.split('');
	for(i=0;i<litere.length;i++){
		if(litere[i]==" ")
			//dacă e spaţiu afişăm o căsuţă goală
			text+="<span class='literagoala' id='litera"+i+"'>&nbsp;</span>"
		else if(alfabet.indexOf(litere[i])==-1)
			//dacă nu e spaţiu, dar nici literă, o fi semn de punctuaţie sau cratimă
			text+="<span class='litera' id='litera"+i+"'>"+litere[i]+"</span>"
		else {
			//e clar, e literă, afişăm ca ? până se ghiceşte
			text+="<div class='litera' id='litera"+i+"'>?</div>";
			degasit+=1
		}
	}
	return text;
}

function finalizare(text){
	//dacă e finalul jocului înseamnă că dezactivăm butoanele
	for(i=0;i<literealfabet.length;i++)
		$("#alfabet"+i).trigger('mouseout').button("disable");
	//şi afişăm un text, de bine sau de rău după cum vine parametrul
	$(".rezultat").html(text);
	$(".rezultat").dialog("open");
}

Rezultatul final se poate vedea mai jos sau în pagină nouă dând click aici. După cum vedeţi, nu am stat să pigulesc în partea de design şi combinaţia de culori nu e prea reuşită. Dar reţineţi scopul didactic: exemplu anterior completat ca funcţionalitate folosind o bară de progres şi ferestre de dialog. Minusuri la această etapă? De exemplu dacă ce puneţi la ghicit e foarte lung, poate să se împartă neaşteptat pe două rânduri (adică în mijlocul cuvântului). În plus, ar spune unii, lipseşte spânzurătoarea efectivă. Ei bine, vom încerca să o înlocuim cu altceva într-un material următor.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *