Introduction: Beach Ball Bounce (PocketLab & ScratchX Game)
This starfish wants to have fun, but a mean shark is scaring her! Help her conquer her fears in this Pong-inspired game using ScratchX and a PocketLab.
This Instructable will explain the code I used to make this game. All sprites and sounds are from Scratch's default library!
You will need:
- Windows 10 device with Chrome (needed to run the ScratchX extension)
- PocketLab app from the Windows store
- PocketLab & ScratchX extensions for Chrome (click here for setup instructions)
- Knowledge of Scratch interface & blocks
Step 1: Game Overview
Before we start, here is a quick overview of the controls that you will be coding for the game.
The shark moves back and forth constantly at the top of the screen. With the white side of the PocketLab facing you (the side with the xyz axes labeled), the starfish can be controlled by tilting the PocketLab to the left and right. To shoot the ball, the PocketLab needs to be moved downward quickly (the game will be looking for a large acceleration on the Y axis). The starfish needs to be moved around so the ball can bounce off of it until it hits the shark. If the ball hits the bottom, it will disappear and the score will reset.
Step 2: Setting Up Sprites and the Background
Our first step is to set up the sprites and background. The starfish, beach ball, shark, and underwater background can all be found in the default Scratch library.
Drag the blocks so your code looks like the images above.
The starfish will start out at (0, -150) at the beginning of every game. The point in direction block ensures that the starfish will move in a straight line.
The shark will appear at the beginning of the game (after you click the green flag) in its first costume. I also created a variable called "Score" to keep track of the score throughout the game.
Step 3: Coding Movement
The shark moves back and forth constantly. When it hits the edge, it will bounce. Setting the rotation style to left-right ensures that when the shark hits the edge and bounces, it will turn to the left/right instead of turning upside down.
The starfish will move left and right whenever you tilt the PocketLab on the x axis. The -10 value can be thought of as the starfish's sensitivity to the PocketLab data. If you make the -10 larger, the starfish will move more steps when you tilt the PocketLab. If you make it smaller, it will move fewer steps when you tilt the PocketLab.
Step 4: Shooting the Ball
The game needs to recognize a large acceleration on the y axis (moving the PocketLab down quickly) as the signal to shoot the ball.
In this code, 1 is the minimum acceleration needed to shoot the ball (feel free to change it if you want it to be more/less sensitive). When there is an acceleration on the y axis that is greater than 1, the starfish will broadcast a message to shoot. When the beach ball receives this message, it will appear above the starfish, pointing in a random direction between 15 and -15 degrees, and move upward. Make sure not to make the y coordinate of the beach ball the exact y coordinate of the starfish, or else it will interfere with the bounce mechanism we will be coding later!
Step 5: Bouncing the Ball
In the previous step we coded just enough to make the beach ball move upward. In this step, we will address bouncing and what happens to the ball if it touches the shark or starfish.
The beach ball will bounce and play a sound (pop) if it hits the top, left, or right edge.
If the beach ball hits the bottom edge, it's game over! The ball will disappear and the score will reset. My "bottom edge" is actually y = -160 because if you set it to the very bottom (y = -180), the ball won't disappear. My guess is that it's because the coordinates of the beach ball are measured from its center, not from its edges.
Bouncing the beach ball off the starfish is where it gets complicated. The "if touching starfish" block makes the ball bounce off the starfish when the ball hits the top of the starfish. However, if the ball hits the side of the starfish, it will go straight through the starfish! That's why I made the "if then" block underneath. The "if then" block with distance < 65 and y < -117 will make the ball bounce off the starfish when it appears to be touching the sides of the starfish. If the angle is negative, it will add 90 degrees to the direction of the bounce. If the angle is positive, it subtracts 90 degrees from the direction of the bounce.
This code was intended to be a simpler and faster way to create a semi-realistic bounce. If you want a more nuanced/realistic bounce, there are plenty of bounce scripts and physics engines available on Scratch. Try it out if you'd like, and let me know what happens!
Finally, if the beach ball hits the shark, it will broadcast victory, which gives you a point and changes the shark costume to a sad shark (you'll see the code for this in the next step). The beach ball will also switch to costume1, a blank costume I made for the ball so it would look like it disappeared. "Stop this script" is needed so that the ball doesn't continue bouncing.
Step 6: Changing the Score & Ending the Game
Remember the "victory" message that's broadcast when the beach ball hits the shark?
When the starfish receives this message, there will be a clapping sound. The starfish will temporarily switch to its happy costume (starfish-a) and then back to its original costume (starfish-b).
When the shark receives this message, the score will change by one. The shark will temporarily switch to its sad costume (shark-c) and then back to its original costume (starfish-a).
When the score hits 5, the shark will switch to its sad costume and continue shrinking until it becomes very small (this is meant to make the shark look like it's swimming away). As it's shrinking, it will continue its original left and right movement. When the shark hits a certain size (I put size = 10, but feel free to experiment with what size you want the shark to be before it disappears), it will disappear and will broadcast "game over". When the starfish receives this message, it will switch to its happy costume and say "Hurray!" while there is cheering.
Step 7: This Is What Your Final Code Should Look Like!
If you have questions, please ask!
Step 8: Making Additional Improvements
There are many things you could do to change the game. Here are some ideas:
- create your own sprites and sound effects
- add background music
- make the game more difficult by setting the score threshold to something higher than 5
- add multiple beach balls