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


E momentul să ne despărţim de ideea de spânzurătoare. Pentru că ambientul pentru care scriu această mică webaplicaţie e religios, mă voi folosi de Iona şi de balenă (da, da, episodul acela pe care toţi îl iau ad litteram, desfiinţând Biblia). Renunţăm la bara de progres şi la ferestrele folosite în episodul anterior pentru ca acum să folosim două pluginuri jQuery care s-ar putea să vă prindă bine şi în alte proiecte. Mai întâi bgStretcher, cel care ne permite să folosim o imagine ca fundal de pagină, “întinzând-o” cât e nevoie ca să acopere complet partea vizibilă a paginii.

imagine

Al doilea plugin e destul de nou: jqFloat. Acesta permite să dai unor imagini impresia de plutire. În timp ce autorul le foloseşte pentru a simula plutirea unor nori, eu îl folosesc pentru a-l face pe Iona, precum şi balena (redesenate de mine vectorial după un desen găsit pe net), să pară că plutesc, neregulat, sub apă. E foarte simplu!!! Şi autorul a fost atât de amabil să îmi explice cum pot muta un obiect ce pluteşte şi să îşi păstreze efectul de plutire (trebuie lucrat animat obiectul părinte). OK. Deci acestea sunt cele două pluginuri jQuery implicate suplimentar în proiect.

Cât priveşte jocul în sine, am mai făcut o schimbare: acum putem indica o listă de cuvinte, e amestecată aleator şi luat primul. Evident, fiecare încărcare de pagină ne va aduce un cuvânt surpriză din cele indicate. După ce am terminat jocul am şi pus un buton de reîncărcare a paginii. Soluţia nu e perfectă din două perspective: 1) presupune reîncărcarea paginii, ceea ce nu e elegant; 2) la reîncărcare poate să îţi vină exact acelaşi cuvânt (şansa creşte cu cât lista de cuvinte e mai scurtă). Dar minusurile încercăm să le rezolvăm în următorul episod. Acum vă las cu codul (doar JavaScript, deşi evident s-au schimbat şi altele, CSS, HTML…), iar cei nerăbdători pot să vadă aici pagina… adică pot să se joace! :)

$(document).ready(function(){
	//pentru fundalul paginii
	$('BODY').bgStretcher({
		images: ['img/fundal-difuz.jpg'], imageWidth: 1697, imageHeight: 1035
	});
	//Iona şi balena vor începe să se mişte haotic
	$('.iona').jqFloat({ width: 15, height: 30,speed: 500});
	$('.balena').jqFloat({ width: 10, height: 10,speed: 500});
	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
	$('.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: "#ec570d",
					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){
			$('.iona').parent().animate({ 'left' : "+="+(680/nrincercari)+"px" }, 100);
			//scădem numărul de încercări posibile, şi dacă e 0 am pierdut
			incercari--;
			if(incercari==1)
				$(".reactie").html('Hopa! Dacă mai greşiţi, vă înghite balena!');
			else if(incercari==2)
				$(".reactie").html('Hopa! Mai puteţi greşi doar o singură dată.');
			else
				$(".reactie").html('Hopa! Mai puteţi greşi de '+(incercari-1)+' ori.');
			if(incercari==0){
				//am pierdut... balena dispare şi furnizăm cuvântul neghicit
				$('.iona').css({ 'opacity' : 0 });
				$('.balena').css("background-image", "url(img/balena2.png)");
				$(".reactie").html('Uffff... Ar fi trebuit să ghiciţi "'+cuvant+'".');
				finalizare();
			}
		}
		if(!degasit){
			//dacă nu mai sunt litere de găsit, am câştigat
			$('.balena').css({ 'opacity' : 0, 'speed': 'slow' });
			$(".reactie").html("Excelent! Aţi ghicit!");
			finalizare();
		}
	});
	$("button").button();
	$("#surplus").button("disable");
});

function initGeneral(){
	//iniţializări
	alfabet="AĂÂBCDEFGHIÎJKLMNOPQRSŞTŢUVWXYZ";
	cuvinte=new Array("Papagal","Ornitorinc","Girafă","Ciocănitoare","Hipopotam","Antilopă","Dromader","Urs polar","Vulpea polară","Cocoş de munte","Ciocârlie","Tigru bengalez","Maimuţă","Delfin","Bufniţă","Şoarece","Elefant","Panteră","Leopard","Pelican","Castor","Zimbru","Barză","Acvilă","Egretă","Mierlă","Potârniche","Liliac","Colibri","Prepeliţă","Viperă","Şopârlă","Căprioară","Fazan","Struţ","Balenă","Furnică","Albină","Bondar");
	shuffle = function(v){
		for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
		return v;
	};
	//"ameţim" cuvintele, pentru ca să fie luat unul aleator
	cuvinte=shuffle(cuvinte);
	cuvant=cuvinte[0];
	cuvant=cuvant.toUpperCase()
	nrincercari=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==15)
			text+="<br>";
	}
	text+="<button class='butonlitera' id='surplus'>&nbsp;</button>";
	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(){
    //dacă e finalul jocului înseamnă că dezactivăm butoanele
    for(i=0;i<literealfabet.length;i++)
        $("#alfabet"+i).trigger('mouseout').button("disable");
	//de asemenea sub literele alfabetului punem un buton de reîncărcare a paginii
	$(".alfabet").html($(".alfabet").html()+'<br><br><input type="button" value="Vreau alt cuvânt!" onClick="window.location.reload()">');
	$("input").button();
}


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (4 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 *