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>