favsport.jpg


Goal: To create a game. This video gives an overview.



FAV SPORT ALTERNATE (if you are getting a java runtime error)

You will have five holes and a bowling ball or a soccer ball will pop out of the hole. You must tap the soccer ball as fast as possible while avoiding the bowling ball. Each time you tap the soccer ball you get one point, if you tap the bowling ball you lose a point. Your screen will look like:
favSport1.png


Programmers break large tasks into smaller phases - that they carefully test before going on. We will use that approach for this app.



Phase 1 Building the interface. Changing the score (without moving the balls).

1. Create a new project.


2. You will need to add a canvas. Change its background color to green.


3. You will also need to upload the following images: bowling ball, soccer ball, and a hole.


4. We will be using **Sprites in this App, so first click on the Sprite link and learn more about Sprites.

A) This app will contain a total of 7 ImageSprites: 5 unmoving holes, one soccer ball, and one bowling ball.
B) The balls will move on top of the holes.
C) Make sure to adjust the height and width of the holes and the balls so it looks the way you want.

5. To keep track of the score you will need two labels

A) ScoreTextLabel -- set the text to "Score:" This label is static; it never changes.
B) ScoreValueTextbox -- set the text to "0". This label text changes (it's dynamic!) as the score changes.

6.Use the designer to make your user interface look something like the picture below.

FavSportScreen.PNG

7. Write the code to increase the score whenever the soccer ball is touched. This when.touched is a special event block that sprites know about. You will see it when you click on the Soccer Sprite:

whenSoccer.PNG

Remember you need to change the score and display the score on the label.


8. Test your app. It isn't very fun at this point, but we need to know that you are correctly updating the score.


9. Write the code to decrease the score whenever the bowling ball is touched. Test your app again.



Phase 2: Moving the balls, and adding vibration.



1 . You will also need a vibration so the user knows when he has touched the ball.

A) We will use a **sound component to do the vibration.


2. Change the code to use the vibration whenever the score is changed.

Test your app.



3. You have already learned the coordinate system using X and Y, but you haven't learned the Z coordinate yet.

A) The Z coordinate comes out of the screen towards you. Thus an image drawn at a Z value of 2 will cover up an image drawn at a Z value of 1. As you placed the holes, they were assigned an X and Y value depending on where they were dragged. You can change those values if you like.

Both the balls need to have their Z coordinate set. Set Z to 2 so the balls appear in front of the other ImageSprites, which have the default Z value of 1.


4. We need to be able to move the balls around. As a first step, write the code to move the soccer ball to hole5 when hole5 is touched. Verify this works and that the ball is on top of the hole. Your code should look something like:

whenHole.PNG

Repeat this step for hole4. Verify that the ball moves around.


5. Test your app.

*Fun as that was, we need the balls to move randomly - not move to the hole we touched.*



Phase 3 Moving the balls to a random hole.



1. Creating the hole list

A) Since we want the balls to jump from hole to hole, we must create a list of holes that we pick from. We will move the balls to a randomly picked hole.

B) BUT, we can't put the sprites in the hole list, because they aren't created until the app begins. You need to create an empty list that will be used to store the holes.


2. Now we will use Screen Initialization to get the sprites once the app has started.

A) Since sprites don’t get created before the app starts, you must add them to the hole list when the screen is initialized.

B) Try do this on your own first. If you get stuck, check your answer with the following link: Check.


3. We want the ball to move to a random hole each time the balls are touched.

A) To move the balls we will need to use a procedure. which we will call "MoveThem"

4. Picking a random hole.

A) We will use a local variable to pick a hole
B) You have seen global variables which can be used anywhere. A local variable can only be used inside the block where it is described.
favSport6.png

5. Inside MoveThem procedure, set a local variable to a random hole from your list and move the bowling ball to that hole:


moveThemFirstAttempt.PNG

6. We have a problem. You have a variable (which is a sprite), but we need to know its X and Y locations. How do we find this. This is tricky!

A) Go to the "Any Component" tab in the blocks section.
B) Pick Any Image Sprite
C) Since all image sprites have X values, this works.

favSport7.png


7. Your code will look like this:

moveThemFinal.PNG

8. Add a timer (remember we need to add this in Designer). Every time the timer files, call MoveThem. Set the timer interval to move the balls every second. Remember, time is counted in milliseconds, so you want to set the interval to 1000.


9. Test your app! The great thing is that now you can play a game and call it your homework!



Challenges:

1.(*) Add a "UpdateScore" procedure which is called when either ball is touched. you will need a parameter which is either +1 or -1, depending on which ball is touched.

2. () Using listPicker, allow the user to select which two balls they want to appear in the game.

3.(*) *** Keep track of how many times the timer is fired. At regular intervals, add new holes to your list. The modulo function can be used to do something at regular intervals. The easiest way to add new holes is to create a list of "reserveHoles" in the designer. These holes are not enabled and have no image. When you want to use one of these holes,
a. Enable it
b. Assign it an image.
c. Add it to your hole list
d. Remove it from the reserve list.