Reaction Game
In this lesson, we will create a simple reaction time game using a canvas, an image sprite, a timer, and a little bit of math. We will pick a random location within the canvas for the image sprite to be placed at, and the user will have to press the image sprite as fast as they can after it appears. Then, we will display the user's time.
First, we set the AlignHorizontal property of the screen to be 'Center' so that everything will be centered (this step is optional).
Next, we insert a label, followed by a button and another label. The topmost label will be used to tell the user how to play the game (something along the lines of "press the image as fast as you can after it pops up"). The button in between the 2 labels is the start button, which will eventually add time to the timer and spawn the image sprite in a random location within the canvas. The bottom label is used to display the time it took the user to press the image after it appeared. Make sure to set the text for the bottom label to be blank so that no time is displayed until the user presses start. Also note that you can rename the components by pressing the 'Rename' button at the bottom of the 'Components' panel.
Now insert a Canvas under the bottom label and change its height and width to 'Fill parent' (the Canvas can be found under the 'Drawing and Animation' tab of the 'Palette' panel. Then, put an ImageSprite inside of the Canvas. At this point, we need to upload an image file to use with the ImageSprite. Press the button labeled 'Upload File ...' under the 'Media' panel and upload your image. Press on the ImageSprite and click the box under 'Picture' in the properties panel and select the image file that you uploaded.
Lastly, insert a Clock from the 'Sensors' tab of the 'Palette' panel. Initialize the clock to disabled by un-checking the 'TimerEnabled' box in properties. Likewise, ensure the cat sprite & time label are initialized to invisible (by un-checking the 'Visible' box in their respective properties).
First we initialize 2 global integer variables to be zero. These variables hold the time at which the start button was pressed and the time that is added to the timer.
Now add the logic for when the start button is pressed. First, enable the clock and set the 'start' variable to be the clock's current time. Then set the 'pause' variable to a randomly generated number between 1 and 3. The number added to 'pause' is then added to the clock. Next, move the ImageSprite to a random (x,y) coordinate within the Canvas. Make sure to factor in the width and height of the ImageSprite as well as the width and height of the Canvas. Finally, set the visibility of the start button and time label to be false.
Adding the functionality of the timer is as easy as setting the cat to be visible.
The last thing that we need to do is add the functionality for when the ImageSprite is pressed. Set the 'time' variable to be the duration between when the start button was pressed and when the ImageSprite was pressed. Then, add math functionality to subtract the 'pause' variable from that number to get the user's reaction time. Set the time label to display the user's time and make it visible. Optionally, you can make the ImageSprite be invisible after touching it.