Salta gli ostacoli in DHTML

Un pomeriggio di novembre: niente da fare, poca voglia di imparare cose nuove.. 'sicchè passo le mie 6 ore rimanenti nel fare un piccolo giochino stupido e insignificante in javascript :)

Descrizione del progetto:
Un personaggio stilizzato che cammina in un mondo a scorrimento orizzontale e che deve saltare delle buche che appaiono randomicamente sullo schermo.

N.B.
Come il 99% delle cose che posterò, non è niente di nuovo. Ma ai fini del blog, mi pare utile.

Ecco come si presenta all'inizio:

Per strasemplificarmi il tutto, lo faccio in un area statica (i Doodles fanno scuola).
Solo per l'ambiente ci sono 5 layer. Uno da contenitore, uno per il terreno, due per le nuvole e uno per il sole.

E' semplicissimo. Lo sprite è nel mio caso un immagine contenente i frame delle animazioni che verranno visualizzate. A seconda dell'esigenza visualizzo la porzione dell'immagine  desiderata e attraverso un Interval, dono l'effetto dell'animato allo sprite.
E qui devo dire la verità... Google docet ancora.


Il terreno è praticamente il livello: un immagine molto lunga che scorre da destra verso sinistra.
L'effetto movimento è dato dallo sprite che si muove in concomitanza al terreno.
Finito il terreno, finisce il livello.

E ora che lo sprite si "muove", va fatto saltare!
Intercetto quindi il tasto "FRECCIA SU" (keyCode 38) e richiamo due function che non fanno altro che aumentare prima il top del div e diminuirlo dopo. In questo modo sembrerà davvero che lo sprite salti.
Attenzione a non fargli fare salti troppo alti oppure troppo lunghi. :)

Ultima cosa. Le buche!

E' necessario che le buche vengano create dinamicamente, quindi mi creo questo metodo.

 function CreaBuca()  
 {  
   var divTag = document.createElement("img");  
      divTag.id = "divBuca"+ numBuca;         
      divTag.style.marginTop = DefaultMarginTop;  //posizioni nello schermo   
      divTag.style.marginLeft = DefaultMarginLeft;     
      divTag.style.position = "absolute";        
      divTag.src="buca.png";  
      document.getElementById("divominoback").appendChild(divTag);  
    numBuca++;  //tengo traccia delle buche create
 }  

Quando creare le buche?

Un po per pigrizia, un po' perchè l'ho fatto per prova e poi non l'ho più modificato. Le buche le creo con la setTimeout dopo che lo sprite è pronto.

    setTimeout(CreaBuca, 1000);  
    setTimeout(CreaBuca, 1900);  
    setTimeout(CreaBuca, 2000);  
    setTimeout(CreaBuca, 5000);  
    setTimeout(CreaBuca, 8000);  
    setTimeout(CreaBuca, 9000);  
    setTimeout(CreaBuca, 9500);  
    setTimeout(CreaBuca, 9900);  
    setTimeout(CreaBuca, 12000);  

Quasi dimenticavo... ovviamente creata la buca, la si fa subito "muovere" insieme al terreno, in modo che vada incontro al nostro personaggio.
Ultimissima cosa necessaria a finire questo mini gioco: capire quando lo sprite colpisce una buca.

Qui entra la malattia.

Un timer (interval) il cui metodo associato scorre tutti gli elementi del div Container, trova le buche presenti non saltate, e controlla se l'area della buca invade quella dello sprite. Esempio:

 function CheckCollisions(oggettoid)  //id della buca  
  {   
   var buca = document.getElementById(oggettoid);   
   if(buca!=null){   
    var omino =document.getElementById("omino");   
    var left=parseInt(buca.style.marginLeft.replace("px",""));   
    var top=parseInt(omino.style.top.replace("%",""));    
  //controlli superficiali  
  if(left>=MinAreaSprite && left<=MaxAreaSprite && top==BaseLineSprite)   
   {     
    //gioco finito  
    clearInterval(timecammina);   
    alert("Game Over");   
     }   
  }   

Et voilà: Un inizio c'è.
Se qualcuno vuol vedere questo progetto (leggermente integrato) all'opera, clicchi qui.


Ringraziamento speciale a Marco Rosano.