Ping Pong - Teknologiskolen

Ping Pong app’en er et lille spil, hvor en bold bevæger sig over skærmen, og man skal forhindre den i at falde ned i bunden.

Start ny app

Du skal lave et nyt projekt og kald det “PingPong”. Når skærmen vises, kan du se at øverst på titelbaren (på mobilen) står der “Screen1”, dette vil vi gerne fjerne. Du vælger Screen1 under Components, og i Properties helt ude til højre, kan du fjerne teksten under Title. Du kan også vælge at skrive navnet på din app i titlen.

Opgave 1

Opret nyt projekt – “PingPong”.
Fjern “Screen1” i titelbaren.

Bevæge sig (Ball)

Som det første skal vi have en bold til at flytte sig rundt på skærmen. Til det skal du bruge et Canvas, som du finder under Drawing and Animation i venstre side. Træk et canvas ud på skærmen. Ændre Height og Weight for canvas til Fill Parent. Tilføj herefter en Ball og træk det oven på Canvas. Bolden er ret lille til at starte med, så vi vil gerne gøre den lidt større. Vælg bolden under Components og ændre Radius fra 5 til 50 (du kan også vælge en anden størrelse som du synes er passende).

I Properties for bolden, er der 3 ting som gør at bolden kan bevæge sig; Heading, Interval og Speed. Heading bestemmer hvilken retning, bolden skal bevæge sig. Retningen angives som tal;

0 = Til højre
90 = Op
180 = Til venstre
270 = Ned

Interval og Speed bestemmer tilsammen hvor hurtigt bolden skal flytte sig. Interval angiver hvor ofte bolden skal bevæge sig, målt i millisekunder, for eksempel, hvis du gerne vil have bolden skal bevæge sig 2 gange i sekundet skal du sætte Interval til 500. Speed angiver hvor mange pixels bolden skal bevæge sig hver gang den flytter sig.

For at bolden skal bevæge sig glat hen over skærmen, kan du sætte Interval = 50 og Speed = 5, eller Interval = 10 og Speed = 1.

Opgave 2

I Designer:

Tilføj et Canvas.
Ændre Height og Weight for Canvas til at være Fill Parent.
Tilføj en Ball.
Ændre Radius for bolden til at være 50 i stedet for 5 under Properties.
Ændre Heading til 270 for bolden under Properties.
Ændre Speed til 1 for bolden under Properties.

TEST: Du kan nu se at bolden bevæger sig lige så stille ned ad på skærmen. Prøv at ændre på enten Heading, Interval eller Speed og se hvad ændringerne gør.

Ændre retning når kanten rammes

Nu bevæger bolden sig lige ned ad på skærmen, men når den når bunden af skærmen, stopper den. Nu skal vi have bolden til at bevæge sig i en anden retning når den støder mod kanten. Skift til Blocks siden. Her kan vi ved hjælp af 3 blokke. Når man vælger Ball1 i venstre side har den forskellige muligheder, bl.a. en blok hvor man kan bestemme hvad bolden skal gøre når den rammer en kant (EdgeReached). Ligeledes har bolden en blok som bestemmer at den skal ændre retning (bounce).

Vælg Ball1 og find den gule kode-blok “when Ball1.EdgeReached” og træk den ind på kode området. Vælg herefter den lilla kode-blok “call Ball1.Bounce” og træk den ind i den gule blok. Til sidst skal vi tilføje at bolden skal ændre retning når den rammer kanten. Tryk på den orange ord “edge” i den gule blok, der kommer 2 muligheder frem (get og set), vælg “get edge” og sæt den sammen med den lilla blok.

Opgave 3

I Blocks:

Ball1 – Vælg kode-blokken “when Ball1.EdgeReached”.
Ball1 – Vælg kode-blokken “call Ball1.Bounce” og sæt den ind i den første blok.
Tryk på det orange “egde”, vælg “get edge” og træk det ud for edge i den lilla blok.

TEST: Du kan nu se at bolden bevæger sig ned ad, og når den rammer kanten skifter bolden retning og bevæger sig op.

Bevæg sig tilfældigt

Næste opgave er at tilføje en start og stop knap for bolden, samt at bolden skal bevæge sig i en tilfældig retning frem for lige ned og op.

I Designer: Start med at ændre speed for bolden til at være 0. Tilføj et Horizontal Arrangement under Layout og træk det hen over Canvas. Tilføj 2 knapper til layoutet. Omdøb den ene knap til at hedde “StartKnap” og ændre teksten på knappen til “Start”. Omdøb den anden knap til at hedde “StopKnap” og ændre teksten op knappen til “Stop”.

I Blocks: Når man trykker på start knappen skal bolden begynde at bevæge sig i en tilfældig retning ned ad. Du starter derfor med at finde kode-blokken “when StartKnap.Click” og trækker den ud i kode området. For at bolden kan bevæge sig på skærmen, skal du finde kode-blokken “set Ball1.Enabled to” for Ball1. Under Logic kan du tilføje “true” til blokken. Det samme kan gøres for “StopKnap”, dog med false i stedet for true.

Når man trykker på startknappen, starter bolden med at bevæge sig der hvor den stoppede. Vi vil gerne have at bolden starter fra det samme sted hver gang, derfor skal bolden flytte sig tilbage til startpunktet, når man trykker på StartKnap. Vælg Ball1 i venstre side og find kode-blokken “call Ball1.Move to” og sæt den under “set Ball1.Enabled to” for i “when StartKnap.Click”. Hertil skal du bestemme en x værdi og en y værdi. X værdien skal angive at vi vil have bolden i midten af skærmen, og Y værdien skal angive at vi vil have den i toppen. Derfor skal du under Math i venstre side finde kode-blokken som har et tomt rum på hver side af “/” og sætte det ud for X. I det tomme rum på venstre side af “/” skal du tilføje kode-blokken “Canvas1.Width”, som du finder under Canvas1 i venstre side. I det tomme rum på højre side af “/” skal du tilføje et tal “2”, som du finder under Math. Ud for Y skal du sætte et tal “0” som angiver at det er i toppen.

Nu har bolden mulighed for at bevæge sig når man trykker på Start, og den kan ikke bevæge sig når man trykker på Stop. Så nu skal du bestemme Heading, Interval og Speed.

For Ball1, skal du finde kode-blokken “set Ball1.Heading to” og trække den ind under “call Ball1.Move to”. Vi vil gerne have at bolden skal bevæge sig i en tilfældig retning ned ad. På billedet herunder, kan du se at tal mellem ca. 200 og 340 vil få bolden til at bevæge sig ned.

Derfor skal vi have retningen (heading) til at være et tilfældigt tal mellem 225 og 315. Under Math i venstre side finder du kode-blokken “random integer from 1 to 100”, den skal du trække ud og sætte ud for “set Ball1.Heading to”. Ændre 1 til at være 225 i stedet og 100 til 315. Nu er retningen bestemt for bolden og vi mangler at bestemme hastigheden. Tilføj kode-blokken “set Ball1.Interval to” og sæt et tal “50” ud for. Tilføj kode-blokken “set Ball1.Speed to” og sæt et tal “5” ud for.

Opgave 4

I Designer:

Ændre Speed for bolden til at være 0
Tilføj et Horizontal Arrangement layout. Placer det over Canvas
Tilføj en knap. Ændre navnet til StartKnap og ændre teksten til “Start”
Tilføj en knap. Ændre navnet til StopKnap og ændre teksten til “Stop”

I Blocks:

StartKnap – Vælg kode-blokken “when StartKnap.Click”.
Ball1 – Vælge kode-blokken “set Ball1.Enabled to”.
- Logic – Vælg kode-blokken “true”. Placer den ud for “to” for den forrige blok.
Ball1 – Vælg kode-blokken “call Ball1.Move to”. Placer den under “set Ball1.Enabled to”.
- Ud for x:
  - Math – Vælg kode-blokken med 2 tomme rum på hver side af “/”.
  - Canvas1 – Vælg kode-blokken “Canvas1.Width”. Placer den i det første tomme rum, før “/”.
  - Math – Vælg kode-blokken 0 og ændre tallet til 2. Placer den i det andet tomme rum, efter “/”.
- Ud for y:
  - Math – Vælg kode-blokken 0.
Ball1 – Vælg kode-blokken “set Ball1.Heading to”
- Math – Vælg kode-blokken “random integer from 1 to 100”.
- Ændre 1 til 225.
- Ændre 100 til 315.
Ball1 – Vælg kode-blokken “set Ball1.Interval to”. Tilføj en tal-blok med 50 ud for.
Ball1 – Vælg kode-blokken “set Ball1.Speed to”. Tilføj en tal-blok med 5 ud for.
StopKnap – Vælg kode-blokken “when StopKnap.Click”.
Ball1 – Vælge kode-blokken “set Ball1.Enabled to”.
- Logic – Vælg kode-blokken “false”. Placer den ud for “to” for den forrige blok.

TEST: Du kan nu se at bolden ikke bevæger sig når app’en starter. Når du trykker på “Start” knappen begynder bolden at bevæge sig. Trykker du på “Stop” knappen holder bolden op med at bevæge sig igen. Hvis du trykker på “Start” knappen igen, flytter bolden sig op i toppen og midten af skærmen og bolden begynder at bevæge sig igen.

Kollision

Nu skal der tilføjes en plade i bunden, som brugeren skal kunne bevæge. Til at starte med tilføjer vi bare pladen, og laver kollisionen for bolden, sådan at når bolden rammer pladen, vil den skifte retning.

I Designer: Under Drawing and animation i venstre side finder du et ImageSprite, træk en over på canvas. Vælg dit ImageSprite under Components (Image_Sprite1), tilføj billedet herunder, som billede for ImageSprite.

I Blocks: Ligesom bolden havde en metode til når den ramte kanten, har den også en metode til når den kollidere med noget andet. Vælg derfor “when Ball1.Collided With” og træk den ind i kode området. Inde i kode-blokken skal du tilføje “set Ball1.Heading to” for Ball1. Denne blok ændre jo på retningen, og derfor er det denne vi skal bruge.

Vi vil gerne have bolden skal ændre retning, når den rammer pladen. Fra billedet (Bevæge sig tilfældigt) kan du se at bolden kan bevæge sig i en retning fra 0 til 360. For at ændre retning skal vi derfor trække retningen som bolden har fra 360 for at få en ny retning. Derfor skal du finde “-” under Math som har 2 tomme rum på hver side af “-“. På den venstre side skal du tilføje et tal “360” og på den højre side skal du tilføje kode-blokken “Ball1.Heading”.

Opgave 5

I Designer:

Tilføj et ImageSprite – under Drawing and animation
Tilføj et billede til din ImageSprite (hent paddle.gif oven over)

I Blocks:

Ball1 – Vælg kode-blokken “when Ball1.Collided With”.
Ball1 – Vælg kode-blokken “set Ball1.Heading to”.
- Math – Vælg kode-blokken med “-” mellem to tomme rum.
- Math – Indsæt 360 i det første tomme rum før “-“.
- Ball1 – Vælg kode-blokken “Ball1.Heading”. Placer det i det andet tomme rum efter “-“.

TEST: Du kan nu se at bolden ændre retning, når den rammer pladen (ImageSprite).

Bevæge sig (ImageSprite)

Nu skal vi have pladen til at bevæge sig mod højre eller venstre, når man trykker på den. Først skal vi have pladen tl at være i bunden af skærmen. Da app’en kan spilles på forskellige størrelse mobiler eller tablets, skal vi angive at pladen skal være i bunden af skærmen. Dette gøres i Blocks, hvor vi skal angive at pladen skal placeres i bunden af skærmen, når app’en starter op.

Find Screen1 i venstre side (Blocks) og træk kode-blokken “when Screen1.Initialize” ind i kode området. Denne blok er en metode til at angive ting som skal ske, når app’en starter. Heri skal du tilføje “call Image_Sprite1.Move to” for Image_Sprite1. Vi vil gerne have pladen skal være i midten af skærmen, ligesom med boldens placering ved start. Ud for X skal du derfor igen tilføje kode-blokken med “/” under Math. I det første tomme rum tilføjer du kode-blokken “Canvas1.Width” og i det andet tomme rum tilføjer du et tal “2”. Når pladen skal placeres i bunden af skærmen, skal vi have højden på skærmen og trække lidt fra, sådan at der er lidt plads under pladen. Ud for Y skal du tilføje kode-blokken “-” under Math. I det første tomme rum tilføjer du kode-blokken “Canvas1.Height”, og i det andet tomme rum skal du tilføje et tal “100”. Du kan prøve dig lidt frem, vil du have pladen til at være længere nede på skærmen, ændre du 100 til et lavere tal. Ligeledes, hvis du vil have pladen til at være højere oppe på skærmen, ændre du 100 til at være et højere tal.

Nu skal vi have pladen til at følge fingeren når man trækker den til venstre eller højre. Derfor skal du for dit Image_Sprite1 finde kode-blokken “when Image_Sprite1.Dragged” og træk den ud på kode området. Tilføj kode-blokken “call Image_Sprite1.Move to”. Fordi pladen skal følge fingeren til højre eller venstre skal du have den “nuværende” X værdi. Derfor skal du tilføje “get CurrentX” ud for X. Ud for Y skal du tilføje “Image_Sprite1.Y”, som er den y værdi pladen har, og denne er en fast værdi som ikke skal ændre sig.

Opgave 6

I Blocks:

Screen1 – Vælg kode-blokken “when Screen1.Initialize”. Træk det ud på kode området.
Image_Sprite1 – Vælg kode-blokken “call Image_Sprite1.Move to”. Placer den under den forrige blok.
- Ud for X:
  - Math – Vælg kode-blokken med 2 tomme rum på hver side af “/”.
  - Canvas1 – Vælg kode-blokken “Canvas1.Width”. Placer den i det første tomme rum, før “/”.
  - Math – Vælg kode-blokken 0 og ændre tallet til 2. Placer den i det andet tomme rum, efter “/”.
- Ud for Y:
  - Math – Vælg kode-blokken med “-” mellem 2 tomme rum.
  - Canvas1 – Vælg kode-blokken “Canvas1.Height”. Placer den i det første tomme rum, før “-“.
  - Math – Vælg kode-blokken 0 og ændre tallet til 100. Placer den i det andet tomme rum, efter “-“.
Image_Sprite1 – Vælg kode-blokken “when Image_Sprite1.Dragged”. Træk den ud på kode området.
Image_Sprite1 – Tilføj kode-blokken “call Image_Sprite1.Move to”.
- Ud for X – Tilføj kode-blokken “get CurrentX”.
- Ud for Y – Tilføj kode-blokken “Image_Sprite1.Y”.

TEST: Du kan nu flytte pladen til højre eller venstre.

Point og Gameover

Prøv nu selv uden hjælp. I kan også lege med størrelsen på bolden og farten (interval og speed).

Hints:

Brug en variable til at holde styr på point
Brug en label til vise pointene og “gameover”.
Når man skal “lægge” tekst sammen med tal bruges en join
if/else til gameover
Man ved at bolden rammer bunden af skærmen når edge = -1