Snap! Project 6: Finch Pong

Description: Use the Finch to control the paddle in a game of Pong.

Programming Concepts: Using the Finch to control Snap! graphics, defining new blocks

Difficulty: Advanced

Approx. Time: 50 Minutes

Programming steps

In this project, the player will move a paddle by tilting the Finch to the right and left. The player must move the paddle so that the ball bounces off of it.

1. Let's start by creating the paddle that the player will control with the Finch. Click the paintbrush icon to paint a new sprite.

2. Select the filled rectangle tool.

3. Draw a narrow rectangle that will serve as the paddle.

4. Select the centering tool and make the sprite centered around the middle of the rectangle.

5. (Optional) Use the paint bucket to color the paddle.

6. Delete the arrow sprite (Sprite1) by right-clicking it and selecting "delete".

7. Select the paddle sprite and replace the name "Sprite(2)" in the top-left corner with "Paddle".

8. Click the paintbrush icon to paint the ball sprite.

9. Hold down shift while using the ellipse tool to draw a circle.

10. Center the circle.

11. (Optional) Use the paint bucket to color the ball.

12. Name the ball sprite "Ball".

13. Now that we have the ball and paddle, it is time to make them move! Select the paddle sprite by clicking on it in the sprites list.

14. The game will start when the player presses the space bar. Add a "when space key pressed" block and a forever loop into the program.

15. When the Finch is tilted to the right or left, the paddle should move accordingly. The more the Finch is tilted, the further the paddle should move. To move the paddle, add a "set x to" block from the "Motion" category to the forever loop.

16. From "Sensing", add a "Finch Y acceleration" block to the slot in the "set x to" block to move the paddle an amount based on the horizontal tilt of the Finch.

17. Press the space bar to start the program. Hold the Finch so that its beak faces your computer monitor and tilt the Finch so that its right wing is down. Observe what happens.

18. The paddle moves a few pixels in the wrong direction. To fix this problem, use a multiplication block from the operators category to multiply the acceleration by -200. The 200 increases the distance while the minus sign changes the direction.

19. Run the program and the Finch should control the paddle. The sensor readings might vary a bit, so the paddle will shake.

20. Now we need to make the ball move. Click on the ball sprite to select it.

The page will now be blank. This is because each sprite has its own set of scripts. These scripts control the properties of that specific sprite. For example, placing a "set x to" block in the scripts of the paddle sprite will cause the paddle sprite to move to specified position. Putting the same block in the scripts of the ball sprite would move the ball instead. The scripts tab only shows the scripts of the sprite that is currently selected.

21. Start the code with a "when space key pressed" block and a forever loop.

22. To make the ball move, add a "move 10 steps" block from the "Motion" category. Set the amount to 3 steps.

23. After that, use an "if on edge, bounce" block to make the ball bounce when it hits a wall.

24. Run the code and the ball will bounce left and right. To make it bounce at an angle, we need to point it diagonally. From the "Motion" category, add a "point in direction" block right below the "when space key pressed" block. Set the direction to 135.

25. When the game starts, we should also reset the ball's position. Add a "go to" block from the "Motion" category and place it below the "when space key pressed" block. Set the x to 0 and the y to 150.

26. Now let's make the ball bounce off the paddle. Add an if statement from the "Control" category inside the forever loop after the "if on edge, bounce" block.

27. Go to the "Sensing" category and add a "toughing _ ?" block to the if statement and make it determine if the ball is touching the paddle.

28. When the ball bounces off the paddle, it should turn 90 degrees to the left if it is coming from the top left (135 degrees) and 90 degrees to the right if it is coming from the top right (225 degrees). To do this, add an if statement inside the if touching paddle block.

29. For the condition, use an "=" block from the "Operators" category.

30. In the left side of the "=" block, attach a "direction" block from the "Motion" category and determine if the direction is 135.

31. Make a second if block below the first one for when the direction equals 225.

32. In the if section of the first block, add a turn left block and set it to 90 degrees. In the second if block, add a turn right 90 degrees block.

33. We should move the paddle near the bottom of the screen. Select the paddle sprite and go to the "Motion" category. Type -125 in the "set y to" block and then click the block.

34. Run the project and the ball should bounce off of the paddle! Use the stop button to stop the program.

35. If the player misses the ball, the game should end. Go back to the ball sprite and add another if statement below the "if is touching paddle" section. This if will run if the ball is below the paddle.

36. Add a "<" block from the "Operators" category as the condition.

37. in the first section on the "<" block, add a "y position" block from the "Motion" category.

38. We know the paddle is at -125, so use that value for the second section of the "<" block.

39. Add a "say" block from the "Looks" category inside the if statement. Set the text to "Game over!" (Note that in Google Chrome, you might not be able to type spaces. Use "GameOver!" instead.)

40. When the game ends, the ball should no longer interact with the paddle and should simply bounce around the screen. To do this, we will need to make a variable that keeps track of if the game is currently running. Under the "Variables" category, click "Make a Variable" and name it "isGame".

41. Move the two if statements that are inside the forever loop into a new if statement. This can be done by dragging a new if statement over the gap between the "if on edge, bounce" block and the "if" block below it. Then drag the two if blocks inside the new if statement.

42. Make the if statement check the value of isGame.

43. Before the "say" block, add a "set isGame to" block from the "Variables" category and insert a "false" block from the "Operators" category.

44. Right below the "when space key pressed" block, add another set block that sets isGame to true.

45. Now run the program and the ball should stop bouncing off the paddle when the game ends.

46. Let's add a variable that knows how many times the user hit the ball in a row. Make a new variable called "hitCounter".

47. Set the variable to 0 when the program starts.

48. Add one each time the ball bounces off of the paddle.

49. We can make the game more interesting by randomizing the initial position of the ball. Instead of setting the x to 0 when the game starts, use the "pick random" block from the "Operators" category to select a number from -200 to 200.

50. We can also make the game harder by increasing the speed of the ball as the game continues. Make a new variable named "Speed".

51. Set Speed to 2 to make the ball move slowly when the program starts.

52. Increase Speed by 1 each time the ball bounces off of the paddle.

53. Instead of moving 3 steps, make the ball use Speed to determine the number of steps.

54. Set Speed back to 2 when the player loses, so the "Game Over" message is readable.

55. Play the game again and the ball should move faster each time it hits the paddle.

56. We are beginning to have a lot of code that runs at the beginning of the game (all the code above the forever loop). To make everything more organized, we can group this all into one block. Under the "Variables" category, click "Make a block".

57. Name it "Reset".

58. Move the block editor over so you can see the rest of your screen.

59. Move all the blocks above the forever loop so they are attached to the definition of reset. This can be done in two steps: First move the "set Speed to 2" block and all the blocks below it so that they are attached to the "define Reset" block. Then, move the forever loop and the blocks inside it back to the "when space key pressed" block. Then click "OK".

60. Now attach a newly-created Reset block directly below the "when space key pressed" block.

The code will behave exactly as before, but we can now use the Reset block anywhere else in our code.

61. Currently, when the player loses and wants to play again, he or she must click the stop button and then press the space bar. It would be better if pressing the space bar immediately reset the game. Add another "when space key pressed" block to an empty area of your screen.

62. Attach a Reset block to it and the game should reset any time the player presses the space bar.

63. When the game is reset, the ball should no longer say "Game Over". Add a "say" block to the end of the Reset block's definition and backspace the text "Hello!" so the block is empty.

64. Now let's add some lights and sound effects to make the game more engaging. Use a "Finch LED" block (from "Looks") and a "Finch buzz" block (from "Sound") to make the Finch play a sound at 880 Hz for 250 ms and flash the beak green.

65. Then make the beak turn off again after the ball bounces.

66. When the player loses, make the beak red and play a different tone sequence using "Finch buzz" blocks and "Finch LED" blocks.

67. Turn off the Finch's beak in the definition of the reset block.

68. Finally, go to the "Variables" category and uncheck all the variables except hitCounter, so only it is visible while playing.

Have fun playing pong!

Example file

This file was created with the Birdbrain Robot Server. Use this utility to convert it to a form that can be used with the Chrome Finch connection app.


Note about speed

With the way that the game is currently programed, the speed of the ball depends on speed of your computer and web browser. This is not good because on faster computers, the ball will move really fast. There is a way to account for this, but it is rather involved. See the project below to see how it is done.