Functie 1: Mol bewegen

Het bewegen van de mol

In de vorige programma’s/apps  heb je gebruik kunnen maken van vooraf ingestelde commando’s. Om een ImageSprite te kunnen laten bewegen moeten we een aantal procedures zelf aanmaken. We gaan een procedure aanmaken die ervoor zorgt dat de mol willekeurig gaat bewegen. We geven het de naam MoveMole en we starten de game ermee.

Uitleg dimensies

Om te begrijpen hoe de mol beweegt moeten we een beetje wegen hoe de grafische kant van Android werkt. Het Canvas kan worden voorgesteld als een veld met een horizontale (X) en een verticale (Y) as, met bijbehorende X en Y coördinaten. De X coördinaat verhoogt bij beweging naar rechts, de Y coördinaat verhoogt bij de beweging naar beneden, niet helemaal zoals bij wiskunde dus. De linkerbovenhoek wordt als oorsprong gezien, de coördinaten zijn daar (0,0). Om de maximale waardes te bepalen voor de mol op het scherm, hebben we de Width en Height waarde nodig van Canvas1 en Mole. Width en Height waardes van Mole zijn bepaald in de eigenschap van het plaatje wat geupload is. Width x Height van Mole.png is 36x42 pixels. Van Canvas1 weten we dat de Height door ons zelf ingesteld is op 300 pixels, Width is ingesteld als Fill parent en is 200 pixels. Staat de mol links tegen de kant dan is X = 0, staat de mol tegen de rechterkant dan is X = 200-36 = 164. Staat de mol boven, dan is Y = 0, staat de mol onder, dan is Y = 300 – 42 = 258. De maximale waardes voor X en Y zijn hiermee bepaald; X = 0-164 Y = 0-258. Let op, we laten App Inventor dit zelf uitrekenen.

Aanmaken procedure MoveMole

Selecteer Blocks Editor. Sleep uit Built-in > Procedures een ‘to procedure do’ blok de viewer in. Hernoem ‘procedure’ in MoveMole. We willen de Mole laten bewegen dus uit Mole een ‘call Mole.moveTo’ in het slot bij do. In de sockets bij x en y plaatsen we uit Math de ‘random integer from’ blokken. De waardes van 1 en 100 moeten we aanpassen. In beide gevallen maak je van 1 > 0. Het blokje 100 gooi je weg (prullenbak slepen). Daarvoor in de plaats stop je in beide gevallen uit Math het rekenblokje voor een aftreksom. Nu moet je de rekensom compleet maken. Bij X is dat ‘Canvas1.With’ – ‘Mole.With’, voor Y is dat ‘Canvas1.Height’ – ‘Mole.Height’ . Dat ziet er als volgt uit:

Roep MoveMole op als de app start

Omdat het voor programmeurs zo gebruikelijk is om dingen bij aanvang te laten starten is er een blokje voor ‘when Screen1.Initialize’. Schuif er vervolgens ‘call MoveMole’ uit Procedures in.

Roep MoveMole elke seconde op

In Designer heb je Clock1 aangemaakt. In Properties staat TimerInterval standaard op 100 milliseconden ingesteld. Dit heb je niet veranderd, dus kun je het zo laten. Kijk je in Designer? Schakel dan weer naar Blocks en sleep uit Clock1 ‘when Clock1.Timer’ en de do-socket met ‘call MoveMole’.