Programming is Fun!

Lab1     Lab2     Lab3     Lab4     Lab5     Lab6     Lab7     

Lab 1 – My First App

Go to Top __________ Help

1. Click the following link to open Thunkable.

https://thunkable.com/#/

2. Click on Log In.

3. Sign in with your Google Account.

4. Create a new project by clicking “Create New App” icon.

5. Name your project as SpaceInvader and click Create.

6. Select Screen1 from the App Tree and click on Rename button. Rename the screen as “GameScreen”.

7. Change the BackgroundColor to Black.

8. Click in BackgroundPicture field and select Type in URL

9 Enter the following in URL into BackgroundPicture.

https://icode2019posbchallenge.files.wordpress.com/2021/06/space.jpg

10. Click on Live Test to see your App.

11. Congratulations. You have created your very first App.


Lab 2 – Add Game Components

Go to Top __________ Help

1. Drag a Label from the App Component to the screen.

2. Rename Label as Score by clicking rename button.

3. Change Score Text to 0 in Properties Panel of Score.

4. Change Color of Score to White in Properties Panel of Score.

5. Drag a Canvas from the App Component to the screen.

6. In the App Tree, drag the Canvas below Score.

7. Drag a Row from the App Component to the bottom of the screen.

8. Drag 2 Buttons from the App Component into Row1 of the screen.

9. Select Row1 in App Tree and change Horizontal Alignment to space-around.

10. Select Row1 in App Tree and Select Fit contents for Height property of Row1.

11. Select Left button, Rename to LeftButton and change Text to Left.

12. For LeftButton, select Absolute Size for Width and type in 100.

13. Select Right Button, Rename as RightButton, xhange Text to Right, select Absolute Size for Width and type in 100.

14. Click on Live Test to see your App.

15. Congratulations, you have added you game App components.


Lab 3 – Add Game Sprites

Go to Top __________ Help

1. Select Stage1 from App Tree and enter the following URL in Background Picture.

https://icode2019posbchallenge.files.wordpress.com/2021/06/space.jpg

2. Click Add.

3. Select Sprite_Type1 in App Tree, selected Type in URL and type in the following URL into Picture LIst. Click Add.

https://icode2019posbchallenge.files.wordpress.com/2021/06/start.png

4. Select Sprite_Type1 in App Tree, selected Type in URL and do the same as previous steps to add the following images. NOTE: Add them one by one

https://icode2019posbchallenge.files.wordpress.com/2021/06/alien_small.png
https://icode2019posbchallenge.files.wordpress.com/2021/06/green_laser.png
https://icode2019posbchallenge.files.wordpress.com/2021/06/redlaser.png
https://icode2019posbchallenge.files.wordpress.com/2021/06/spaceship.png

5. All images should be uploaded in the Picture List of Sprite_Type1.

6. Select Sprite1 from App Tree, rename to StartSprite and select https://…/Start.png for Picture Section.

7. From the Sprite Class section, drag the Sprite_Type1 icon to the bottom of the Canvas. A new sprite is added to the Canvas.

8. In the App Tree, select the newly created Sprite one and do the following:

a) Rename to SpaceshipSprite

b) Select https://…/Spaceship.png in Picture Selection

c) Type 150 in X

d) Type 400 in Y

e) Change Width to 40

9. From the Sprite Class section, drag the Sprite_Type1 icon to the top left of the Canvas. A new sprite is added to the Canvas.

10. In the App Tree, select the newly created Sprite one and do the following:

a) Rename to AlienSprite

b) Select https://…/alien_small.png in Picture Selection

c) Type 40 in X

d) Type 25 in Y

e) Change Height to 25

11. From the Sprite Class section, drag the Sprite_Type1 icon to the top of the spaceship in the Canvas. A new sprite is added to the Canvas.

12. In the App Tree, select the newly created Sprite one and do the following:

a) Rename to RedLaserSprite

b) Select https://…/redLaser.png in Picture Selection

c) Type 150 in X

d) Type 370 in Y

e) Change Height to 10

f) Change Width to 5

13. From the Sprite Class section, drag the Sprite_Type1 icon to the bottom of the alien in the Canvas. A new sprite is added to the Canvas.

14. In the App Tree, select the newly created Sprite one and do the following:

a) Rename to GreenLaserSprite

b) Select https://…/greenLaser.png in Picture Selection

c) Type 40 in X

d) Type 45 in Y

e) Change Height to 10

f) Change Width to 5

15. Click on Live Test to see your App.

16. Congratulations, you have added all your Sprite in the game App Canvas.


Lab 4 – When Game Starts

Go to Top __________ Help

1. Select Block Editor Tab.

2. Select Variable Built-in Drawers, drag the “initialize app variable name to” block to the screen and rename variable to score.

3

3. Select Math Built-in Drawers, drag the “0” block to the screen and snap it behind “rename variable score to” block. You should hear a click sound and see the “0” block in full colour.

4. Select Variable Built-in Drawers, drag the “initialize app variable name to” block to the screen and rename variable to gameRunning.

5. Select Logic Built-in Drawers, drag the “false” block to the screen and snap it behind “rename variable gameRunning to” block. You should hear a click sound and see the “false” block in full colour.

6. Select Event Built-in Drawers, drag the “When Sprite_Type1 is clicked” block to the screen. Select StartSprite instead of Sprite_Type1,

7 Select Variable Built-in Drawers, drag the “set app variable score to” block to the screen and snap it inside “when StartSprite is clicked” block. You should hear a click sound and see the “set app variable score to” block in full colour

8. Select Math Built-in Drawers, drag the “0” block to the screen and snap it behind “set variable score to” block. You should hear a click sound and see the “0” block in full colour.

9. Select Variable Built-in Drawers, drag the “set app variable to” block to the screen and snap it below “set app variable score to 0” block. Change variable to gameRunning. Select Logic Built-in Drawers, drag the “true” block to screen and snap it behind “set app variable gameRunning to” block.

10. Select Look Built-in Drawers, drag the “hide Sprite” block to the screen and snap it below “set app variable gameRunning to true” block. Change variable to StartSprite.

11. Reset AlienSprite

a. Select Motion Built-in Drawers, drag the “move Sprite to x and y” block to the screen and snap it below “hide StartSprite” block.

b. Select AlienSprite

c. type 40 in x

d. Type 25 in y

12. Reset SpaceshipSprite

a. Select Motion Built-in Drawers, drag the “move Sprite to x and y” block to the screen and snap it below ” move Alien Sprite to x 40 and y 25″ block.

b. Select SpacshipSprite

c. type 150 in x

d. Type 400 in y

13. Reset RedLaserSprite

a. Select Motion Built-in Drawers, drag the “move Sprite to x and y” block to the screen and snap it below ” move SpaceShipSprite to x 150 and y 400″ block.

b. Select RedLaserSprite

c. type 150 in x

d. Type 370 in y

14. Reset GreenLaserSprite

a. Select Motion Built-in Drawers, drag the “move Sprite to x and y” block to the screen and snap it below ” move RedLaserSprite to x 150 and y 370″ block.

b. Select GreenLaserSprite

c. type 40 in x

d. Type 45 in y

15. Set AlienSprite Speed

a. Select Motion Built-in Drawers, drag the “set Sprite’s x speed to” block to the screen and snap it below ” move GreenLaserSprite to x 40 and y 45″ block.

b. Select AlienSprite

c. Type 50 in speed

15. Set RedLaserSprite Speed

a. Select Motion Built-in Drawers, drag the “set Sprite’s x speed to” block to the screen and snap it below “set AlienSprite’s x speed to 50” block.

b. Select RedLaserSprite

c. Select y

d. Type -150 in speed

16. Set GreenLaserSprite Speed

a. Select Motion Built-in Drawers, drag the “set Sprite’s x speed to” block to the screen and snap it below “set RedLaserSprite’s y speed to -150” block.

b. Select GreenLaserSprite

c. Select y

d. Type 150 in speed

17. Display Score

a. Select Score from Component-Specific Drawers, drag the “set score’s Text to” block to the screen and snap it below -“set GreenLaserSprite’s y speed to 150” block.

b. Select Text from Built-in Drawers, drag the “join” block to the screen and snap it behind “set score’s Text to” block.

c. Replace “hello” with “Score: “

d. Drag “world” to trashcan

e. Select Variable Built-in Drawers, drag the “app variable score” block to the screen and snap it where “world” used to be.

18. Click on Live Test to see your App.

19. Congratulations, you can start your game App.


Lab 5 – Control Your Spaceship

Go to Top __________ Help

1. Select Block Editor Tab.

2. Select LeftButton from Component-Specific Drawers, drag the “when LeftButton Touch Down” block to the screen. You can put them below “when StartSprite is Clicked” block.

2. When Left Button Touch Down

a. Select Control from Built-in Drawers, drag the “if do” block to the screen and snap it inside “When LeftBurron Touch Down” block.

b. Select Variable from Built-in Drawers, drag the “app variable gameRunning” block to the screen and snap it behind if of “if do” block.

c. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to” block to the screen and snap it inside do of “if do” block.

d. Select change in place of set

e. Select SpaceshipSprite.

f. Change speed to -40.

3. When Left Button Touch Up

a. Select LeftButton from Component-Specific Drawers, drag the “when LeftButton Touch Up” block to the screen. You can put them below ” when LeftButton Touch Down” block.

a. Select Control from Built-in Drawers, drag the “if do” block to the screen and snap it inside “When LeftBurron Touch Up” block.

b. Select Variable from Built-in Drawers, drag the “app variable gameRunning” block to the screen and snap it behind if of “if do” block.

c. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to” block to the screen and snap it inside do of “if do” block.

d. Select SpaceshipSprite.

e. Change speed to 0.

4. When Right Button Touch Down

a. Select RightButton from Component-Specific Drawers, drag the “when Right Touch Down” block to the screen. You can put them below ” when LeftButton Touch Up” block.

a. Select Control from Built-in Drawers, drag the “if do” block to the screen and snap it inside “When RightBurron Touch Down” block.

b. Select Variable from Built-in Drawers, drag the “app variable gameRunning” block to the screen and snap it behind if of “if do” block.

c. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to” block to the screen and snap it inside do of “if do” block.

d. Select change in place of set

e. Select SpaceshipSprite.

f. Change speed to 40.

5. When Right Button Touch Up

a. Select RightButton from Component-Specific Drawers, drag the “when RightButton Touch Up” block to the screen. You can put them below ” when RightButton Touch Down” block.

a. Select Control from Built-in Drawers, drag the “if do” block to the screen and snap it inside “When RightButton Touch Up” block.

b. Select Variable from Built-in Drawers, drag the “app variable gameRunning” block to the screen and snap it behind if of “if do” block.

c. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to” block to the screen and snap it inside do of “if do” block.

d. Select SpaceshipSprite.

e. Change speed to 0.

6. Click on Live Test to see your App.

7. Congratulations, you can move your spaceship left and right.


Lab 6 – Hitting The Edge

Go to Top __________ Help

1. Select Block Editor Tab.

2. When Alien hits Right Edge

a. Select Events from Built-in Drawers, drag the “when Sprite collides with any edge” block to the screen. You can put them below ” when RightButton Touch Up” block.

b. Change Sprite to Alien Sprite

c. Change any edge to right edge

d. Select Motion from Built-in Drawers, drag the “move Sprite to x 100 y 100” block to the screen and snap it inside “When AlienSprite collidges with right edge” block.

e. Change Sprite to AlienSprite

f. Change x to 40

g. Select Math from Built-in Drawers, drag the “1 + 1” block to the screen and snap it in y of “move AlientSprite to” block.

h. Select Motion from Built-in Drawers, drag the “Sprite’s x” block to the screen and snap it inside the first value of “1 + 1” block.

i. Change to AlienSprite

j. Change to y

k. Change the second value of “1 + 1” block to 30

l. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to100” block to the screen and snap it below “move AlienSprite to x y” block.

m. Select AlienSprite.

n. Change speed to 50.

3. When Red Laser hits Top Edge

a. Select Events from Built-in Drawers, drag the “when Sprite collides with any edge” block to the screen. You can put them below ” when RightButton Touch Up” block.

b. Change Sprite to RedLaserSprite

c. Change any edge to top edge

d. Select Control from Built-in Drawers, drag the “if do else” block to the screen. You can put them inside “when RedLaserSprite collides with top edge” block.

e. Select Variable from Built-in Drawers, drag the “app variable gameRunning” block to the screen and snap it next to if of “if do else” block.

f. Select Motion from Built-in Drawers, drag the “move Sprite to x y” block to the screen and snap it beside do of the “if do else” block.

g. Change Sprite to RedLaserSprite

h. Type 370 for y value of “move RedLaserSprite to x y” block

h. Select Motion from Built-in Drawers, drag the “Sprite’s x” block to the screen and snap it inside x value of ” move RedLaserSprite to x y ” block.

i. Select SpaceshipSprite.

j. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to” block to the screen and snap it below “move RedLaserSprite to x y” block.

k. Select RedLaserSprite.

l. change to y speed

m. Change speed to -150.

n. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to100” block to the screen and snap it next to else of “if do else” block.

o. Select RedLaserSprite.

p. change to y speed

q. Change speed to 0.

4. When Green Laser hits Bottom Edge

a. Select Events from Built-in Drawers, drag the “when Sprite collides with any edge” block to the screen. You can put them below ” when RedLaserSprite collides with top edge” block.

b. Change Sprite to GreenLaserSprite

c. Change any edge to bottom edge

d. Select Control from Built-in Drawers, drag the “if do else” block to the screen. You can put them inside “when GreenLaserSprite collides with bottom edge” block.

e. Select Variable from Built-in Drawers, drag the “app variable gameRunning” block to the screen and snap it next to if of “if do else” block.

f. Select Motion from Built-in Drawers, drag the “move Sprite to x y” block to the screen and snap it beside do of the “if do else” block.

g. Change Sprite to GreenLaserSprite

h. Select Motion from Built-in Drawers, drag the “Sprite’s x” block to the screen and snap it inside x value of “move GreenLaserSprite to x y” block.

i. Select AlienSprite

j. Select Motion from Built-in Drawers, drag the “Sprite’s x” block to the screen and snap it inside y value of “move GreenLaserSprite to x y” block.

k. Select AlienSprite

l. Select y

m. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to” block to the screen and snap it below “move RedLaserSprite to x y” block.

n. Select GreenLaserSprite.

o. change to y speed

p. Change speed to 150.

n. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to100” block to the screen and snap it next to else of “if do else” block.

o. Select GreenLaserSprite.

p. change to y speed

q. Change speed to 0.

5. Click on Live Test to see your App.

6. Congratulations, your sprite will change positions and continue to move when they hit the edges.


Lab 7

Go to Top __________ Help

1. Select Block Editor Tab.

2. When Red Laser hits Alien

a. Select Events from Built-in Drawers, drag the “when Sprite collides with Sprite” block to the screen. You can put them below “when GreenLaserSprite collides with bottom edge” block.

b. Change Sprite to RedLaserSprite

c. Change second Sprite to AlienSprite

d. Select Control from Built-in Drawers, drag the “if do” block to the screen. You can put them inside “when RedLaserSprite collides with AlienSprite” block.

e. Select Variable from Built-in Drawers, drag the “app variable gameRunning” block to the screen and snap it next to if of “if do else” block.

f. Select Variable from Built-in Drawers, drag the “set variable to” block to the screen and snap it next to do of “if do else” block.

g. Select app variable score

h. Select Math from Built-in Drawers, drag the “1 + 1” block to the screen and snap it to the “move AlientSprite to” block.

i. Select Variable from Built-in Drawers, drag the “app variable score” block to the screen and snap it inside first number of “1 + 1” block.

j. Select Score from Component-Specific Drawers and drag “set Score’s Text to” block and snap it below “set app variable score to” block.

k. Select Text from Built-in Drawers, drag the “join” block to the screen and snap it behind “set Score’s Text to” block.

l. Type “Score ” over hello.

m. Drag world into Trash can.

n. Select Variables from Built-in Drawers, drag the “app variable score” block to the screen and snap it into last item of “join” block.

o. Select Motion from Built-in Drawers, drag the “move Sprite to x y” block to the screen and snap it beside do of the “if do else” block.

p. Change Sprite to RedLaserSprite

q. Type 370 for y value of “move RedLaserSprite to x y” block

r. Select Motion from Built-in Drawers, drag the “Sprite’s x” block to the screen and snap it inside x value of ” move RedLaserSprite to x y ” block.

s. Select SpaceshipSprite.

t. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to” block to the screen and snap it below “move RedLaserSprite to x y” block.

u. Select RedLaserSprite.

v. change to y speed

w. Change speed to -150.

3. Game Over Function

a. Select Functions from Built-in Drawers, drag the “to do something” block to the screen. You can put them below “when RedLaserSprite collides with AlienSprite” block.

b. Change function name to gameOver

c. Select Variables from Built-in Drawers, drag the “set app variable to” block to the screen and snap it inside “to gameOver” block.

d. Change app variable to app variable gameRunning.

e. Select Logic from Built-in Drawers, drag the “false” block to the screen and snap it behind “set app variable gameRunning to” block.

f. Select Score from Component-Specific Drawers and drag “set Score’s Text to” block and snap it below “set app variable gameRunning to” block.

g. Select Text from Built-in Drawers, drag the “join” block to the screen and snap it behind “set Score’s Text to” block.

h. Click on the blue gear icon in join block. Drag the item icon to the bottom of the second item. Click on the blue gear icon again to close dialog box.

i. Type “Game Over! ” over hello.

j. Type “Score: ” over world.

k. Select Variables from Built-in Drawers, drag the “app variable score” block to the screen and snap it into last item of “join” block.

l. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to100” block to the screen and snap it below “set Score’s Text to” block.

m. Select AlienSprite; Change to x speed; Change speed to 0.

n. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to100” block to the screen and snap it below “set AlienSprite’s x speed to 0” block.

o. Select SpaceshipSprite; Change to x speed; Change speed to 0.

p. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to100” block to the screen and snap it below “set SpaceshipSprite’s x speed to 0” block.

q. Select RedLaserSprite; Change to y speed; Change speed to 0.

r. Select Motion from Built-in Drawers, drag the “set Sprite’s x speed to100″ block to the screen and snap it below ” set RedLaserSprite’s y speed to 0 ” block.

s. Select GreenLaserSprite; Change to y speed; Change speed to 0.

t. Select Look from Built-in Drawers, drag the “show Sprite” block to the screen and snap it below “set GreenLaserSprite’s y speed to 0 ” block.

u. Select StartSprite.

4. Using gameOver Function

a. Select Events from Built-in Drawers, drag the “when Sprite collides with Sprite” block to the screen. You can put them below “to gameOver” block.

b. Change Sprite to GreenLaserSprite

c. Change second Sprite to SpaceshipSprite

d. Select Functions from Built-in Drawers, drag the “gameOver” block to the screen and snap it inside “when GreenLaserSprite collides with SpaceshipSprite” block

e. Select Events from Built-in Drawers, drag the “when Sprite collides with Sprite” block to the screen. You can put them below “when GreenLaserSprite collides with SpaceshipSprite” block.

f. Change Sprite to AlienSprite

g. Change second Sprite to SpaceshipSprite

h. Select Functions from Built-in Drawers, drag the “gameOver” block to the screen and snap it inside “when AlienSprite collides with SpaceshipSprite” block

5. Click on Live Test to see your App.

6. Congratulations, you have created your very own Space Invader Game.