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.

Le gioie di Javascript #1

Le gioie di javascript, scusate l’allitterazione…
Ho iniziato questo tutorial per JavaScript sulle pagine di un forum gestito da un amico ed ora che il mio blog comincia a predere forma e consistenza, ho deciso di proseguire direttamente qui. Spero di fare cosa utile.

Ho visto in giro alcune belle animazioni realizzate con programmi specializzati. Le animazioni sono un eccezionale strumento per attirare l’attenzione su un argomento di cui si sta trattando. Gli strumenti software che si utilizzano normalmente, siano quelli a pagamento, siano quelli gratuiti, hanno tantissime possibilità e permettono la realizzazione di “effetti speciali” davvero notevoli. Tutto OK.
Vorrei però focalizzare la vostra attenzione anche su un paio di formidabili strumenti gratuiti e multipiattaforma, in grado di girare su qualsiasi sistema operativo.
Questi strumenti sono :

a) il browser, in special modo Firefox che è presente su praticamente tutte le piattaforme software
b) il linguaggio di scripting Javascript

Javascript è un linguaggio semplice e potente e basta un qualsiasi editor di testi per scrivere la propria applicazione. Dove si fa “girare” un programma scritto in Javascript ? Dentro una pagina web, usando un browser. Il bello è che il programma può essere sul vostro PC o su Internet, le cose non cambiano.
La sintassi di Javascript è simile a quella del linguaggio C e comunque la rete è strapiena di esempi interessanti. Io ne aggiungo uno mio personale, per insistere nel discorso sulle risorse gratuite e liberamente utilizzabili e soprattutto per tentare di modificare l’atteggiamento comune di prendere “roba precotta” e invitare tutti a diventare “chef”, informaticamente parlando. Cominciate con un “ovetto al tegamino” per diventare grandi programmatori 🙂

Cliccando su questo link potrete trovare un’animazione minima realizzata con Javascript. Il programma è semplicissimo e si avvale del versatile tag DIV del linguaggio HTML usato per creare la “pagina” che contiene il gioco. Con Javascript è possibile modificare la posizione di una “sezione” DIV sullo schermo ; siccome in questo esempio la sezione DIV interessata contiene l’immagine di una palla, possiamo far muovere e “rimbalzare” la palla modificando, ad intervalli regolari di tempo, le coordinate X (left) ed Y (top) del relativo tag DIV. Questo è giusto un primo passo…

Per chi vuole studiare il “come è fatto dentro”, aggiungo il listato del programmino presentato (demo1.js) :

//<!-- javascript demo #1 - Emilio Ficara 2011
var id,timer; // definizione variabili per identificatore e timer
var xpos,ypos,xstep,ystep,xsize,ysize; // definizione variabili posizione, spostamento, dimensioni

  xpos = 0; // posizione x iniziale (0,0 angolo in alto a sinistra)
  ypos = 0; // posizione y iniziale
  xstep = 3; // spostamento ad ogni step sull'asse x
  ystep = 2; // spostamento ad ogni step sull'asse y
  xsize = 30; // dimensione orizzontale oggetto mobile (pallone)
  ysize = 30; // dimensione verticale oggetto mobile pallone
  gamex = 480; // dimensione orizzontale sfondo fisso (campo)
  gamey = 303; // dimensione verticale sfondo fisso (campo)
  NewStep(); // esegui la funzione per la prima volta (dopo verrà richiamata da timer)

function NewStep() // nuovo step spostamento oggetto mobile
{
    xpos += xstep; // nuova posizione x
    ypos += ystep; // nuova posizione y
    if(xpos > (gamex - xsize) || xpos < 0) // se oltre il bordo destro o sinistro
      {
      xstep = -xstep; // inverti lo step di spostamento orizzontale
      xpos = xpos +xstep +xstep; // esegui lo spostamento due volte (era andato già oltre)
      }
    if(ypos > (gamey - ysize) || ypos < 0) // se oltre il bordo superiore o inferiore
      {
      ystep = -ystep; // inverti lo step di spostamento verticale
      ypos = ypos +ystep +ystep; // esegui lo spostamento due volte (era andato già oltre)
      }
    id = "palla"; // assegna identificativo dell'oggetto che vogliamo muovere
    document.getElementById(id).style.top=ypos+"px"; // assegna la nuova posizione verticale all'oggetto
    document.getElementById(id).style.left=xpos+"px"; // assegna la nuova posizione orizzontale all'oggetto
    timer = setTimeout("NewStep()",10); // attiva timer per eseguire di nuovo la funzione NewStep tra 10 mS
}
//->

Di seguito, il istato del file demo1.htm che costituisce il “contenitore” che sarà visualizzato con un browser (preferibilmente FireFox) sia su Windows, che su Linux o su qualsiasi altro sistema operativo che supporti un browser in grado di eseguire JavaScript :

<html>
<head>
 <title>Javascript demo #1 - Emilio P.G. Ficara 2012</title>
</head>
<body>
<h1>scendiamo in campo...</h1>
<div id="campo" style="position:absolute; top:60px; left:40px;">
 <img src="img/campo.jpg">
 <div id="palla" style="position:absolute;">
  <img src="img/palla.png">
 </div>
</div>
<script src="demo1.js"></script>
</body></html>