Am facut si eu un Joc (JavaScript) -V2

Zilele astea mi-a venit ideea sa mai fac un joculeț doar din interes “sportiv”, a trecut ceva timp (~ 4 ani) de la primul 🙂 De multe ori, jucând jocurile de memorie, ma gindeam de aș putea face și eu așa ceva. Puțină logica + câteva minute din timpul liber și uite ce mi-a ieșit
(Dacă vi-i interesant tutorialul – scroll mai jos)

Tutorial

1. pregătim html-ul: un simplu div înăuntrul căruia vor fi patratelele noastre + tag-urile pentru style și jquery

<style>
#gameDiv{
	width:400px;
	height:400px;
	border:1px solid #ccc;
	margin:auto;
}
</style>

<div id="gameDiv"></div>

<script src="https://code.jquery.com/jquery-2.2.2.min.js" ></script>

mulți pot critica, de ce css-ul, JavaScript-ul și Html-ul sunt la un loc, într-un singur fișier?!… simplu, pentru a avea codul mai citabil, doar scopul joculu nu e însuși jocul ci tutorialul
2. primul rând de cod JavaScript 

<script>
	
	var joc = { 
              
             render : function(){}

        }.render();

</script>

acest cod spune ca vom avea un obiect numit joc care va conține funcția render , iar ultimul rând  …}.render();  înseamnă ca îndată ce va fi încăract codul în memorie, automat va fi rulată funcția render , adică când deschidem pagina – vom vedea jocul pe ecran

 

3. parametrii de configurare – vom avea cel puțin 3 parametri de configurare a jocului:
– dimensiunea (numărul de pătrate interioare intr-un rând sau coloană, initial 4×4)
– culorile posibile
– id-ul div-ului principal, in cazul nostru #gameDiv

var joc = { 

	dimensiune : 4,
	culoriPosibile : [
		'red','green', 'blue','brown', 'coral', '#FF1493', '#FFD700', 
		'#ADFF2F', '#FF00FF','#2c3e50', '#2980b9', '#8e44ad', '#bdc3c7' 
	],
	div : '#gameDiv',

	render : function(){}

}.render();

4. incepem cu funcția render

mai înâi de toate, vom inițializa varibilele
i, j, v pentru ciclurile for,
allArr – masivul unde vom stoca cooronatele i j ,
randomColor – culoarea aleatoare care o să i-o dăm div-urilor interioare,
$elDiv – elementul Jquery al div-ului nostru,
inDivWidth – dimensiunea pătrățelelor interioare, vor fi egale cu dimensiunea div-ului general / numarul de patrate interioare, din dimensiunea div-lui general mai scadem si cite 2px pentru fiecare div interior pentru border, în cazul inițial va fi 4*2 = 8px (this.dimensiune * 2)

var i, j, v, allArr=[], randomColor, usedColors = [],
$elDiv = $(this.div),
inDivWidth = ($elDiv.width() - this.dimensiune * 2 ) / this.dimensiune;

pentru a umple div-ul principal cu div-uri mici, parcurgem 2 cicluri for (1 – pentru rând, 2 – pentru colane, la fel cum parcurgem o matrice)

for(i=0; i&lt;this.dimensiune; i++){
    for(j=0; j&lt;this.dimensiune; j++){
       $elDiv.append('<div class="inDiv" style="width: '+inDivWidth+'px; height: '+inDivWidth+'px;"></div>
'); 
		allArr.push([i,j]); 
	} 
}

ne trebuie și o funcție care ne va returna o culoare aleatoare din cele posibile

var getRandomColor = function(culoriPosibile){
    return culoriPosibile[ Math.floor( Math.random() * culoriPosibile.length ) ];
};

Ok, acum n-avem decât sa dam fiecărui div interior culoarea aleatore, mai mult de atât, nu fiecărui div ci trebuie sa alegem cite 2 div-uri, pentru ca fiecare culoare din joc, trebuie să aibă perechea sa, deci vom parcurge toate div-urile intr-un ciclu for, și dat fiind ca ne trebuie perechile de div-uri, vom parcurge for-ul in jumate cât numarul div-urilor, adică dimensiune * dimensiune / 2, exemplu, pentru 4 vom parcurge de 8 ori (4*4/2). Div-urile nu le vom colora imediat ci culorile le vom adăuga ca atribut data-color

for(v=0; v< (this.dimensiune * this.dimensiune / 2); v++){
	// alegem culoarea aleator
	randomColor = getRandomColor(this.culoriPosibile);
	if ($.inArray(randomColor, usedColors) > -1 ){
                //din caz ca am folosit culoare, alegem alta
		randomColor = getRandomColor(this.culoriPosibile);
	}
	usedColors.push(randomColor);
	
        //primul element aleator din matrice
	randomEl1 = allArr[ Math.floor( Math.random() * allArr.length ) ];
	//stergem elemntul dim matrice
        allArr = $.grep(allArr, function(element){
		return element != randomEl1;
	});
	//al 2-lea element din matrice
	randomEl2 = allArr[ Math.floor( Math.random() * allArr.length ) ];
	//stergem al 2-lea element din matrice
        allArr = $.grep(allArr, function(element){
		return element != randomEl2;
	});
	//adaugam attributele data-color
	$('.inDiv[i="'+randomEl1[0]+'"][j="'+randomEl1[1]+'"]').attr('data-color',randomColor);
	$('.inDiv[i="'+randomEl2[0]+'"][j="'+randomEl2[1]+'"]').attr('data-color',randomColor);
}

Pentru download – GitHub sau http://vartan.md/examples/jocMemorie/index.html
to be continued 🙂