L'objectiu d'aquest CodeLab és conèixer les possibilitats de la programació visual basada en blocks per a descriure algorismes.

La programació estructurada es basa en les estructures de Seqüència, Selecció, Iteració i Recursió de blocs de sentències. Aquestes estructures i blocs es poden representar en diversos formats. El més habitual és el textual, amb els llenguatges de programació, però també es possible descriure'ls mitjançant la composició de blocks, de forma semblant a un puzzle.

En aquest CodeLab desenvoluparem un petit joc, l'SpaceInvaders, utilitzant la plataforma de desenvolupament d'aplicacións mòbils AppInventor, creada al MIT (Massachussetts Institute of Technology).

Accedeix al web http://ai2.appinventor.mit.edu i registra't.

Fes clic al botó per a crear un nou projecte anomenat SpaceInavaders

El projecte s'obrirà de forma automàtica:

Per a llançar les apps en el teu dispositiu mòbil necessitaràs la App MIT AI2 Companion. La pots instal·lar de la Play Store.

A la part esquerra veuràs la paleta de components, organitzada en grups. Els components s'afegeixen a la App arrossegant-los de la paleta a la pantalla del mòbil.

Necessitaràs aquestes dues imatges, desa-les al teu ordinador amb els noms alien.png i ship.png

Afegeix els següents components, i realitza en cadascun l'Acció que s'indica:

Component

Grup de la paleta

Nom que li has de posar

Propòsit del component

Acció

Canvas

Drawing and Animation

Canvas1

El fons on posarem els sprites

  • Canvia la propietat Width a FillParent
  • Canvia la propietat Height a 300 píxels.
  • Canvia la propietat BackgroundColor a Black

ImageSprite

Drawing and Animation

ShipSprite

La nau del joc

  • Carrega la image ship.png i estableix la propietat Picture a ship.png
  • Estableix la propietat Y a 230

ImageSprite

Drawing and Animation

AlienSprite

L'alien del joc

  • Carrega la image alien.png i estableix la propietat Picture a alien.png

BallSprite

Drawing and Animation

Bullet

La bala que dispara la nau

  • Canvia PaintColor a Green
  • Canvia Radius a 0

Clock

Sensors

Clock1

Usarem el cronòmetre per moure l'alien cada cert temps

  • Canvia TimerInterval a 3000

Label

User Interface

ScoreLabel

Contindrà la puntuació actual

  • Canvia Text a 0

Button

User Interface

ResetButton

Reiniciarà el joc per a poder tornar a jugar

  • Canvia Text a Reset

Un cop afegits els components ha de quedar una estructura així:

Prova la App seleccionant Connect > AI Companion

Al teu dispositiu mòbil inicia la MIT AI2 Companion i escaneja el CodiQR.

Per programar el comportament dels objectes canvia la vista a Blocks:

Per a afegir un Block, selecciona el component i arrossega el Block a la finestra de blocs.

Moviment de la nau

En aquest joc, l'usuari mourà la nau d'un costat a un altre. Això significa que només canviarem la direcció X del sprite de coets. Per fer-ho, utilitzarem el gestor d'esdeveniments ShipSprite.Dragged . Quan el coet s'arrossega, ajustarem la propietat X per ser la currentX on hem arrossegat al sprite.

Selecciona el component ShipSprite i arrossega el block ShipSprite.Dragged.

Dintre d'aquest block arrossega el block ShipSprite.Set I uneix-lo amb el block Variables.Get

Disparant la bala

Hi ha diverses funcions que volem que tingui la bala en aquest joc. Volem que dispari des de la nau, xoquin ambl'alien i siga invisible després de la col·lisió i abans de ser disparat.

Comencem utilitzant el bloc Screen1.initialize . Quan s'inicialitza la pantalla, programarem la bala com a invisible. Ho fem fent la propietat de visibilitat de la bala a False.

Arrosaga el block Screen1.Initialize, Afegeix-li el block Bullet.Set i uneix-lo amb el block Logic.False

A continuació, volem assegurar-nos que la bala torna a aparèixer quan disparem des de la nau. Quan toquem la nau, volem que la bala comenci a moure's cap a l'alien. Ho farem utilitzant el gestor d' esdeveniments ShipSprite.Touched . Quan es toca la nau, no només volem fixar la bal en visible, sinó que també volem establir la velocitat i la direcció de la bala. La direcció és un valor de 0 a 360 que indica quina direcció ha d'orientar al sprite. 0/360 es troba a l'esquerra, 90 cap amunt, 180 a la dreta i 270 avall. La velocitat es mesura en píxels/seg.

L'últim que hem de programar és el que passa quan la bala colpeja l'alien. Utilitzarem el controlador d'esdeveniments Bullet.CollidedWith . Aquest esdeveniment s'executa sempre que la bala xoca amb un altre sprite. Atès que la nau es troba fixada en una posició Y al final de la pantalla, la bala no col·lisionarà mai amb la nau i només ho farà amb el plat. Quan es produeixi la col·lisió, volem que succeeixin dues coses. 1. La puntuació hauria d'augmentar en 1. 2. La bala hauria de ser invisible.

Si has provat el joc, t'hauràs adonat que una vegada es dispara la bala, no deixa disparar de nou. Hem de programar la bala per posar-la just en front de la nau quan el disparem. Podem fer-ho mitjançant el bloc Bullet.MoveTo .

Modifica el block ShipSprite.Touched i afegeix-li el block Bullet.MoveTo

Potser us heu adonat que si us no atinem l'alien, la bala es desplaça a la part superior de la pantalla i hi queda enganxada fins que disparem de nou. Per fer que la bala desaparegui quan arribi a la vora superior del llenç, necessitem el gestor d' esdeveniments Bullet.EdgeReached .

Moviment de l'alien

Fem el joc una mica més difícil! Ara, quan la bala xoca amb l'alien, canviem la seva ubicació. L'alien mantindrà el mateix valor Y, de manera que només haurem de canviar el X. Podem fer-ho mitjançant el bloc aleatori.

Modifica el block Bullet.CollidedWith

Per fer-ho encara més difícil, també canviarem la posició de l'alien quan el temporitzador acaba.

Reiniciar el joc

De vegades, els usuaris poden voler reiniciar el joc i restablir la seva puntuació. Quan això succeeix, haurem de tornar la puntuació a 0.

Aquí teniu el programa complet SpaceInvaders