Le gioie di Javascript #2

Passiamo a due nuovi concetti, molto importanti : uno per il linguaggio Javascript e precisamente l’ array, e uno per il tag div dell’html e precisamente la proprietà z-index. Prima di iniziare a parlarne, vediamo una piccola “demo” di come questi due concetti possano essere applicati. Cliccando su questo link si aprirà una pagina del browser con quattro “fantasmini” che si muovono sullo schermo…

Di seguito, il listato del programma Javascript (demo2.js) :

//<!-- javascript demo #2 - Emilio Ficara 2012
var i,id,timer; // definizione variabili per indice oggetti,identificatore oggetti,timer
var xpos,ypos,xstep,ystep,xsize,ysize; // definizione variabili posizione, spostamento, dimensioni

  xpos = new Array(); // crea un array di posizioni X per i vari oggetti
  ypos = new Array(); // crea array per posizioni Y
  xstep = new Array(); // crea array per passo spostamenti X
  ystep = new Array(); // crea array per passo spostamenti Y
  xsize = new Array(); // crea array dimensione X oggetti
  ysize = new Array(); // crea array dimensione Y oggetti

  xpos[0] = 0; xpos[1] = 160; xpos[2] = 320; xpos[3] = 480; // posizione X iniziale per 4 oggetti  
  ypos[0] = 0; ypos[1] = 120; ypos[2] = 240; ypos[3] = 360; // posizione Y iniziale
  xstep[0] = 3; xstep[1] = 3; xstep[2] = 3; xstep[3] = 2; // passo spostamenti X
  ystep[0] = 2; ystep[1] = 2; ystep[2] = 2; ystep[3] = 3; // passo spostamenti Y
  xsize[0] = 64; xsize[1] = 48; xsize[2] = 80; xsize[3] = 128; // dimensioni X
  ysize[0] = 64; ysize[1] = 48; ysize[2] = 80; ysize[3] = 128; // dimensioni Y

  NewStep(); // esegui la funzione per la prima volta (dopo verrà richiamata da timer)

function NewStep() // nuovo step spostamento oggetto mobile
{
  for(i = 0; i < 4; ++i) // fai andare la variabile i da 0 a 3 con incremento di 1
    {
    xpos[i] += xstep[i]; // nuova posizione X oggetto [i] di array
    ypos[i] += ystep[i]; // nuova posizione Y oggetto [i] di array
    if(xpos[i] > (document.body.clientWidth -xsize[i]) || xpos[i] < 0) // se oggetto [i] oltre il bordo destro o sinistro
      {
      xstep[i] = -xstep[i]; // inverti lo step di spostamento orizzontale per l'oggetto [i]
      xpos[i] = xpos[i] +xstep[i] +xstep[i]; // esegui lo spostamento due volte (era andato già oltre)
      }
    if(ypos[i] > (document.body.clientHeight -ysize[i]) || ypos[i] < 0) // se oggetto [i] oltre il bordo superiore o inferiore
      {
      ystep[i] = -ystep[i]; // inverti lo step di spostamento verticale per l'oggetto [i]
      ypos[i] = ypos[i] +ystep[i] +ystep[i]; // esegui lo spostamento due volte (era andato già oltre)
      }
    id = "L"+i; // assegna identificativo L0..L3 per l'oggetto che vogliamo muovere
    document.getElementById(id).style.top=ypos[i]+"px"; // assegna la nuova posizione verticale all'oggetto [i]
    document.getElementById(id).style.left=xpos[i]+"px"; // assegna la nuova posizione orizzontale all'oggetto [i]
    }
  timer = setTimeout("NewStep()",20); // attiva timer per eseguire di nuovo la funzione NewStep tra 20 mS
}
//->

e della pagina html usata come “contenitore” (demo2.htm) :

<html><head><title>Javascript demo #2 - Emilio P.G. Ficara 2012</title></head>
<body bgcolor="#FFFFFF">
<div id="L0" style="position:absolute; z-index:1">
 <img src="img/sprite0.png">
</div>
<div id="L1" style="position:absolute; z-index:2">
 <img src="img/sprite1.png">
</div>
<div id="L2" style="position:absolute; z-index:3">
 <img src="img/sprite2.png">
</div>
<div id="L3" style="position:absolute; z-index:4">
 <img src="img/sprite3.png">
</div>
<script src="demo2.js"></script>
</body></html>

Possiamo notare, nel listato demo2.htm, la presenza di 4 tag div, ognuno dei quali ha un proprio identificativo ( id=”L0″ .. id=”L3″ ) e la proprietà z-index di valore diverso; in questo “giochetto” i diversi valori di z-index determinano quale oggetto è “in primo piano”, quale in “secondo piano”, eccetera. Lo z-index può essere considerato come un foglio trasparente su cui appiccichiamo un adesivo che è il nostro oggetto. Facciamo un esempio : i quattro “fantasmini” che vediamo nel gioco hanno ognuno un numero disegnato sopra, da 1 a 4, che corrisponde al valore di z-index che è stato assegnato al tag div che li contiene. Ho usato questi numeri per rendere più chiare le cose. Se ci fate caso, quando i fantasmini si “incrociano”, qualcuno rimane visibile, mentre un altro viene “nascosto dietro”. Questa è la funzione z-index. L’oggetto che ha z-index = 4 (il fantasmino arancione) è sempre visibile, cioè, in caso di “incroci”, copre sia il fantasmino 1, sia il 2, sia il 3. A sua volta, il fantasmino 3 rimane visibile se incrocia il 2 o l’1. Insomma, è come se avessimo i nostri quattro fogli trasparenti sovrapposti, ognuno con il suo adesivo appiccicato sopra, e muovessimo i singoli fogli : se chiamiamo “z-index = 4” il foglio in cima agli altri, è chiaro che tutto quello che c’è sotto l’adesivo non sarà visibile, perché “nascosto dietro”. Lo stesso vale per tutti gli altri livelli, foglio per foglio. Con questo principio è possibile creare animazioni in cui è presente una “profondità” dei livelli, esattamente come se stessimo lavorando con diversi fogli trasparenti sovrapposti.

Per quanto riguarda Javascript, invece, abbiamo fatto uso di arrays . Se consideriamo una variabile come una “scatola” in cui mettere delle cose, allora un array è una cassettiera, con un certo numero di cassetti, così possiamo dire “prendi le camicie che ci sono nel terzo cassetto” e dare un’indicazione esatta di dove si trova ciò che ci serve. Nella demo #1 muovevamo, sul nostro quadrato di gioco, un solo oggetto: la palla, e così avevamo una sola variabile per ognuno dei parametri che ci interessavano : xpos per la posizione orizzontale, ypos per quella verticale eccetera. Ora, nella demo #2, muoviamo 4 oggetti diversi, perciò abbiamo bisogno, per ognuno di essi, delle stesse informazioni. Allora, invece di usare una singola variabile, abbiamo usato degli arrays. Così xpos non è più una singola variabile, ma una “cassettiera” in cui possiamo andare a prendere, basandoci su un indice (la posizione del cassetto) i dati necessari per un determinato oggetto. L’uso di questa tecnica ci permette di scrivere le istruzioni per muovere tutti e quattro gli oggetti in un singolo ciclo FOR ; il ciclo FOR è scritto in modo da far andare una variabile (usata come indice, ovvero il numero del “cassetto”) da 0 a 3 compresi, così da svolgere ogni volta, al suo interno, le operazioni relative agli oggetti [0], [1], [2] e [3]. Con la stessa tecnica è possibile aumentare a piacere il numero di oggetti trattati, semplicemente “allungando” gli arrays. Si noti che gli arrays possono avere più dimensioni, in quel caso, però, è meglio far riferimento a matrici. Ne parleremo in una fase successiva.