Tutorial on Timed Games

What if you want to limit the amount of time a player has to achieve a target goal? Instead of defining the time-limit in the setting, we encourage the learner to use computational thinking and logical reasoning to solve this problem.

Essentially, we need a timer of some sort. Recall that we can set an attribute for an object for a specified amount of time. Perhaps we can take advantage of this for our purpose. Consider the following examples:

1. Spinstar Timer

There is a spinstar and a ball. The ball moves left. When the ball collides with the spinstar, the ball blows up and the spinstar turns red for 5 seconds. Map: sl	If we use the map textbox to place the spinstar directly to the left of the ball, the ball will immediately collide with the spinstar and explode at the start of the game. The spinstar will then turn red for 5 seconds. This will be our timer.
When the spinstar is red, the rabbit is racing_against_time. When the rabbit is racing_against_time and the spinstar is not red, the game is over.	Let's use the timer we made above to write a game in which the player controls a rabbit to accomplish some task within 5 seconds. The first sentence says the rabbit will have the Boolean attribute, "racing_against_time" whenever the spinstar is red. After 5 seconds, the spinstar stops being red, but the rabbit will still be racing_against_time. This fulfills both conditions in the next sentence, and the game ends.
When the ball is gone, the rabbit is racing_against_time for 5 seconds. When the rabbit is not racing_against_time, the game is over.	This INCORRECT example uses the ball to time, instead of the spinstar's color. The condition in the antecedent of the first sentence, "ball is gone" is always true after the ball explodes. As a result, the timer on the rabbit's racing_against_time attribute is always being reset to 5 seconds and the rabbit stays racing_against_time forever.

2. Moving Timer

The diamond moves right at 0.1 pixels per frame.
When the diamond touches a border, game over.

Map:
d

Here, we place the diamond at the top-left corner using the map. The diamond will move slowly to the right at 0.1 pixel per frame. When the diamond reaches the right border, the game will end. With the diamond at the top, the user can also see how much time is left on the screen.

Try it yourself: Time to apply what we've learned! Let's use our spinstar timer example in a real game plan. Try the following paragraph and see what happens. Please also make sure to enter "sl" in the map textbox to place the spinstar and the ball next to each other near the upper-left corner of the canvas.

There is a spinstar and a ball.
There is a rabbit near the bottom.
There are 20 rocks.
The ball moves left.
When the ball collides with the spinstar, the ball blows up and the spinstar turns red for 5 seconds.
The player controls the rabbit.
When an arrow key is pressed, the rabbit moves in the same direction.
When the spinstar is red, the rabbit is racing_against_time.
When the rabbit is racing_against_time and the spinstar is not red, game is over.

Complete Sample Games for Timed Control

// Game #1. Eat the carrots and extend time by touching the spinstars.

There are 50 carrots.

You control the turtle.
When an arrow key is pressed, the turtle moves in the same direction.

When the turtle collides with a carrot, the carrot is eaten and the score increases by 1.
When the turtle collides with the spinstar, the turtle turns green for 5 seconds.
When the turtle is green, the turtle is racing_against_time.
When the turtle reaches the border, the turtle stops.

When the score is equal to 40, you win.
When the turtle is not green and the turtle is racing_against_time, the game is over.

Map:

s---------=--------s
-
-
-
----s---------s
-
-
-
-
--------sss
--------sTs
--------sss
-
-
-
----s---------s
-
-
-
s------------------s

// Game #2. Let the Diamonds Fall Through.

The fox moves right at 0.3 pixels per frame.
When the fox touches a border, the game is over.

The player controls the brick with the mouse.
The horizontal position of the brick is determined by the mouse.
The size of the brick is 80.
The brick is invisible.
When the topaz touches a brick, it becomes invisible.
Otherwise, it becomes visible.

The sapphires are invisible.
The spinstar starts off moving in a random direction at 6 pixels per frame.
When the spinstar hits a border, it reverses direction.
When the spinstar hits a sapphire, it reverses direction.
When the spinstar collides with a sapphire, it becomes white for 0.1 second.
When the spinstar is white, it inserts a diamond.

The diamond starts off moving in a random direction at 4.5 pixels per frame.
When a diamond hits a border, it reverses direction.
When a diamond hits a topaz that is not invisible, it reverses direction.
When a diamond hits a visible topaz, it explodes.
When a diamond hits the bottom border, it explodes.
When a diamond hits the bottom border, the score adds 1.
When the score equals 10, you win the game.

Map:

-
-
---------s
-
-
-
hhhhhhhhhhhhhhhhhhhh
-
-
-
-
-
-
-
FFFFFFFFFFFFFFFFFFFk
-
-
-
-
x

// Game #3. Get the Pearls in Time.

The player controls the kitten.
When the arrow is pressed, the kitten moves same direction.
When the kitten collides with a topaz, it reverses direction.
The speed of kitten is 3.

//Earning points by picking up bombs.
When the pearl collides with kitten, it explodes and score increases by 1.

//Random generation using spinstar as an inspector.
There is a spinstar.
The spinstar is invisible.
The speed of spinstar is 10.
The spinstar starts by moving in a random direction.
When the spinstar collides with topaz, it reverses direction.
When the pearl is gone, the spinstar becomes empowered for 0.3 second.
When the spinstar is empowered, it inserts a pearl.

//Timer.
When the pearl collides with spinstar, the spinstar turns red for 4 seconds.
When the spinstar is red, the pearl is racing_against_time.
When the pearl is racing_against_time and the spinstar is not red, the spinstar explodes.

//Enemy Control.
The speed of cobra is 3. The speed of dino is 4.
The cobra starts by moving right.
When a cobra collides with a topaz, it reverses direction.
The dinos start by moving in a random direction.
When a dino collides with a topaz, it reverses direction.

//Gameover.
When the spinstar is gone, you lose.
When the kitten collides with dino, you lose.
When the kitten collides with cobra, you lose.
When the score equals 10, you win.

Map:

FFFFFFFFFFFFFFFFFFFF
F-=------s---------F
F---D--------------F
F------------------F
F-----------------BF
F------------------F
F------------------F
F------------------F
F---B--------------F
F------------------F
F------------------F
F--------i---------F
F------------------F
F----------------B-F
F--------R---------F
F------------------F
FB-----------------F
F---------------D--F
F------------------F
FFFFFFFFFFFFFFFFFFFF

Programming Concepts (optional material):
Logic and reasoning play critical roles in computer science and programming. As the above tutorial illustrates, logic using the objects' attributes allows us to create new behaviors such as timed control. Logic also plays an important role in debugging, where one has to deduce the reasons behind why the program does not work. Deductive reasoning is one form of reasoning that is often used, which uses some observed conditions to derive a conclusion. In fact, the conditional statements of "if ... then ..." is a type of deductive reasoning.

Have you played puzzle games like Sudoku? Sudoku involves repeated uses of deductive reasoning to deduce where the missing numbers need to be! For example, consider the most upper-left square is absent of a value. Suppose the left-most column contains four numbers 1, 2, 3, and 4, and the top-most row contains the numbers 5, 6, 7, and 8. Then, we know that the number missing in the most upper-left square must be 9. When debugging your programs, you will be using deductive reasoning to rule out potential causes.

Tutorials Home