Move the diver to save the fish from the plastic bottles! You can build this game, and others like it, with Thunkable!

Examine the code blocks for this app

Build this game from scratch

Customize the game by remixing existing code

Code Blocks

The when GoButton.Click event handler (top-left) gets the fish moving and starts the timer so that the Timer.Fires event will begin triggering and creating bottles.

The when Timer.Fires event handler (top-right) causes a new plastic bottle to be created every so many seconds, and sets its speed and direction so it begins floating downward.

The when collides with event handlers (middle) assign a point when the diver collides with the plastic bottle, and subtract a point when the fish collides with it.

The when FishSprite_Type collides with right edge event handler (3nd row, left) causes the fish to jump back to the left edge (x=0) when it hits the right edge.

The when BottleSprite_Type collides with bottom edge event handler (bottom-right) causes the bottle to disappear when it hits the bottom edge and takes away five points.

Build “Save the Fish” from Scratch

Follow these step-by-step instructions to build the game shown above.

Design the User Interface

• Create a new project and name it, “Save the Fish”.
• Drag in a Canvas component. It will have a Stage in it, and a single SpriteType and Sprite.
• Rename the Sprite Type in the Canvas from SpriteType1 to DiverSprite_Type. Download the diver image below, then upload it into your Thunkable app and add it as the first image in DiverSpriteType’s image list.

• 

• 

• 

• Add two additional SpriteTypes named FishSprite_Type and BottleSprite_Type. Download the fish image above and set it as the first image in FishSprite_Type’s image list. Drag an instance of FishSprite_Type into the Canvas and name it FishSprite. Download the bottle image above and set it as the first in BottleSprite_Type’s image list, but don’t add an instance for the bottle into the Canvas– you’ll instead code blocks so that the app creates bottles on the fly. After creating and naming the sprite types and sprites, the Canvas should be organized as in the image below:

• Set the DriverSprite_Type’s isDraggable property to “true”. This will allow the user to move the diver by dragging it.
• Drag in a button below the Canvas. Name it GoButton and set its Text property to “Go”.
• Drag in a Row component near the top of the screen. Place one Label in it with Text of “Score:”. Place another Label to the right of it. Set its Text to “0” and name it “ScoreLabel”.

Test the app by choosing “Preview”. You should see the fish and the diver, and you should be able to drag the diver around the screen (make sure you’ve set the DiverSpriteType’s isDraggable property.

Code the Interactive Behavior

Get the Fish to Move. Code the GoButton.Click event handler.

The “set angle” block is in the Directions folder in the Canvas Blocks, and the “set speed” block is in the Motions folder.

Click Preview to test– when you click “go”, the fish should begin moving left-to-right, and stop at the right edge.

Make the Fish re-appear at left edge.

The “when collides with” event handler can be found in the Canvas Events folder.

Set the sprite’s “x” property to 0 to transport it to the left edge, then reset its speed back to 40. Use the event parameter “sprite” in the blocks, as it specifies the fish that hit the right edge (you can click on the green “sprite” in the event handler and drag it into the slot. In this app, there is only one instance of FishSpriteType, but you might have many.

Click Preview to test– when you click “Go”, the fish should move left-to-right, then snap back to the left edge after reaching the right edge, then move left-to-right.

Create plastic bottles every few seconds that drop down the screen

The when Timer.Fires event triggers periodically if the Timer component is enabled and its “loops” property is set to true. You can set the “interval” property in the designer to specify how often the event is triggered.

Every time it is triggered, call “create” to create a new bottle. The x parameter is set to a random number between 1 and 300 so that the bottle will appear at random positions on the horizontal axis. The y parameter is set to 50 so it will appear near the top. Once the bottle is created, the “do” section of the create block is executed at which time you can set the bottle’s y speed to 40 (note that setting the y speed is an alternative method for moving an object vertically– you could also set the angle to 90 and the speed to 40.)

Click Preview to test: After clicking “Go”, bottles should begin appearing and dropping down the screen every three seconds (or whatever you set the Timer’s interval to).

Add and subtract points on collisions

Set up the scoring for the game by coding two “when collides with” blocks. Use sprite types, not sprites, so that the code will work on any instances of bottles, fish, and divers.

Note that the ScoreLabel’s Text is set to itself + or – 1. Such increment/decrement operations are common in coding.

The event parameter “collidee1” holds the specific bottle that was in the collision, so remove it.

Remix “Save the Fish” to build your own game

You can use the “Save the Fish” game as a template for building all types of games. From the app page click on “Copy Project”, which will load a new copy of the app into your projects. From there you are free to create! Try some of the suggestions below:

Code it so that the diver’s job is more challenging

Change the speed of the sprites, or change the way they move, in order to make the game more challenging and more fun. You might make the bottles move in random directions, or have the fish swim towards newly created bottles.

Here are three ways to get a sprite to move in a particular direction:

1. Set the sprite’s angle and speed. Angle is set between 0 and 360. 0 means the sprite will move right, 90 down, 180 left, and 270 up. Speed is in pixels/second.
2. An alternative is to set the sprite’s xspeed and yspeed. If you set a sprite’s xspeed to a positive number, it will move to the right. If you set it to a negative number, it will move left. If you set a sprite’s yspeed to a positive number, it will move down. If you set it to a negative number, it will move up. xspeed and yspeed are convenient when you want a sprite to move horizontally or vertically.
3. The point towards block points a sprite towards another sprite. You can use this block to, say, have the fish swim towards the plastic bottles.
   

Add more sprites and sprite types

Add another fish sprite to make it harder for the diver. Note that you don’t have to add another SpriteType, just another sprite instance of FishSprite_Type.

You could also add additional SpriteTypes that behave in different ways, e.g., an octopus that appears which the diver should AVOID!

Change the rules

Change the way points are awarded. Code it so the fish has some limited number of “lives” and the game ends when the last life is expired.

Add Sound effects

Drag in a Sound component and set its source to some sound clip (typically a .mp4 file) you find on the web. Call Sound.Play when you want the clip to play.

Add an introductory “Splash” screen.

Many apps begin with a splash screen with instructions and other information. For “Save the Fish” you could provide some statistics on the effect of plastics in our oceans or other related information.

Click on the “+” near “Screen1” to add a new screen. The first screen in the listing on the top-left of the Designer is what appears first, so reorder that to, say, get the Splash screen to appear first. You can open a new screen with the “Navigate to” block found in the “Control” folder.

Load your own images with transparent backgrounds

Typically, you’ll want images with transparent backgrounds. You can take an image you find on the web and transform it using https://photoshop.adobe.com/. After loading your file, choose “Remove Background” from the left menu.