Codice per il disegno dei mattoni nel giochino del Breakout, con codice per eliminare i mattoni colpiti.

Abbiamo detto che per disegnare i mattoncini si può scrivere un codice di questo genere:

 for(var i=0;i<NCOLS;i++){
  for(var j=0;j<NROWS;j++){
   rect((i*(BRICKWIDTH+PADDING))+PADDING,
   (j*(BRICKHEIGHT+PADDING))+PADDING,
   BRICKWIDTH,BRICKHEIGHT,"maroon");
  }
 }

Per ogni riga, da 0 fino a numero di colonne meno 1, la coordinata sinistra del mattone è pari al numero per la larghezza del mattone stesso (calcolando anche il padding, ossia le distanze fra mattoni).
La coordinata alto, invece, si calcola per ogni numero di coordinata sinistra incrementando un altro numero da zero fino al numero di righe meno 1.
Uffa, non mi sono spiegato chiaramente ma il concetto comunque è questo, mi è sufficientemente chiaro.

Però nel programma del tutorial c'è anche il codice per stabilire se un determinato mattone di coordinate i e j va disegnato o no.
Per questo si istituisce un array di dimensioni i e j, in cui ogni mattone è identificato da due numeri.

 for(i=0;i<NROWS;i++){
  bricks[i]=new Array(NCOLS);
  for(j=0;j<NCOLS;j++){
   bricks[i][j]=1;
  }
 }

Inizialmente tutti gli elementi dell'array hanno valore 1.
Se poi il mattone sarà colpito, gli verrà dato valore zero e non sarà ridisegnato al successivo ridisegno del canvas.
Ed il codice che stabilisce quale mattone è stato colpito è questo:

  rowheight = BRICKHEIGHT + PADDING;
  colwidth = BRICKWIDTH + PADDING;
  row = Math.floor(y/rowheight);
  col = Math.floor(x/colwidth);

  if (y < NROWS * rowheight  && bricks[row][col] == 1) {
    dy = -dy;
    bricks[row][col] = 0;
  }

Conoscendo y, ossia la coordinata y della palla, si divide y per l'altezza di ogni singolo mattone per trovare il numero di righe al quale ci si trova (approssimando tutto con il Math.floor, ossia togliendo i decimali).
Stessa cosa conoscendo x, dividendolo per la larghezza di ogni singolo mattone, in modo da conoscere il numero di colonne, per poi approssimare avendo il numero esatto.
Ovviamente questo deve valere se la palla si trova fra i mattoni. Se non specifichiamo questo, un valore di y troppo grande fa sì che si possano ottenere numeri di riga oltre quelli presenti nella matrice di mattoni. Infatti ho provato e mi dà errore.

Se quindi il mattone al cui livello si trova la palla è stato tracciato, ossia è pari a 1, lo si imposta pari a 0 e si rimanda indietro la palla.
Essendo pari a 0, al successivo ridisegno del canvas non sarà disegnato perché...

for (i=0; i < NROWS; i++) {
     for (j=0; j < NCOLS; j++) {
        if (bricks[i][j] == 1) {
          rect((j * (BRICKWIDTH + PADDING)) + PADDING, 
              (i * (BRICKHEIGHT + PADDING)) + PADDING,
              BRICKWIDTH, BRICKHEIGHT,"saddlebrown");
        }
     }

...perché i mattoni sono ridisegnati solo se valgono 1.