Reaction Game

Overview

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.

Let's Get Started

User Interface Designer

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.

Block Logic Editor