Tag Archives: Canvas

Space Invaders

http://appinventor.mit.edu/explore/ai2/space-invaders


GUI


Componenti


  1.  Screen > Screen1
    1. Title=Space Invaders
  2. Drawing and Animation > Canvas > Canvas1
    1. BackgroundColor=Black
  3. Drawing and Animation > Ball > ba_Bullet
    1. PaintColor=Green
    2. Radius=8
  4. Drawing and Animation > ImageSprite > is_Rocket
    1. Picture=rocket.png
  5. Drawing and Animation > ImageSprite > is_Saucer
    1. Picture=saucer.png
  6. Layout > HorizontalArrangement > ha_Score
  7. User interface > Label > la_Score
    1. Text=Score:
  8. User interface > Label > la_ScoreValue
    1. Text=0
  9. User interface > Button > bu_Reset
    1. Text=Reset

Componenti non visibili


  1. Sensing > Clock > Clock1
    1. On, On, 3000

Blocchi


All’apertura si imposta il proiettile come invisibile

Il razzo si muove se trascinato

Alla fine del tocco del razzo parte il proiettile

Se il proiettile finisce sul fondo scompare

Se il proiettile colpisce il disco volante: scompare, aumenta il punteggio, il disco volante si sposta in posizione casuale

Il disco si sposta ogni 3 secondi

Il tasto Reset azzera il punteggio




Miglioramenti

  1. Esplosione
  2. Vibrazione, Suoni
  3. Movimento continuo del disco volante
  4. Finché il proiettile non raggiunge il fondo…

Get the Gold

http://appinventor.mit.edu/explore/ai2/get-gold


GUI


Componenti


  1. Screen > Screen1
    1. Title=Get the Gold
  2. Drawing and Animation > Canvas > Canvas1
  3. Drawing and Animation > ImageSprite > is_Pirate
    1. Picture=pirateship.jpeg
    2. Speed=10
  4. Drawing and Animation > ImageSprite > is_Gold1
    1. Picture=goldcoin.jpeg
  5. Drawing and Animation > ImageSprite > is_Gold2
    1. Picture=goldcoin.jpeg
  6. Drawing and Animation > ImageSprite > is_Gold3
    1. Picture=goldcoin.jpeg
  7. Drawing and Animation > ImageSprite > is_Gold4
    1. Picture=goldcoin.jpeg
  8. Drawing and Animation > ImageSprite > is_Gold5
    1. Picture=goldcoin.jpeg
  9. User interface > Button > bu_Reset
    1. Text=Reset

Componenti non visibili


  1. Sensing > Clock > Clock1
    1. On, On, 2000

Blocchi


Le 5 monete d’oro cambiano posizione ogni 2 secondi

Se la nave dei pirati colpisce una moneta la fa scomparire

Il giocatore indirizza i pirati verso le monete con un tocco veloce

La nave dei pirati rimbalza se tocca il bordo

Con il tasto Reset ritornano visibili le 5 monete

Mole Mash


GUI



Componenti


  1. Screen > Screen1
    1. Title=Mole Mash 1
  2. Drawing and Animation > Canvas > Canvas1
    1. Height=300
    2. Width=Fill parent
  3. Drawing and Animation > ImageSprite > is_Mole
    1. Picture=mole.png
  4. User Interface > Button > bu_Reset
    1. Text=Reset
  5. Layout > HorizontalArrangement > ha_Hits
    1. Layout > Label > la_Hits
      1. Text=Hits:
    2. Layout > Label > la_HitsCount
      1. Text=0
  6. Layout > HorizontalArrangement > ha_Misses
    1. Layout > Label > la_Misses
      1. Text=Misses:
    2. Layout > Label > la_MissesCount
      1. Text=0

Componenti non visibili


  1. Media > Clock > Clock1
    1. On, On, 1000
  2. Media > Sound > Sound1

Blocchi


La talpa occupa una posizione casuale

… appena parte l’applicazione

… e ogni secondo

Ogni volta che si tocca lo schermo (Canvas) ed è stato toccato uno sprite (c’è solo quello della talpa…) si incrementa il contatore di successi, altrimenti quello dei fallimenti

Per ricominciare il gioco basta reimpostare i contatori a zero

Per rendere il gioco più interattivo si aggiunge la vibrazione




Il gioco è più realistico con 5 buche in posizioni fisse e la talpa che si sposta da una buca all’altra


GUI



Componenti


  1. Screen > Screen1
    1. AlignHorizontal=Center
    2. Title=Mole Mash 2
  2. Drawing and Animation > Canvas > Canvas1
    1. Height=300
    2. Width=300
  3. Drawing and Animation > ImageSprite > is_Hole1
  4. Drawing and Animation > ImageSprite > is_Hole2
  5. Drawing and Animation > ImageSprite > is_Hole3
  6. Drawing and Animation > ImageSprite > is_Hole4
  7. Drawing and Animation > ImageSprite > is_Hole5
  8. Drawing and Animation > ImageSprite > is_Mole
    1. Picture=mole.png
  9. Layout > HorizontalArrangement > ha_Score
  10. Layout > Label > la_Score
    1. Text=Score:
  11. Layout > Label > la_ScoreValue
    1. Text=0

Componenti non visibili


  1. Media > Clock > Clock1
    1. On, On, 1000
  2. Media > Sound > Sound1

Blocchi


Le 5 buche sono inserite in una lista e condividono la stessa immagine

Ogni secondo la talpa cambia buca

La talpa occupa una buca scelta a caso dalla lista

Quando si colpisce la talpa: incremento del punteggio, vibrazione, nuova posizione




Proposte

  1. tasto Reset
  2. contatore dei colpi a vuoto
  3. suoni

Magic 8-Ball

http://appinventor.mit.edu/explore/ai2/magic-8-ball


GUI



Componenti


  1. Screen > Screen1
    1. Title=Magic 8-Ball 1
  2. User Interface > Button > Button1
    1. Image=image_8_ball.jpg
  3. User Interface > Label > Label1
    1. Text=Ask the Magic 8-Ball a question
  4. User Interface > Label > Label2
    1. Text=Touch the Magic 8-Ball to receive yor answer

Componenti non visibili


  1. Media > Player > Player1
    1. Source=Clinking_Teaspoon.mp3

Clinking_Teaspoon.mp3 / Cha_Ching.mp3


Blocchi


Crea una lista con 8 frasi fatte

Ogni volta che la palla viene toccata viene emesso un suono e appare una frase a caso




Per utilizzare la palla magica è sufficiente agitare il dispositivo (tramite AccelerometerSensor).
Button viene sostituito da Image.


GUI



Componenti


  1. Screen > Screen1
    1. Title=Magic 8-Ball 2
  2. Draw and Animation > Image > Image1
    1. Picture=image_8_ball.jpg
  3. User Interface > Label > Label1
    1. Text=Ask the Magic 8-Ball a question
  4. User Interface > Label > Label2
    1. Text=Touch the Magic 8-Ball to receive yor answer

Componenti non visibili


  1. Sensing > AccelerometerSensor > AccelerometerSensor1
  2. Media > Player > Player1
    1. Source=Clinking_Teaspoon.mp3

Blocchi


Sostituisce l’evento del pulsante




Miglioramenti

  1. Grassetto, corsivo, font, colori, …
  2. Animazione della palla (rotazione)
  3. Un numero per ogni frase
  4. TextToSpeech per pronunciare la frase

Android Mash

http://www.appinventor.org/content/ai2apps/simpleApps/androidMash


GUI



Componenti


  1. Screen > Screen1
    1. Title=Android Mash 1
  2. Draw and Animation > Canvas > Canvas1
    1. BackgroundImage=androidblock2.png
    2. Height=400
    3. Width=Fill parent
  3. Draw and Animation > ImageSprite > ImageSprite_Android
    1. Picture=Android_teacher.svg.png

Componenti non visibili


  1. Sensors > Clock > Clock1
  2. Media > Sound > Sound1

Blocchi


La procedura moveRandom sposta l’immagine di Android sullo schermo in modo casuale

La procedura viene chiamata quando parte l’applicazione e ad ogni segnale del timer (1000 ms = 1 s)

Quando l’immagine viene colpita si ottiene una vibrazione (500 ms = 0.5 s)




Gestione del punteggio, fine del gioco, nuovo gioco


GUI



Componenti


  1. Screen > Screen1
    1. AlignHorizontal=Center
    2. BackgroundColor=Black
    3. Title=Android Mash 2
  2. Draw and Animation > Canvas > Canvas1
    1. BackgroundImage=androidblock2.png
    2. Height=400
    3. Width=Fill parent
  3. Draw and Animation > ImageSprite > ImageSprite_Android
    1. Picture=Android_teacher.svg.png
  4. Layout > HorizontalArrangement > HorizontalArrangement1
  5. User Interface > Label > Label_Score1
    1. Text=Score:
  6. User Interface > Label > Label_Score2
    1. Text=0
  7. User Interface > Button > Button_Reset
    1. Shape=rounded
    2. Text=New Game
    3. TextColor=Blue

Componenti non visibili


  1. Sensors > Clock > Clock1
  2. Media > Sound > Sound1
  3. Media > TextToSpeech > TextToSpeech1

Blocchi


Con il pulsante New Game si fa ripartire il gioco: punteggio a zero e timer attivato

Quando viene colpito il robot: vibrazione, il punteggio aumenta di 1, se il punteggio è arrivato a 5 si ferma il timer (e il robot…) e si sente un messaggio di vittoria

PaintPot


GUI



Componenti


  1. Screen > Screen1
    1. Title=PaintPot 1
  2. Layout > HorizontalArrangement > HorizontalArrangement1
    1. Width=Fill parent
  3. User Interface > Button > Button_Red
    1. BackgroundColor=Red
    2. Text=Red
  4. User Interface > Button > Button_Green
    1. BackgroundColor=Green
    2. Text=Green
  5. User Interface > Button > Button_Bue
    1. BackgroundColor=Blue
    2. Text=Blue
    3. TextColor=White
  6. Drawing > Canvas > Canvas1
    1. BackgroundImage=kitty.png
    2. Height=300
    3. Width=Fill parent
  7. User Interface > Button > Button_Wipe
    1. Text=Wipe

Componenti non visibili



Blocchi


Cambiare il colore di Canvas

Touch: toccando la figura si disegna un cerchio di raggio 5, del colore precedentemente selezionato

Drag: trascinando il dito sulla figura si ottiene una striscia colorata

Wipe: pulisce tutti i disegni




Cambiare la dimensione dei cerchi colorati


GUI



Componenti


  1. Screen > Screen1
    1. Title=PaintPot 2
  2. Layout > HorizontalArrangement > HorizontalArrangement1
    1. Width=Fill parent
  3. User Interface > Button > Button_Red
    1. BackgroundColor=Red
    2. Text=Red
  4. User Interface > Button > Button_Green
    1. BackgroundColor=Green
    2. Text=Green
  5. User Interface > Button > Button_Bue
    1. BackgroundColor=Blue
    2. Text=Blue
    3. TextColor=White
  6. Drawing > Canvas > Canvas1
    1. BackgroundImage=kitty.png
    2. Height=300
    3. Width=Fill parent
  7. Layout > HorizontalArrangement > HorizontalArrangement2
  8. User Interface > Button > Button_Wipe
    1. Text=Wipe
  9. User Interface > Button > Button_Big
    1. Text=Big Dots
  10. User Interface > Button > Button_Small
    1. Text=Small Dots

Componenti non visibili



Blocchi


Tramite i 2 pulsanti Big… e Small… si imposta la variabile dotSize, il raggio dei cerchi.
Le dimensioni sono fissate tramite 2 variabili (costanti) globali.





Nel disegno del cerchio il raggio dipende dalla variabile globale dotSize




Cambiare l’immagine da truccare


GUI



Componenti


  1. Screen > Screen1
    1. AlignHorizontal=Center
    2. Title=PaintPot
  2. Layout > HorizontalArrangement > HorizontalArrangement1
  3. User Interface > Button > Button_Red
    1. Text=Red
  4. User Interface > Button > Button_Green
    1. Text=Green
  5. User Interface > Button > Button_Bue
    1. Text=Blue
    2. TextColor=White
  6. Drawing > Canvas > Canvas1
    1. BackgroundImage=kitty.png
    2. Height=300
    3. PaintColor=Red
    4. Width=Fill parent
  7. Layout > HorizontalArrangement > HorizontalArrangement2
  8. User Interface > Button > Button_Take
    1. Text=Take Picture
  9. User Interface > Button > Button_Wipe
    1. Text=Wipe
  10. User Interface > Button > Button_Big
    1. Text=Big Dots
  11. User Interface > Button > Button_Big
    1. Text=Small Dots

Componenti non visibili


  1. Media > Camera > Camera1

Blocchi


Tramite il pulsante Take Picture si aziona la fotocamera

La foto appena scattata diventa lo sfondo di Canvas




Proposte


  1. La dimensione dei cerchi e il loro colore non sono visibile finché non si disegna qualcosa: aggiungi la visualizzazione delle variabili
  2. La dimensione dei cerchi è fissata a 2 valori: aggiungi uno cursore per modificarla in modo continuo

Ball Bounce

http://appinventor.mit.edu/explore/sites/all/files/hourofcode/BallBounceTutorial.pdf


GUI



Componenti


  1. Screen > Screen1
    1. Scrollable=No
    2. Title=Ball Bounce
  2. Drawing and Animation > Canvas > Canvas1
    1. Height=Fill Parent
    2. Width=Fill Parent
  3. Drawing and Animation > Ball > Ball1
    1. Radius=15

Componenti non visibili



Blocchi


Quando la palla viene lanciata, trascinata, aggiorna la velocità e la direzione con i parametri dell’evento

Quando la palla tocca il bordo rimbalza