Jocul X si 0 utilizand HTML, CSS si JavaScript

In acest tutorial, vom crea clasicul joc X si 0 utilizand HTML, CSS, si JavaScript.

Setarea proiectului:

Mai intai ne vom crea un folder in care vom avea cele 3 fisiere necesare pentru crearea paginii jocului. In folder-ul creat (poate avea orice nume), asigurati-va ca aveti 3 fisiere sub denumirea:

tutorialx0.html
tutorialx0.css
tutorialx0.js

Setarea paginii html:

Vom deschide pagina html (tutorialx0.html) in orice editor de text (notepad++, sublime text, etc), si vom incepe crearea tablei pentru jocul x si 0.

In pagina noastra html, vom aduga legaturile (sau „link”-urile) catre fisierul de stilizare a paginii (tutorialx0.css) si fisierul ce contine logica jocului (tutorialx0.js).

Scheletul paginii html:

<!DOCTYPE html>
<html>
<head>
  <title>X si 0</title>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Adaugarea link-urilor:

<!DOCTYPE html>
<html>
<head>
  <title>X si 0</title>
  <link rel="stylesheet" href="tutorialx0.css"/>
  <script src="tutorialx0.js"></script>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Creeare tabelului X si 0:

Intre tagurile <body></body> vom adauga tabelul jocului nostru. Tabelui va contine 3 linii si 3 coloane, in total 9 celule. Sa ne amintim:

Pentru a crea un element de tip tabel in html, introducem tag-urile: <table></table>
Pentru a crea o linie in interiorul unui table, introducem tag-urile: <tr></tr>.
Pentru a adauga celule in interiorul unei linii, introducem tag-urile <td></td>.

Codul tabelului va arata astfel:

<body>
  <table id="tabel-xo">
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
  </table>
</body>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

Pentru fiecare celula, am adaugat si textul „X”. Acesta ne va ajuta sa stilizam tabelul nostru in faza initiala. Mai tarziu, nu vom mai avea nevoie de text, deoarece vom controla adaugarea de X si O din codul javascript (tutorialx0.js).

A se observa de asemenea ca pentru tagul <table> am adaugat si id-ul „tabel-xo”. Acest lucru ne va ajuta sa identificam si sa stilizam mai usor tableul nostru folosind css (tutorialx0.css).

Daca salvam pagina tutorialx0.html si o deschidem cu un browser (chrome, mozzila firefox...) ne va aparea urmatoarea pagina web.

Stilizarea tabelului.

Acum ca avem tabelul creat, e timpul sa il stilizam. Vom deschide fisierul tutorialx0.css unde vom adauga codul CSS:

#tabel-xo{
  /*Proprietatea "margin" are rolul de a crea spatiu in jurul elementelor,
   In cazul nostru, creeaza un spatiu de 20px deasupra tabelului.*/
  margin-top: 20px;

  /*Proprtietatea margin:auto are rolul de a positiona tabelul nostru in centrul paginii.
    "auto" vina de la faptul ca marginile la stanga si la dreapta se vor ajusta automat.
    Atentie !! "margin: auto" nu afecteaza spatiile deasupra si dedesubptul elementului, ci doar cele de la stanga si dreapta*/
  margin: auto;

  border: 1px solid black; /*Tabelul va avea o bordura de 1px -> un pixel, solid -> linie continua, black -> neagra*/
  border-collapse: collapse; /*Bordurile celulelor tabelului, se vor contopi intr-una singura.*/
}

/* Stilizarea tuturor celulelor tabelului*/
#tabel-xo tr td{
  width: 80px; /*latimea*/
  height: 80px; /*inaltimea*/
  border: 1px solid rgb(56, 53, 53); /*Bordurile celulelor: grosime, tip linie -> continua, culoare in cod rgb*/
  font-family: Helvetica; /*Stilul textului din interiorul celulelor*/
  font-size: 30px; /*Marimea textului*/
  text-align: center; /*Alinierea textului in mijlocul celulelor*/
}

/* selectorul :hover va stiliza ceulele tabelului atunci cand trecem cu mouse-ul peste ceulele tabelului*/
#tabel-xo tr td:hover { 
  background: rgb(236, 236, 236);  
  cursor: pointer; /*Atunci cand trecem cu mouse-ul peste o celula a tabelului, tipul cursorului se va schimba*/
}

#tabel-xo{

/*Proprietatea "margin" are rolul de a crea spatiu in jurul elementelor,

In cazul nostru, creeaza un spatiu de 20px deasupra tabelului.*/

margin-top: 20px;

/*Proprtietatea margin:auto are rolul de a positiona tabelul nostru in centrul paginii.

"auto" vina de la faptul ca marginile la stanga si la dreapta se vor ajusta automat.

Atentie !! "margin: auto" nu afecteaza spatiile deasupra si dedesubptul elementului, ci doar cele de la stanga si dreapta*/

margin: auto;

border: 1px solid black; /*Tabelul va avea o bordura de 1px -> un pixel, solid -> linie continua, black -> neagra*/

border-collapse: collapse; /*Bordurile celulelor tabelului, se vor contopi intr-una singura.*/

}

/* Stilizarea tuturor celulelor tabelului*/

#tabel-xo tr td{

width: 80px; /*latimea*/

height: 80px; /*inaltimea*/

border: 1px solid rgb(56, 53, 53); /*Bordurile celulelor: grosime, tip linie -> continua, culoare in cod rgb*/

font-family: Helvetica; /*Stilul textului din interiorul celulelor*/

font-size: 30px; /*Marimea textului*/

text-align: center; /*Alinierea textului in mijlocul celulelor*/

}

/* selectorul :hover va stiliza ceulele tabelului atunci cand trecem cu mouse-ul peste ceulele tabelului*/

#tabel-xo tr td:hover {

background: rgb(236, 236, 236);

cursor: pointer; /*Atunci cand trecem cu mouse-ul peste o celula a tabelului, tipul cursorului se va schimba*/

}

In codul CSS putem adauga comentarii folosing /* comentariu */. In exemplul de mai sus au fost adaugate comentarii pentru o mai buna intelegere a stilizarii. In codul vostru, puteti sterge toate comentariile.

Dupa ce ati adaugat codul css, salvati fisierul tutorialx0.css si reimprospatati pagina html tutorialx0.html in browser. Tabelul va arata astfel:

Stilizarea prezenta in codul css de mai sus, este una simpla. Inainte de a trece mai departe, un bun excercitiu este sa incercati sa stilizati tabelul dupa propriile preferinte. Ex: puteti schimba fontul semnelor X si O, puteti ingrosa bordura tabelului, puteti schimba culoarea celulelor atunci cand treceti cu mouse-ul peste ele, etc..

Acum ca am terminat cu stilizarea tabelului, putem trece la implementarea logicii utilizand JavaScript, dar nu inainte de a sterge textul „X” din interiorul celulelor <td></td> deoarece, dupa cum am mentionat anterior, textul de X sau O va fi adaugat din logica scrisa in JavaScript.

Implementarea logicii:

Implementarea logicii se va face in fisierul tutorialx0.js cu ajutorul codului JavaScript.

JavaScript ne permite sa modificam elementele fisierului html (elementele de tip <div>, <table>, <tr>, <td>, etc). Un aspect important atunci cand scriem cod JavaScript, si vrem sa manipulam elemente din pagina noastra, este ca acel cod scris de noi, va trebui sa se execute dupa ce elementele din pagina noastra au fost incarcate.

In javascript, putem execute o functie dupa ce pagina noastra a fost incarcata utilizand urmatorul cod:

document.addEventListener("DOMContentLoaded", function(event){
  // logica jocului va fi scrisa aici.
});

document.addEventListener("DOMContentLoaded", function(event){

// logica jocului va fi scrisa aici.

});

Logica jocului:

Un joc de x si 0 poate avea maxim 9 mutari. Vom crea doua variable pentru a retine numarul de mutari, si pentru a verifica daca jocul e inca in curs de desfasurare si nu exista niciun castigator.

Logica pentru mutarea unui jucator este urmatoarea:

Fiecare jucator executa o mutare, apasand pe o celula goala a tablei de joc, cat timp jocul e in curs de desfasurare.

document.addEventListener("DOMContentLoaded", function(event){
  
  let mutare = 1;
  let incurs = true;
  
  // variabila celule va contine toate celulele (td) din tabelul cu id-ul #tabel-xo
  let celule = document.querySelectorAll('#tabel-xo tr td');

  //pentru fiecare celula din tabel
  for(let i=0; i<celule.length; i++){
      
      let celula = celule[i];
      // specificam comportamentul celulei atunci cand este apasata
      celula.onclick = function(e){
         if(celula.innerHTML == '' && incurs){
           // vom executa logica pentru jucatorul 1 sau jucatorul 2.
         }     
      }
  }

});

document.addEventListener("DOMContentLoaded", function(event){

let mutare = 1;

let incurs = true;

// variabila celule va contine toate celulele (td) din tabelul cu id-ul #tabel-xo

let celule = document.querySelectorAll('#tabel-xo tr td');

//pentru fiecare celula din tabel

for(let i=0; i<celule.length; i++){

let celula = celule[i];

// specificam comportamentul celulei atunci cand este apasata

celula.onclick = function(e){

if(celula.innerHTML == '' && incurs){

// vom executa logica pentru jucatorul 1 sau jucatorul 2.

}

});

Dupa ce fiecare jucator executa o mutare, incrementam variabila mutare cu 1 si continuam sa facem asta pana ajunge la 9 (cand ajunge la 9, inseamna ca tabla este complet utilizata). Jucatorul numarul 1 poate face o mutare atunci cand variabila mutare are valoarea 1, 3, 5, 7 si 9. Jucatorul cu numarul 2 poate face o mutare cand variabila mutare are valoare 2, 4, 6, 8.

Putem concluziona ca jucatorul 1 poate face o mutare cand variabila mutare are valoarea impara iar jucatorul 2 cand mutare are valoarea para.

Cand oricare din jucatori apasa o celula goala, el va adauga in celula respectiva fie un X sau un O.

Pentru implementarea noastra, jucatorul 1 va adauga un X si jucatorul 2 un O.

document.addEventListener("DOMContentLoaded", function(event){
  
  let mutare = 1;
  let incurs = true;
  
  // variabila celule va contine toate celulele (td) din tabelul cu id-ul #tabel-xo
  let celule = document.querySelectorAll('#tabel-xo tr td');

  //pentru fiecare celula din tabel
  for(let i=0; i<celule.length; i++){
      
      let celula = celule[i];
      // specificam comportamentul celulei atunci cand este apasata
      celula.onclick = function(e){
         if(celula.innerHTML == '' && incurs){
           
            if(mutare % 2 == 1){
              celula.innerHTML = 'X';
            } else {
              celula.innerHTML = 'O'; 
            }

            mutare++;
         }     
      }
  }

});

document.addEventListener("DOMContentLoaded", function(event){

let mutare = 1;

let incurs = true;

// variabila celule va contine toate celulele (td) din tabelul cu id-ul #tabel-xo

let celule = document.querySelectorAll('#tabel-xo tr td');

//pentru fiecare celula din tabel

for(let i=0; i<celule.length; i++){

let celula = celule[i];

// specificam comportamentul celulei atunci cand este apasata

celula.onclick = function(e){

if(celula.innerHTML == '' && incurs){

if(mutare % 2 == 1){

celula.innerHTML = 'X';

} else {

celula.innerHTML = 'O';

}

mutare++;

}

});

Daca salvam fisierul tutorialx0.js si redeschidem pagina noastra HTML, vom observa ca putem adauga X-uri si O-uri pe tabla, tura jucatorilor alternand de fiecare data. Dar momentan, logica jocului nu determina si castigatorul.

Logica ce determina castigatorul:

Dupa fiecare mutare, va trebui sa apelam o functie care va verifica daca exista un castigator. Aceasta functie va returna fie X sau O specificand castigatorul, sau -1 daca nu exista niciun castigator. Functia va gasi fiecare celula a tabelului, apoi va verifica fiecare rand, coloana sau diagonala pentru un castigator. Acest lucru va fi realizat, verificand daca fiecare valoare a celulei este aceeasi pentru cele 3 spatii.

Vom utiliza functia querySelector prin care putem selecta un element din document pe baza unui selector de tip CSS. Vom utiliza selectorul css nth-child(n). Cu acesta putem gasi elementele dorite ale unui element pe baza ordinii acestuia din interiorul elementului parinte.

Functia noastra va arata astfel:

function verificareCastigator() {
  let celula1 = document.querySelector('#tabel-xo tr:nth-child(1) td:nth-child(1)').innerHTML;
  let celula2 = document.querySelector('#tabel-xo tr:nth-child(1) td:nth-child(2)').innerHTML;
  let celula3 = document.querySelector('#tabel-xo tr:nth-child(1) td:nth-child(3)').innerHTML;
  let celula4 = document.querySelector('#tabel-xo tr:nth-child(2) td:nth-child(1)').innerHTML;
  let celula5 = document.querySelector('#tabel-xo tr:nth-child(2) td:nth-child(2)').innerHTML;
  let celula6 = document.querySelector('#tabel-xo tr:nth-child(2) td:nth-child(3)').innerHTML;
  let celula7 = document.querySelector('#tabel-xo tr:nth-child(3) td:nth-child(1)').innerHTML;
  let celula8 = document.querySelector('#tabel-xo tr:nth-child(3) td:nth-child(2)').innerHTML;
  let celula9 = document.querySelector('#tabel-xo tr:nth-child(3) td:nth-child(3)').innerHTML;

  // verifica randurile
  if((celula1==celula2) && (celula2==celula3) && celula3 != ''){
    return celula3;
  }

  if((celula4==celula5) && (celula5==celula6) && celula6 != ''){
    return celula6;
  }

  if((celula7==celula8) && (celula8==celula9) && celula9 != ''){
    return celula9;
  }

   // verifica coloanele
  if((celula1==celula4) && (celula4==celula7) && celula7 != ''){
    return celula7;
  }

  if((celula2==celula5) && (celula5==celula8) && celula8 != ''){
    return celula8;
  }

  if((celula3==celula6) && (celula6==celula9) && celula9 != ''){
    return celula9;
  }

  // verifica diagonalele
  if((celula1==celula5) && (celula5==celula9) && celula9 != ''){
    return celula9;
  }

  if((celula3==celula5) && (celula5==celula7) && celula7 != ''){
    return celula7;
  }

  // niciun castigator
  return -1;
}

function verificareCastigator() {

let celula1 = document.querySelector('#tabel-xo tr:nth-child(1) td:nth-child(1)').innerHTML;

let celula2 = document.querySelector('#tabel-xo tr:nth-child(1) td:nth-child(2)').innerHTML;

let celula3 = document.querySelector('#tabel-xo tr:nth-child(1) td:nth-child(3)').innerHTML;

let celula4 = document.querySelector('#tabel-xo tr:nth-child(2) td:nth-child(1)').innerHTML;

let celula5 = document.querySelector('#tabel-xo tr:nth-child(2) td:nth-child(2)').innerHTML;

let celula6 = document.querySelector('#tabel-xo tr:nth-child(2) td:nth-child(3)').innerHTML;

let celula7 = document.querySelector('#tabel-xo tr:nth-child(3) td:nth-child(1)').innerHTML;

let celula8 = document.querySelector('#tabel-xo tr:nth-child(3) td:nth-child(2)').innerHTML;

let celula9 = document.querySelector('#tabel-xo tr:nth-child(3) td:nth-child(3)').innerHTML;

// verifica randurile

if((celula1==celula2) && (celula2==celula3) && celula3 != ''){

return celula3;

}

if((celula4==celula5) && (celula5==celula6) && celula6 != ''){

return celula6;

}

if((celula7==celula8) && (celula8==celula9) && celula9 != ''){

return celula9;

}

// verifica coloanele

if((celula1==celula4) && (celula4==celula7) && celula7 != ''){

return celula7;

}

if((celula2==celula5) && (celula5==celula8) && celula8 != ''){

return celula8;

}

if((celula3==celula6) && (celula6==celula9) && celula9 != ''){

return celula9;

}

// verifica diagonalele

if((celula1==celula5) && (celula5==celula9) && celula9 != ''){

return celula9;

}

if((celula3==celula5) && (celula5==celula7) && celula7 != ''){

return celula7;

}

// niciun castigator

return -1;

}

Acum trebuie doar sa verificam daca exista un castigator, si sa notificam castigatorul.

Codul complet arata acum astfel:

document.addEventListener("DOMContentLoaded", function(event){
  
  let mutare = 1;
  let incurs = true;
  
  // variabila celule va contine toate celulele (td) din tabelul cu id-ul #tabel-xo
  let celule = document.querySelectorAll('#tabel-xo tr td');

  //pentru fiecare celula din tabel
  for(let i=0; i<celule.length; i++){
      
      let celula = celule[i];
      // specificam comportamentul celulei atunci cand este apasata
      celula.onclick = function(e){
         if(celula.innerHTML == '' && incurs){
           
            if(mutare % 2 == 1){
              celula.innerHTML = 'X';
            } else {
              celula.innerHTML = 'O'; 
            }

            mutare++;

            let semnulCastigator = verificareCastigator();

            //niciun castigator; iesim din functie
            if(semnulCastigator == '' || semnulCastigator == -1){
              return;
            }

            let jucatorCastigator =  (semnulCastigator == 'X') ? '1' : '2';
            alert('Castigator: Jucatorul ' + jucatorCastigator);
            incurs = false;
         }     
      }
  }

});

function verificareCastigator() {
  let celula1 = document.querySelector('#tabel-xo tr:nth-child(1) td:nth-child(1)').innerHTML;
  let celula2 = document.querySelector('#tabel-xo tr:nth-child(1) td:nth-child(2)').innerHTML;
  let celula3 = document.querySelector('#tabel-xo tr:nth-child(1) td:nth-child(3)').innerHTML;
  let celula4 = document.querySelector('#tabel-xo tr:nth-child(2) td:nth-child(1)').innerHTML;
  let celula5 = document.querySelector('#tabel-xo tr:nth-child(2) td:nth-child(2)').innerHTML;
  let celula6 = document.querySelector('#tabel-xo tr:nth-child(2) td:nth-child(3)').innerHTML;
  let celula7 = document.querySelector('#tabel-xo tr:nth-child(3) td:nth-child(1)').innerHTML;
  let celula8 = document.querySelector('#tabel-xo tr:nth-child(3) td:nth-child(2)').innerHTML;
  let celula9 = document.querySelector('#tabel-xo tr:nth-child(3) td:nth-child(3)').innerHTML;

  // verifica randurile
  if((celula1==celula2) && (celula2==celula3) && celula3 != ''){
    return celula3;
  }

  if((celula4==celula5) && (celula5==celula6) && celula6 != ''){
    return celula6;
  }

  if((celula7==celula8) && (celula8==celula9) && celula9 != ''){
    return celula9;
  }

   // verifica coloanele
  if((celula1==celula4) && (celula4==celula7) && celula7 != ''){
    return celula7;
  }

  if((celula2==celula5) && (celula5==celula8) && celula8 != ''){
    return celula8;
  }

  if((celula3==celula6) && (celula6==celula9) && celula9 != ''){
    return celula9;
  }

  // verifica diagonalele
  if((celula1==celula5) && (celula5==celula9) && celula9 != ''){
    return celula9;
  }

  if((celula3==celula5) && (celula5==celula7) && celula7 != ''){
    return celula7;
  }

  // niciun castigator
  return -1;
}

document.addEventListener("DOMContentLoaded", function(event){

let mutare = 1;

let incurs = true;

// variabila celule va contine toate celulele (td) din tabelul cu id-ul #tabel-xo

let celule = document.querySelectorAll('#tabel-xo tr td');

//pentru fiecare celula din tabel

for(let i=0; i<celule.length; i++){

let celula = celule[i];

// specificam comportamentul celulei atunci cand este apasata

celula.onclick = function(e){

if(celula.innerHTML == '' && incurs){

if(mutare % 2 == 1){

celula.innerHTML = 'X';

} else {

celula.innerHTML = 'O';

}

mutare++;

let semnulCastigator = verificareCastigator();

//niciun castigator; iesim din functie

if(semnulCastigator == '' || semnulCastigator == -1){

return;

}

let jucatorCastigator = (semnulCastigator == 'X') ? '1' : '2';

alert('Castigator: Jucatorul ' + jucatorCastigator);

incurs = false;