Computational Thinking - Extended Canvas

Let's say you wanted to make a game with spinstars scattered across the playing area (this will create a maze of sorts). The player character, an alien, dies if it touches a spinstar. The alien is always moving to the right, and the player can only move it up or down using the up and down keys on the keyboard. But since the game canvas is only 20 blocks long, it would only take a matter of seconds for the alien to go from one end of the playing area to the other, which wouldn't be very fun. So how do we create a larger maze? Consider theses two ways to do so:

Wide canvas with 5 frames. There are 80 spinstars scattered. There is one alien. The player controls the alien. The alien moves right. When the up arrow is pressed, the alien moves up. When the down arrow is pressed, the alien moves down. When the alien touches a spinstar, it blows up. When the alien is gone, the game is over.	In this example, the 80 spinstars are scattered across an area that is five times wider than the normal playing area. So, there will be about 16 (80/5) spinstars on the game screen at any given time. Once the alien has passed through those 80 spinstars, it will keep moving through empty space. To have an infinitely wide maze of spinstars, take a look at the next example:
There are 16 spinstars scattered. There is one alien. The player controls the alien. The spinstars moves left. When a spinstar reaches the left border, it wraps around with new y coordinates. When the up arrow is pressed, the alien moves up. When the down arrow is pressed, the alien moves down. When the alien touches a spinstar, it blows up. When the alien is gone, the game is over.	In this game plan, instead of the alien moving right, the spinstars move left. This will make it seem like the alien is moving to the right. When a spinstar disappears off the left side of the screen, it comes back on the right side with a new position. And since we are only using one frame (instead of five), we only need a fifth of the spinstars.

Finally, if you would prefer to place your characters in specific positions instead of letting the computer scatter them for you, you can extend the map tool by dragging the lower-right corner of the map textbox.

Try it yourself: So there are almost always multiple ways to create an effect. In this tutorial, we illustrated two ways of giving an illusion of moving to the right. One is moving the player character, and the other is moving the background spinstars. Now, can you add more characters to this game?

Tutorials Home