venerdì 27 giugno 2014

Costruire il gioco Frogger in 10 minuti o meno

In questo post proverò a spiegare come fare un gioco come "Frogger". Frogger è un gioco vecchissimo, dove il giocatore controlla una rana che tenta di attraversare un'autostrada, cercando di non venire investita dalle macchine.
Chiaramente rimarrò sul semplice, giusto per far vedere alcuni principi base e come si riesca a fare tutto in meno di 10 minuti!
Siete pronti con il cronometro? Bene...via!
Prima di tutto creiamo un nuovo programma andando su File -> New Mainstack.In questo modo avremo una nuova finestra con cui lavorare.
Creiamo i seguenti elementi:
  • pulsante Start
  • un cerchietto verde chiamandolo rana 
  • una rettangolo rosa che chiameremo car1
  • un grosso rettangolo verde scuro chiamandolo arrivo
  • mettere la scritta ARRIVO sopra il rettangolo verde
 Se tutto è stato fatto correttamente avremo il seguente risultato:

Adesso mettiamo nella card corrente (l'unica del programma) il seguente codice per muovere la rana con le frecce della tastiera:

on arrowkey puls
   if the giostat of me is "attivo" then
      switch puls
         case "up"
            move graphic "rana" relative 0,-30         
            break         
         case "down"
            move graphic "rana" relative 0,30         
            break
         case "left"
            move graphic "rana" relative -30,0
            break               
         case "right"
            move graphic "rana" relative 30,0
            break         
      end switch
      if intersect(graphic rana,graphic arrivo) then
         set the giostat of this card to "fermo"
         answer "Hai vinto!"
      end if      
   end if
end arrowkey



Siamo già arrivati a metà del lavoro, ora dobbiamo scrivere il codice per muovere la macchina da sinistra a destra e riposizionarla di nuovo al punto di partenza quando ha percorso tutta la finestra. Immaginando la finestra larga 400 pixels, il codice è:

on iniziagioco
   set the percorso of me to true
   controint
   gioco
end iniziagioco

on moveStopped
   put the percorso of me into temp
   set the percorso of me to not temp
   if the giostat of this card is "attivo" then
      send gioco to me in 0.1 millisec
   end if   
end moveStopped

on gioco   
   put the percorso of me into temp
   if temp then
      move me relative 400,0 in 3 sec without waiting
      else
         move me relative -400,0 in 1 millisec without waiting
      end if
end gioco

on controint
   if intersect(graphic rana, me) then
      set the giostat of this card to "fermo"
      stop moving me         
      answer "Aaaaah! La rana e' morta!"
   end if   
   if the giostat of this card is "attivo" then
      send controint to me in 0.1 sec
   end if      
end controint



Adesso è meglio spiegare il codice appena scritto.
Iniziagioco è il messaggio che deve ricevere la macchina per cominciare a muoversi. Una vola ricevuto, comincerà ad andare da sinistra a destra per 400 pixels e riposizionarsi al punto di partenza finchè la proprietà giostat della carta corrente diventa "fermo" (non è più "attivo"). Inventarsi una proprietà della carta è una scelta comoda, perchè così la vedono tutti (macchine, rana, ecc.) e si può fermare tutto il gioco cambiandone il suo valore. Sempre dentro questo messaggio parte controint, un messaggio che si ripete ogni 0.1 secondi per vedere se la rana è investita dalla macchina.
I messaggi gioco e Movestopped servono per muovere la macchina effettivamente. Visto che intendiamo mettere 6 macchine, ognuna con velocità diverse, è meglio optare per il comando move without waiting; in questo modo non abbiamo problemi di sincronizzazione col move generale e abbiamo il messaggio MoveStopped  che viene lanciato in automatico dal programma quando la macchina ha finito di muoversi.

Bene adesso copiate la macchina per arrivare ad un totale di sei macchine (copiando la macchina, viene copiato anche il codice). Cambiate i nomi delle macchine in modo che siano numerate da car1 a car6 , divertitevi a cambiare la lunghezza delle macchine. Inoltre nel codice di ogni singola macchina divertitevi a cambiare il tempo in secondi che impiega a fare un passaggio.
Come in una autostrada vera, creeremo due sensi di marcia, quindi facciamo in modo che le ultime tre macchine  tre (car4, car5 e car6) si muovano da destra a sinistra cambiando i 400 in -400 e viceversa nel loro codice .
Se tutto è andato per il verso giusto avrete ottenuto qualcosa simile a questo:

Abbiamo quasi finito manca solo il codice del pulsante start:


on mouseUp
   set the loc of graphic rana to 200,300
   set the giostat of this card to "attivo"
   repeat with i=1 to 3
      set the left of graphic ("car" & i) to the left of this card
   end repeat
   repeat with i=4 to 6
      set the right of graphic ("car" & i) to the right of this card
   end repeat
   repeat with i=1 to 6
      send "iniziagioco" to graphic ("car" & i)
   end repeat
end mouseUp


FATTO! Quanto ci avete messo?
Come vedete il codice del pulsante start mette macchine e rana al i posti di partenza e dal il segnale di partenza alle macchine.
Questo è solo un semplice esempio, il gioco può essere notevolmente migliorato ad esempio:
  • sostituendo la grafica con delle immagini animate e/o animazioni
  • considerando la lunghezza del mezzo nel codice del moviemento
  • generando configurazioni di partenza con velocità e quantità dei mezzi casuali ogni volta
  • visto che move può far muovere lungo qualunque serie di punti, si potrebbero immaginare percorsi con curve, diramazioni, ecc.
  • aggiungendo timer e punteggi
Se volete, postate nei commenti  link alle vostre versioni di questo esempio.