Am inceput in articolul trecut drumul catre construirea unui mic joc de Tetris care sa ruleze in simulatorul nostru online de Javascript minimalist. Am vazut acolo ca primul pas a fost sa iau o foaie de hartie si sa schitez pe ea interfata jocului, precum si principalele variabile necesare pentru implementarea lui.

In articolul acesta prezint al doilea pas, in care nu fac altceva decat sa ma uit pe acea foaie de hartie si sa transpun cele scrise acolo in limbajul nostru de programare minimalist.

Iata in continuare ce a iesit:

// +--------+
// | TETRIS |
// +--------+

// CONSTANTELE:

// Piesele:

var piesa1 = Matrice(4, 4);
piesa1[0][0] = 0; piesa1[0][1] = 0; piesa1[0][2] = 1; piesa1[0][3] = 0;
piesa1[1][0] = 0; piesa1[1][1] = 0; piesa1[1][2] = 1; piesa1[1][3] = 0;
piesa1[2][0] = 0; piesa1[2][1] = 0; piesa1[2][2] = 1; piesa1[2][3] = 0;
piesa1[3][0] = 0; piesa1[3][1] = 0; piesa1[3][2] = 1; piesa1[3][3] = 0;
var piesa2 = Matrice(4, 4);
piesa2[0][0] = 0; piesa2[0][1] = 0; piesa2[0][2] = 0; piesa2[0][3] = 0;
piesa2[1][0] = 0; piesa2[1][1] = 1; piesa2[1][2] = 0; piesa2[1][3] = 0;
piesa2[2][0] = 0; piesa2[2][1] = 1; piesa2[2][2] = 1; piesa2[2][3] = 0;
piesa2[3][0] = 0; piesa2[3][1] = 1; piesa2[3][2] = 0; piesa2[3][3] = 0;
var piesa3 = Matrice(4, 4);
piesa3[0][0] = 0; piesa3[0][1] = 0; piesa3[0][2] = 0; piesa3[0][3] = 0;
piesa3[1][0] = 0; piesa3[1][1] = 1; piesa3[1][2] = 1; piesa3[1][3] = 0;
piesa3[2][0] = 0; piesa3[2][1] = 1; piesa3[2][2] = 1; piesa3[2][3] = 0;
piesa3[3][0] = 0; piesa3[3][1] = 0; piesa3[3][2] = 0; piesa3[3][3] = 0;
var piesa4 = Matrice(4, 4);
piesa4[0][0] = 0; piesa4[0][1] = 0; piesa4[0][2] = 0; piesa4[0][3] = 0;
piesa4[1][0] = 0; piesa4[1][1] = 1; piesa4[1][2] = 0; piesa4[1][3] = 0;
piesa4[2][0] = 0; piesa4[2][1] = 1; piesa4[2][2] = 0; piesa4[2][3] = 0;
piesa4[3][0] = 0; piesa4[3][1] = 1; piesa4[3][2] = 1; piesa4[3][3] = 0;
var piesa5 = Matrice(4, 4);
piesa5[0][0] = 0; piesa5[0][1] = 0; piesa5[0][2] = 0; piesa5[0][3] = 0;
piesa5[1][0] = 0; piesa5[1][1] = 1; piesa5[1][2] = 0; piesa5[1][3] = 0;
piesa5[2][0] = 0; piesa5[2][1] = 1; piesa5[2][2] = 1; piesa5[2][3] = 0;
piesa5[3][0] = 0; piesa5[3][1] = 0; piesa5[3][2] = 1; piesa5[3][3] = 0;

// Starile jocului:

var JOC_OPRIT = 0;
var GENEREAZA_PIESA = 1;
var COBOARA_PIESA = 2;
var JOC_TERMINAT = -1;

// VARIABILELE:

// Variabile ajutatoare:

var l;
var c;

// Tabla de joc:

var t = Matrice(17, 16);
l = 0;
while (l<17)
{
  c = 0;
  while (c<16)
  {
    t[l][c] = 0;
    c = c+1;
  }
  l = l+1;
}

// Piesa curenta:

var p = Matrice(4, 4);
p[0][0] = 0; p[0][1] = 0; p[0][2] = 0; p[0][3] = 0;
p[1][0] = 0; p[1][1] = 0; p[1][2] = 0; p[1][3] = 0;
p[2][0] = 0; p[2][1] = 0; p[2][2] = 0; p[2][3] = 0;
p[3][0] = 0; p[3][1] = 0; p[3][2] = 0; p[3][3] = 0;

// Coordonatele piesei:

var pl;
var pc;

// Starea jocului:

var stare_joc;

// FUNCTIILE

function FunctieTaste(ev)
{
  var tasta = TastaApasata(ev);
  if (tasta == 'a') // deplasare la stanga
  {
    if (stare_joc == COBOARA_PIESA)
    {
      //...
    }
  }
  else if (tasta == 'd') // deplasare la dreapta
  {
    if (stare_joc == COBOARA_PIESA)
    {
      //...
    }
  }
  else if (tasta == 'o') // rotatie la stanga
  {
    if (stare_joc == COBOARA_PIESA)
    {
      //...
    }
  }
  else if (tasta == 'p') //rotatie la dreapta
  {
    if (stare_joc == COBOARA_PIESA)
    {
      //...
    }
  }
  else if (tasta == ' ') // pauza/repornire
  {
    if (stare_joc == COBOARA_PIESA)
    {
      stare_joc = JOC_OPRIT;
    }
    else if (stare_joc == JOC_OPRIT)
    {
      stare_joc = COBOARA_PIESA;
    }
  }
}

function FunctieDesenare()
{
  if (TimpScurs(1000/2) == 1)
  {
    if (stare_joc == JOC_TERMINAT)
    {
      // Incheie programul:
      AscultaTaste();
      StartAnimatie();
    }
    else if (stare_joc == JOC_OPRIT)
    {
      // Nu face nimic.
    }
    else if (stare_joc == COBOARA_PIESA)
    {
      //...
    }
    else if (stare_joc == GENEREAZA_PIESA)
    {
      //...
      stare_joc = COBOARA_PIESA;
    }
  }
  Animeaza(FunctieDesenare);
}

// PROGRAMUL:

stare_joc = GENEREAZA_PIESA;
AscultaTaste(FunctieTaste);
StartAnimatie(FunctieDesenare);

Daca iti sunt familiare lectiile introductive de programare pe care le poti gasi (cu un pic de munca de cautare in sectiunea cuprins) pe acest site, atunci n-ar trebui sa iti fie prea greu sa intelegi ce am facut in schita de program de mai sus. Am pus acolo si comentarii ajutatoare, iar locurile unde mai trebuie sa adaug lucruri le-am marcat in codul sursa prin comentariul “//…”.

Bineinteles ca mai e de munca pana cand vom vedea ceva “actiune” in jocul nostru de Tetris, dar eu zic ca suntem pe drumul cel bun. 🙂 Ce parere ai? M-ai urmarit pana aici?

Cu drag,

Florin