Search This Blog

Showing posts with label keyboard input. Show all posts
Showing posts with label keyboard input. Show all posts

Friday, 28 February 2014

Shark Attack

Introduction

A simple game in which the player guides a shark-like fish to eat other fish in a tank.

List of techniques

  • Painting background
  • Painting Sprites
  • Importing a Sprite image
  • Scripting continuous movement of Sprites
  • Controlling Sprite movement with the keyboard
  • Detecting and responding when Sprites touch
  • Showing and hiding Sprites
  • Copying Scripts between Sprites
  • Removing blocks from Scripts
  • Variables for Scoring
  • Using a timer to terminate a game
  • Using If and repeat until loops
  • Communicating with the player through a say block

Tutorial

After the program has loaded, right-click (Ctrl-click on a Mac) on the icon for the Scratch the Cat Sprite and click delete on the pop-up menu

Note: You could also right-click on the Sprite itself - or Clear the Sprite's costume and drawn a new one.
We will paint a background for the fish tank (or you could import a readymade backgound).

Click on the Stage  icon and then on the Backgrounds tab above the Script Area

Click the Edit button for the background
This will take you to the Paint Editor

Click any bluish colour in the Colour Palette and then on the Fill Bucket Tool in the Toolbox

Click anywhere on the canvas to fill the Stage with a blue background colour


For the gravel at the bottom of the tank, click a yellow, orange or brown colour in the Colour Palette

Click the Paintbrush Tool in the Toolbox and then draw a wavy line across the bottom of the canvas.

NOTE: It is important not to leave gaps at each end of the line otherwise the fill colour will leak out (see next step)
Click the Fill Bucket Tool in the Toolbox and then click somewhere in the lower section of the canvas.

NOTE: If the colour leaks out to fill the whole screen, click Undo and then use the paintbrush tool to fill any gaps in the yellow line (particularly at the ends)


Now we will add some weeds.

Click a green colour in the Colour Palette and then click the Paintbrush Tool in the Toolbox.

Click Brush Size in the Options Area beneath the Toolbox and then click on a medium-sized brush.

Use the Paintbrush Tool to draw weed shapes on the canvas
Now it's time to add our first fish.

Click on the Paint new sprite button above the Sprites List Area


This will again take us to the Paint Editor, but this time we will be drawing a Sprite.

Click on a colour for your fish (in my case orange) in the Colour Palette

Click the Paintbrish Tool in the Toolbox

Draw a fish shape on the canvas, making sure the shape has no gaps. It doesn't matter what size the fish is at this stage.
Click the Fill Bucket Tool in the Toolbox and then click anywhere inside the fish shape you have just drawn.

NOTE: If the colour leaks out to fill the screen, click Undo, use the Paintbrush to fill any gaps in the outline of the fish and try filling again

Use the Paintbrush Tool to add further details such as an eye.

Then click the OK button

A Sprite is a separate object which can be moved around the Stage.

To check this, click on the fish Sprite and drag it to a new position on the canvas


If your fish Sprite is too large, click the Shrink Sprite button above the Stage on the left, and then repeatedly click on the Sprite to reduce its size.

NOTE: If you shrink it too much, you can enlarge it by using the Grow Sprite button next to the Shrink Sprite button
We are now ready to write a Script to control how our fish Sprite moves.

Drag the move 10 steps block from the Blocks Palette Area to the Script Area

If you now click on the move 10 steps block in the Script Area, the fish sprite should move across the stage

To make the Script work independently we need to add a few more instructions.

Click the Control button above the Blocks Palette Area to bring up the set of control blocks.

Drag the when Green Flag clicked block from the Blocks Palette Area into the Script Area

Drag the Forever loop block into the Script Area and attach it to the when Green Flag clicked block.

Now drag the move 10 steps block so that it sits inside the loop of the Forever block

Test the procedure by clicking the Green Flag button above the Stage on the right. The fish Sprite should move across the Stage. If you drag it back it will move across the stage again until you stop the script by clicking the red button next to the Green Flag button.
Click the Motion button to bring up the motion blocks

Drag the turn 15 degrees block from the Blocks Palette Area into the Script Area and then insert it into the Forever loop.

It doesn't matter if the turn 15 degrees block is above or below the move 10 steps block


Test the new Script by clicking the Green Flag button

When done, stop the Script by clicking the Red button
To increase the size of the circle the Sprite moves around, change the turn 15 degrees block so it now says turn 5 degrees

You can test the Script with the Green Flag button. Try dragging the fish Sprite to a different places on the Stage before pressing the Green Flag button to see what happens


To make a copy of the Sprite and its Script, right-click (Ctrl-click on a Mac) on the icon for the Sprite in the Sprites List Area and then click duplicate on the pop-up menu
Drag the new Sprite to a different part of the Stage and rotate it by clicking on its image above the Script Area and dragging the image around to face a different direction

Test the two Sprites' Scripts with the Green Flag button


When you are happy with the way the fish Sprites move around the Stage, you are ready to add the shark Sprite. This time we will import a readymade image.

Click the Choose new sprite from file button above the Sprites List Area


Double-click the Animals folder and then scroll down until you come to the shark image. Click this and then click the OK button.

Shrink the Sprite using the Shrink Sprite button
Click the Control button and from the Blocks Palette Area drag the when Green Flag clicked block and attach to it a Forever loop in the Script Area for the shark Sprite.

From the Motion Blocks Palette drag the move 10 steps block and insert it into the Forever loop in the Script Area.

Change the block so it reads move 4 steps
Drag the go to x: _ y: _ block into the Script Area and attach it below the when Green Flag clicked block. Change the block so it reads go to x:0 y:0

Now drag the point in direction 90 block into the Script Area and attach it beneath the go to x:0 y:0 block

This script instructs the shark sprite to go to the centre of the stage area and then point to the right. It will then keep moving 4 steps the the right until it reaches the edge of the Stage.

 it We now need to add some instructions so the player can take control of the shark Sprite.

From the Control Blocks Palette Area, drag the when [space] key pressed block into the Script Area and change the block so it reads when left [arrow] key pressed
From the Motion Blocks Palette drag the point in direction 90 block and attach it to the when [left arrow] key pressed block.

Change the point in direction 90 block so it reads point in direction -90 (left)


We could repeat the above process to create a Script to move the Sprite to the right but to save a bit of time and effort we will copy the script we've just created and then change it.

Right-click on the Control block and then click on duplicate
Change the copied script so it reads

when right arrow key pressed
point in direction 90 (right)

Test these new scripts by clicking the Green Flag button. Guide the shark around the screen with the arrow keys on the keyboard


You'll see that when the shark sprite moves to the left it flips upside down. This would be fine it, like the two other sprites it moved in circles, but it looks a bit odd when moving only left and right.
To change the way the Sprite moves across the Stage, click the only face left-right button above the Script Area

Now we need to change the scripts for the fish so that they get eaten when the shark touches them

Click on the icon for Sprite2 and then from the Control Blocks Palette drag an If loop block into the Script Area

Insert the If loop block into the Forever loop below the two motion blocks.
From the Sensing Blocks Palette, drag the diamond-shaped touching _ ? block into the Script Area and insert it into the diamond-shaped pane in at the top of the If loop block.

Change the block so it reads:
If touching [Sprite3]


From the Looks Blocks Palette drag a hide block into the Script Area and insert it into the If loop
From the Control Blocks Palette, drag a Wait 1 secs block into the Script Area and insert it in the If loop below the hide block

Change the block so it now reads wait 3 secs

From the Looks Blocks Palette, drag a show block and insert it in the If loop below the wait 3 secs block

Drag another show block and insert it in the script directly below the when Green Flag clicked block

The script will now check whether this fish sprite is touching the shark sprite and if so, will hide it for 3 seconds and then show it again. The first show instruction in the script is there to make sure the fish sprite is visible when the game starts.
To save time and effort, this script can now be copied to the other fish sprite by dragging the when Green Flag clicked block (and all the blocks which are attached to it) from the Script Area on to the icon for the second fish sprite in the Sprites List Area and releasing the mouse button.

When you click on the second fish Sprite, you will now find that it has two scripts in its Script Area.

To remove the original script, drag it from the Script Area into the Blocks Palette Area and release the mouse button.
It would now be useful to add a scoring system. To do this we need to create a variable which will keep track of the score.

Click the Variables button above the Blocks Palette and then click the Make a variable button

In the pop-up window type Score for the variable name and then click the OK button


From the Blocks Palette, drag the change Score by 1 block into the Script Area and insert it into the If loop between the hide and show blocks
Now click on the Shark Sprite icon in the Sprite List Area, drag the set Score to 0 block into its Script and attach it beneath the when Green Flag clicked block. As long as it is before the Forever loop it doesn't matter where in the Script it goes.

This will reset the Score variable to 0 each time the game is started. Notice also that the Score is shown on the Stage Area.

Play the game a few times to check that the Score procedure works satisfactorily


We will now add an extra challenge to the game by setting up a timer.

Drag the move 4 steps block out of the Forever loop into a space in the Script Area and then drag the Forever loop block into the Blocks Palette to remove it from the Script Area.
From the Control Blocks Palette, drag the repeat until [ ] loop block into the Script Area and attach it below the rest of the when Green Flag clicked script.

Insert the move 4 steps block into the repeat until [ ] loop


From the Operators Block Palette, drag the diamond-shaped [ ] > [ ] block into the Script Area and insert it into the diamond-shaped pane in the head of the repeat until [ ]  block
From the Sensing Blocks Palette, click the checkbox next to the timer block which will show the timer in the Stage Area.

Now drag the timer block into the first pane in the  [ ] > [ ] block in the repeat until block header. In the second pane type 30. This will set the length of the game to 30 seconds.

Drag the reset timer block into the upper part of the script and insert it below the set Score to 0 block.


From the Looks Blocks Palette, drag the say [Hello!] block into the Script Area and attach it beneath the repeat until timer > 30 loop block.

Type Game over into the pane of the say block so it reads say [Game over]
Finally, from the Control Blocks Palette, drag the Stop all block into the Script Area and attach it beneath the say [Game over] block

This will ensure that all other scripts stop when the timer reaches 30 seconds.



Extensions

  • Add another costume to the Shark sprite so that as it swims it mouth opens and closes
  • Add a High Score variable which updates when the Score is greater than the existing High Score
  • Add a random feature to the position the fish first appear
  • Change the routes the fish swim

Space Invader

Introduction

This game is based very loosely on the classic early shootem-up game of Space Invaders. In this game there is only one alien, but if you want to make the game more complex you could duplicate the alien as many times as you wish.

List of techniques

  • Importing backgrounds
  • Painting Sprites
  • Keyboard input for moving sprites
  • Random movement of a Sprite
  • Duplicating Scripts
  • Importing and playing sounds
  • Sprite on Sprite collision detection
  • Changing Sprite costumes in response to a collision
  • Score variable
  • Forever loop
  • If loop
  • Green Flag Scripts



 Our first task is to provide a background for the game. We will import a readymade background - but we could draw our own.

Once Scratch has loaded, click on the Stage icon in the Sprites List Area.

Then click on the Backgrounds tab above the Script Area

And then click the Import button
In the pop-up Import Background window, double-click the Nature folder and then scroll down until you find the stars image file. Click this and then click OK

The Stage should now have a starry background.

Our next task is to create a sprite which will become the laser cannon which we can move and fire to shoot at the aliens.

Click the Paint new sprite button above the Sprite List Area.
To keep things simple we will draw a triangle for our laser cannon (you could draw any shape you like).

Click on the colour you want in the Colour Palette (I'm using a light green). Then click on the Line Draw tool on the Toolbar.

On the canvas draw three lines to form a triangle (or any shape you wish)


Click on the Fill bucket tool on the Toolbar.

Click somewhere in the centre of the triangle shape to fill it with colour. If the paint leaks out and fills the whole screen, click the Undo button and use the paintbrush tool or line tool to close any gaps in the shape before filling it again.

Then click the OK button
We'll now delete the Scratch the Cat sprite. We could have deleted it earlier (or later) or changed its shape.

Right-click (Ctrl-click on a Mac) on the Sprite itself or its icon in the Sprite List Area.

In the pop-up list click on delete.


If you feel your laser cannon is too large, you can shrink it by clicking on the Shrink Sprite button above the Stage Area and then clicking several times on the Sprite in the Stage Area.

Next to the Shrink Sprite button is the Grow Sprite button which you can use if you accidentally shrink your Sprite too much.
Now we have created a Sprite, we can begin to program it.

Click on the Control button above the Blocks Palette Area

From the Blocks Palette Area, drag the when space key pressed block into the Script Area



Click the drop down menu on the when space key pressed block which you have just dragged into the Script Area

From the drop down list, click on right arrow

This tells the Script to do something when the right arrow key is pressed on the keyboard
Click the Motion button above the Blocks Palette

From the Blocks Palette drag the point in direction 90 block into the Script Area and attach it to the when right arrow key is pressed block

Click the drop down menu on this block (ie on the 90) and from the list click on (90) right. It is not essential to do this as it is already set to point right.


From the Blocks Palette, drag the move 10 steps block into the Script Area and attach it below the point in direction 90 block in your script

You can now check how this script is working by pressing the right arrow on your keyboard. You can drag the Sprite back to the left if it reaches the edge of the screen.
textTo create a script for the left arrow key we could repeat the above steps. A quicker way is to duplicate the script we have just written and then change it.

Right-click (Ctrl-click on a Mac) on the when right arrow key pressed block and on the pop-up menu click duplicate


On the new script, change right arrow to left arrow in the when right arrow key pressed block

Change the point in direction 90 block to read point in direction (-90) left

You can now check these two scripts by pressing the left and right arrow keys to move your laser cannon across the bottom of the screen.


You will find that the cannon sprite flips upside down when travelling to the left. To prevent this click on the Only face left-right button above the Script Area text

Now we need to create a laser bullet for the cannon to fire. Click the paint new sprite button above the Sprite List Area (as in step 3).

Click on the colour you would like to use (I'm using yellow) in the Colour Palette and then using either the Line Tool or the Paintbrush Tool, draw a short vertical line on the canvas. Then click OK.
We now need to write a script to control this Sprite.

Click on the Control button above the Blocks Palette and from the Blocks Palette drag the when space key pressed block into the Script Area.

First of all we must tell the bullet Sprite to go to the same place on the Stage as the laser cannon Sprite (ie Sprite 2).

Click on the Motion button above the Blocks Palette and from the Blocks Palette drag the go to _  block into the Script Area and attach it below the when space key pressed block.

Click on the drop down menu on this block and then click on Sprite 2 in the menu


Now drag the point in direction 90 block from the Blocks Palette into the Script Area and attach it beneath the go to Sprite 2 block

Click on the drop down menu on this block (ie the 90) and from the menu select (0) up


From the Control Blocks Palette Area drag the repeat 10 loop block into the Script Area and attach it beneath the point in direction 0 block

Change the 10 to 50 on the repeat block in the script by clicking in the pane, deleting the 10 and typing 50
From the Motion Blocks Palette, drag the move 10 steps block into the Script Area and put it into the repeat 50 loop

This tells the bullet to keep moving up the screen 10 steps, fifty times (ie a total of 500 steps). This is far more than is needed but it makes sure the bullet reaches the top of the screen.

You can now test this Script by moving the cannon around with the arrow keys and firing the laser with the space bar.


It would be good if the laser cannon made a noise. So, click the Sounds tab above the Script Area and then click the Import button.

We could record our own sound effect but this time we will use one which comes with the Scratch program

Double-click the Electronic folder to open it and then click on the Laser1 sound file. Then click OK.

Click on the Scripts tab to show the Script for this Sprite

From the Sound Blocks Palette, drag the play sound Laser1 block into the Script Area and attach it beneath the point in direction 0 block.

It should insert itself if you drag the block to just below the point in direction 0 block. It doesn't matter if it is above the point in direction 0 block as long as it isn't inside the repeat 50 loop otherwise the laser sound will play 50 times as it travels up the screen.

Now when you press the space bar, your laser should make a sound when it is fired.
Now we need to make something for the laser to fire at. Press the paint a new sprite button (as in Step 3 above) and then use the paint tools to create something alien-looking. It doesn't matter if you make it too large, you can always shrink it.

Click the OK button when you are finished being creative.


Our alien Sprite needs two costumes: one its normal cuddly self and another showing it being blown-up after being hit by the laser bullet.

Click on the Costumes tab above the Script Area for this Sprite and then click the Copy button
You will now get a copy of the Sprite's original costume (called costume 2). Click the Edit button for this new costume.

Use the paint tools to show a blown-up alien.

Click OK when you are finished.
Now we need a Script for the Alien Sprite to move it around the screen and detect when it has been hit by the bullet.

Click on the Scripts tab above the Scripts Area and from the Control Blocks Palette drag the when Green Flag clicked block into the Script Area

Then drag the Forever loop block from the Blocks Palette into the Script Area and attach it beneath the when Green Flag clicked block.
From the Motion Blocks Palette, drag the go to x: _ y:_ block into the Script Area and insert it into the Forever loop.
Change the co-ordinates in the go to x: _ y:_ block so the block now says go to x: 0 y: 110

Press the Green Flag button which is above the Stage Area on the right.

If you try dragging the alien sprite around the stage it will keep shooting back to its (0,110) co-ordinate.

Press the Red button next to the Green Flag button to stop all scripts from running.





The game would be extremely easy if every time the alien was shot it reappeared in the same location. We will now make it appear in a random place on the screen.

From the Operators Block Palette, drag the pick random 1 to 10 block into the go to x: 0 Y: 110 block to replace the 0 after x:

Change the range of numbers in the pick random block so it reads pick random -200 to 200
We will leave the y: value at 110 so it always appears the same distance away from the cannon each time (you could put another random block in the y: co-ordinate pane if you wish).

From the Control Blocks Palette, drag the wait 1 secs block so it is inside the Forever loop below the go to x: pick random -200 to 200 y:110 block
We will now make it stay on the screen for a random amount of time, between 1 and 5 seconds, before moving to a new location.

From the Operators Block Palette, drag the random 1 to 10 block into the wait 1 secs block in the Script Area to replace the 1

Change the range so the block now reads wait [pick random 1 to 5] secs

You can now test this script by clicking on the Green Flag button. The alien should keep re-appearing at different locations after varying periods of time. Press the Red button when done.
The next stage is it detect when the bullet sprite  hits and change the costume of the alien sprite.

From the Control Blocks Palette, drag the If loop block into the Script Area.

For the moment there is no need to attach it to the script

From the Sensing Blocks Palette, drag the diamond-shaped touching _ ? block into the diamond shaped pane at the head of the If loop block in the Script Area.

Click the drop-down list on the touching _ ? block and from the list select Sprite 3 (ie the bullet Sprite)

This instruction check if the alien sprite is touching the bullet sprite.
From the Looks Blocks Palette drag the switch to costume block into the Script Area and insert it into the main script just below the when Green Flag clicked block.

If necessary, change the block so its says switch to costume [costume1]

Now drag the switch to costume block from the Blocks Palette and insert it into the If loop in the Script Area

If necessary, change the block so it reads switch to costume [costume2]

Now to add a sound effect.

Click the Sounds tab above the Script Area. Double-click the Electronic folder and then click on the Screech sound file.

Now click the OK button
Click the Scripts tab above the Script Area to return to the script

From the Sound Blocks Palette, drag the play sound Screech until done block into the Script Area and insert it into If loop after the switch to costume [costume2] block


From the Control Blocks Palette, drag the when Green Flag clicked block  into the Script Area

Now drag the Forever loop from the Blocks Palette and attach it to the when Green Flag clicked block

Drag the If loop into the Forever loop

You can test this new Script by pressing the Green Flag button above the Stage Area

You'll see that the problem is that when the alien re-appears at its next location it is still in its blown-up state (costume 2). After being hit we need the show the blown-up costume for a while (until the Screech sound ends) and then return the Alien Sprite to its original costume (costume 1)



From the Looks Blocks Palette, drag the switch to costume block into the Script Area and insert it into the If loop below the play sound Screech until done block

If necessary, change the block so it reads switch to costume [costume1]
We can now do a bit of tidying-up.

Drag the Forever loop block down from the switch to costume [costume1] block, and then remove the switch to costume [costume1] block by dragging it into the Blocks Palette Area

Now drag the switch to costume [costume1] block from the If loop and insert it into the Forever loop above the go to x: pick random -200 to 200 y: 110 block

Re-attach the Forever loop block to the when Green Flag clicked block


Last of all we need to add some sort of scoring system.

Click on the Variables button and then the Make a variable button

In the pop-up window, type Score as the variable name and then press OK
Drag the set score to 0 block into the Script Area and insert it into the lower of the two Scripts just below the when Green Flag clicked block

Now drag the change Score by 1 into the Script Area and insert it into the If loop (anywhere in the loop will do)


To give the player time to see the effect of their successful shot, drag the wait 1 secs block from the Control Blocks Palette Area to the Script Area and insert it into the If loop below the change Score by 1 block
To make the game a little more challenging, let's add a Script to enable the Alien Sprite to fire at the Laser Cannon Sprite.

Click on the Paint new sprite button and create an alien-looking laser bolt.

You could duplicate the existing laser bullet sprite (Sprite 3) to save time but you will then need to edit the script for the new laser bolt sprite.


By now you could probably create your own Script for the Alien laser bolt Sprite.

Here is a simple Script you could use.

Alternatively, you might want to add a random wait block at the start of the forever loop
You will also need to create a blown-up costume for the Laser Cannon Sprite and add to its Script to detect and respond when it is hit by the Alien's Laser Bolt Sprite - here is one example of how the script can be modified.




Extensions

  • You could add a variable to decrease the number of lives each time the Laser Cannon Sprite has been hit.
  • You could add a variable to show a High Score 
  • You could increase the number of aliens (simply duplicate the Alien Sprite)
  • You could improve the procedure for the Alien Sprite to make it move across and down the screen as in the original version of the game