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


Obiectivul meu este să realizez o webaplicaţie HTML care să poată fi folosită pentru a juca spânzurătoarea, dar adaptând tema originală, care, să recunoaştem, este cam macabră. Şi m-am gândit să încerc să lucrez mai structurat, ilustrând etapă cu etapă, cu speranţa că cei care vor urmări drumul vor prinde curaj să folosească jQuery. Voi căuta paşii să nu fie uriaşi, dar nici prea mici, ca să nu plictisim. De aceea în acest moment avem un obiectiv redus, dar funcţional: să avem cuvântul ascuns şi literele alfabetului, şi dând click pe respectivele litere să ghicim cuvântul (la final vedem live).

Precizare: eu lucrez sub Chrome (versiunea 20) şi de curiozitate am verificat şi merge în Firefox (v. 11) şi Internet Explorer (v. 9). Ar trebui să meargă cam în orice navigator modern. Şi vom începe cu pagina HTML unde vedeţi că lucrurile sunt simple: două DIV-uri (şi separarea între ele). Mă folosesc de jQuery, de jQuery UI pentru elemente mai arătoase (butoane şi apoi şi altele), precum şi de un plugin jQuery Flip, ca să fie mai interesantă întoarcerea pieselor. Desigur, am şi CSS-ul de la jQuery UI, dar şi un CSS propriu.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<link type="text/css" href="css/custom-theme/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
	<link type="text/css" href="css/stil.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
	<script type="text/javascript" src="js/jquery.flip.min.js"></script>
	<script type="text/javascript" src="js/cod.js"></script>
</head>
<body>
<div id="cuvant"></div>
<div class="clear"></div>
<div id="alfabet"></div>
</body>
</html>

Partea CSS e tot banală. Şi da, nu e perfectă, adică nu e scrisă pentru toate navigatoarele. E un schelet pe care se poate construi.

body{
	font-size: 15px;
	font-family: Cambria;
}
.litera {
	display: inline-block;
	width: 40px;
	height: 40px;
	font-weight: bold;
	background:#d7ebf9;
	text-align: center;
	font-size: 24px;
	padding: 12px 0px 0px 0px;
	margin: 0px 10px 0px 0px;
	border: 2px solid #395a73;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
#cuvant,#alfabet{
	text-align: center;
	width: 100%;
	width: 100%;
}

Evident, partea grea este cea JavaScript. Dar, în acest moment, nici aceea nu e grea. Voi încerca să explic pe scurt. În primul rând, când pagina e încărcată, în div-ul cuvant punem cuvântul, evident nu ca să poată fi citit (apelăm funcţia cuvant(), pe care o explicăm imediat); apoi în div-ul alfabet punem alfabetul, ca butoane (apelăm funcţia alfabet(), pe care o explicăm imediat). Aceste butoane trebuie să facă ceva, nu? Când primesc evenimentul click, aflăm în primul rând ce buton-literă a fost apăsat; apoi parcurgem literele cuvântului de ghicit, şi dacă litera de ghicit e cea apăsată, atunci facem flip, adică rotim div-ul cu semnul întrebării, punând acum ca şi conţinut tocmai litera ghicită. Ah, să nu uit: la final acel buton îl dezactivăm, ca să nu mai poată fi apăsat.

Acum funcţia cuvant(): spargem cuvântul în litere şi pentru fiecare facem un div care are id-ul litera3 de exemplu pentru a 4-a literă. Similar la funcţia alfabet(): spargem alfabetul în litere, doar că pentru fiecare literă afişăm un buton cu litera respectivă. Testul cu i==14 este ca să afişăm literele alfabetului pe două rânduri. Atât!

$(document).ready(function(){ 
	$("#cuvant").html(cuvant());
	$("#alfabet").html(alfabet());
	$('button').click(function(){
		clickpe=$(this).text();
		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
				})
			}
		$(this).button("disable");
	});
	$("button").button();
});

function alfabet(){
	text="";
	alfabet="AĂÂBCDEFGHIÎJKLMNOPQRSŞTŢUVWXYZ";
	literealfabet=alfabet.split('');
	for(i=0;i<literealfabet.length;i++){
		text+="<small><button>"+literealfabet[i]+"</button></small>";
		if(i==14)
			text+="<br>";
	}
	return text;
}

function cuvant(){
	text="";
	cuvant="HABARNAM";
	litere=cuvant.split('');
	for(i=0;i<litere.length;i++)
		text+="<div class='litera' id='litera"+i+"'>?</div>";
	return text;
}

De observat că putem juca spânzurătoarea dar multe lucruri nu sunt făcute. Nu poate fi cuvânt cu cratimă, nu pot fi expresii (deci cuvinte despărţite de spaţii), nu există notificare când ai terminat (desigur, vezi), nici constrângere dacă ai încercat de prea multe ori. Dar… merge. E primul pas. Puteţi vedea mai jos, sau dacă vreţi în pagină nouă mergeţi aici. Într-o altă etapă vom îmbunătăţi jocul.


Apreciază articolul:

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

4 comentarii

  1. jürgen.toth spune:

    Fain, abia aştept continuarea!

  2. Mi-ai adus aminte de primul meu proiect in care am aplicat integrarea cu Facebook. :)
    http://apps.facebook.com/hangmanog/
    Am folosit google fonts, daca stiam atunci de jquery flip il implementam. :)

  3. mein spune:

    Salut,
    Pot folosi scriptul pe un site de-al meu?

  4. radu.capan spune:

    Da. Mentionand in sursa codului, ca si comentariu, http://www.cnet.ro. Dar varianta din acest articol nu e cea finala. Ma rog, e un inceput, dus in alte articole pe alte culmi.


Lasă un răspuns

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