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

Pong

Introduction

This is a simplified version of the classic ping-pong game. The tutorial shows images from the downloadable version of Scratch (1.4) but the programming will work in the same way on the on-screen version Scratch (2.0)

Techniques included

The programming techniques which this game includes are:

• Drawing backgrounds
• Drawing sprites
• Importing sprites
• Green Flag scripts
• Key press scripts
• Sprite touching sprite detection
• Sprite touching colour detection
• Adding sound to sprites
• Updating score variable
• Updating High Score variable
• Changing sprite costume

Tutorial

Load up the program from either the website or using the download version. This is the start-up screen from Scratch 1.4 (the download version). The online version is similar but the various panes and and toolbars are in slightly different places. The online version includes some additional features which are not found in the download version - and so this tutorial will work with both versions.
	The first thing we will do is provide a background for our game. To change the design of the Stage (ie the background), click on the Stage icon in the Sprites Area
Notice that the heading for the Script Area shows you are now working on the Stage. Click on the Backgrounds tab and then the Edit button beside the thumbnail image of the Stage.
	The Paint Editor pop-up window will now appear. Select the colour required for the background (in our case green) from the Colour Palette, and then click on the Fill Bucket in the Toolbar. Now click somewhere on the canvas to fill it with the desired colour.
Next we need to add a line on the left of the Stage. We will need to protect this line from being touched by the ball. Click on white in the Colour Palette and then the Line Tool on the Toolbar. Change the line thickness by clicking in the Options Area (where it says Brush Size) and then selecting a middle-sized brush. Drag the line from top to bottom along the left side of the Canvas. Click OK to finish.
	Next we need to create a bat. Click on the button to Paint a New Sprite in the Sprites Area Sprites are objects which can be programmed with Scripts (see below)
This will take us once more to the Paint Editor. Click on the Line Tool on the Toolbar. Then select a middle-sized brush size from the Options Area. Drag a vertical line somewhere on the Canvas about the size shown here. Then click OK to exit the Paint Editor
	We could have done it earlier, but its now time to delete the default Sprite, Scratch the Cat. Right click (or Ctrl-click on a Mac) on the Sprite 1 (Scratch Cat) icon in the Sprites Area and then click on delete from the pop-up list. Alternatively you can Right Click (or Ctrl-click on a Mac) on the Sprite itself on the Stage Area.
Now drag the bat sprite (Sprite 2) which we have just created to the left of the Stage, just in front of the white line.
	We are now ready to start programming. Click the Control button to bring up the control blocks in the Blocks Palette. Drag the when 'space' key is pressed block from the Blocks Palette into the Script Area. This control block senses which key is being pressed on the keyboard and then carries out any instructions which are attached to it.
Click on the drop down menu on the block and click up arrow in the drop down list. This tells the control block to respond whenever the right arrow is pressed on the keyboard.
	Now we need to add some instructions to be carried out when the key is pressed. Click on the Motion button and then drag the point in direction 90 block into the Script Area and then drag it to just below the control block so that it attaches itself to that block. Now click on the drop-down menu and select (0) up from the list.This will tell the Sprite to face upwards so when it moves it will move up the screen.
Now drag the move 10 steps block from the Motion Blocks Palette and attach it to the point in direction block in the Script Area This instruction tells the Sprite to move 10 steps in whichever direction the Sprite is pointing.
	You can now test whether the instruction works by pressing the Up Arrow key on the keyboard. You will notice that the Sprite twists round to face in the upwards direction. This would be fine if it was a boat, an animal or a car, but we want our bat to keep facing forwards. To instruct the bat Sprite to continually face to the right, click the small only face left-right button in the pane above the Script Area Drag the Bat Sprite back down the screen and try pressing the Up Arrow key again
You can probably work out for yourself how to make another block which tells the Bat Sprite to move down the screen when the Down Arrow key is pressed - but to save time, we will use the existing Script by duplicating it. Right-click (Ctrl-click on a Mac) on the orange Control block at the top of the script we have just created and select duplicate from the pop-up menu
	Change the orange control block to read when down arrow key is pressed by choosing this option from the drop-down menu. Change the point in direction block to read point in direction (180) down. Now test your two Scripts by pressing the Up Arrow Key and Down Arrow Key to see if the Sprite moves up and down the screen. If not, check the blocks match those shown here.
Now we have programmed the bat to move up and down, we need something for it to hit. This time, instead of drawing our own ball, we will use an image from the Scratch program's library of image files. Click on the Choose new sprite from file button in the Sprites Area
	This will bring up the New Sprite Window. Double-Click on the Things folder.
Scroll down the list of images in the folder until you reach the tennisball image. Click on it and then click the OK button.
	You should now have the new tennis ball sprite showing on the Stage Area along with the bat sprite. However, it looks a bit too large so, to shrink it, click on the Shrink sprite button above the Stage Area.
Then keep clicking on the tennis ball sprite until it has shrunk to a reasonable size. If you feel you have overdone it, you can enlarge it by clicking the Grow Sprite button beside the Shrink Sprite button and then clicking a few times on the tennis ball sprite.
	Now we need to create a script to control how the ball sprite will move. Click on the Control button above the Blocks Palette and then from the Blocks Palette drag the when green flag clicked block into the Script Area and then drag the Forever loop block into the Script Area. Don't attach these two blocks together yet (it doesn't matter if you do though, you can always drag them apart again).
Now click the Motion button and then drag the point towards block into the Script Area and attach it below the when green flag clicked block. From the drop down menu on this block select Sprite 2. This tells the ball sprite that when the game starts it is to point towards the bat sprite before moving. This will make the game easier to play at the beginning. The drag the go to x: 0 y: 0 block into the Script Area and attach it beneath the point towards block. Change the value of x: to 200 by typing in the white area on this block. Drag the Move 10 steps block into the Script Area and put it into the Forever loop. Then change the move 10 steps to move 5 steps.
	Drag the if on edge bounce block from the Blocks Palette into the Script Area and attach it to the move 5 steps block in the Forever loop. The drag the Forever loop block and attach it to the go to x: 200 y:0 block You can now test the script controlling the ball sprite by clicking on the Green Flag button in the right hand corner above the Stage Area. The ball should first jump to the right of the stage ( ie x: 200, y: 0 co-ordinates) and then start moving across the stage towards the bat. When it reaches the edge of the stage area it will bounce and so-on until you press the Red button beside the Green flag button. This stops all scripts.
Our next job is to get the ball sprite to do something if it hits the bat sprite. From the Control Blocks Palette, drag the If loop block into the Script Area. You may need to scroll down the Block Palette Area to find the If loop block as it is somewhere near the bottom.
	Click on the Sensing button to bring up the Sensing Blocks in the Blocks Palette Area. Drag the diamond shaped touching _ ? block into the diamond shaped area at the top of the If loop in the Script Area. The click the drop down list button on the touching _? block and select Sprite 2. This tells the ball sprite that it will need to do whatever is contained inside the If loop if it touches the bat sprite (ie Sprite 2).
We now need to program the instructions inside the If loop. Click on the Motion button and from the Motion Blocks Palette, drag the point in direction 90 block into the Script Area and put it inside the If loop.
	As we want the ball to bounce off the bat in the opposite direction to that in which it was travelling when it hit the bat, we need to do a quick calculation as to what the new direction will be. Click the Operators button and from the Operators Block Palette drag the oval shaped _ - _ block into the oval shaped pane on the point in direction _ block in the If loop in the Script Area.
To find out the direction the ball sprite is heading when it strikes the bat sprite, firstly type 360 into the first pane of the point in direction _ - _ block in the If loop. Then bring up the Motion Blocks Palette by clicking the Motion button and from this drag the direction block into second pane of the the point in direction 360 - _ block This tells the ball sprite that it needs to point in the opposite direction when it strikes the bat sprite (ie 360 degrees minus the direction it is now travelling).
	Drag the If loop into the Forever loop so it attaches below the if on edge bounce block. Drag the Forever loop up and attach it to the blocks below the when green flag clicked block. The script for the ball sprite should now look like this. You can test this new script by clicking the green flag button and watching what happens when the ball hits the bat. When you are ready, stop all scripts by clicking the big red button beside the green flag button.
Now, let's add a sound when the bat hits the ball. Click on the Sounds tab above the Script Area for the ball sprite. The click on the Import button (or you could record your own sound if you prefer). In the Import Sound pop-up window, double-click the Effects folder and from from this select the Pop file and click OK.
	Click the Sound button above the Blocks Palette Area and drag the play sound Pop block into the Script Area and insert it into the If loop. It doesn't matter if it attaches itself above or below the point in direction block as long as it is inside the loop (it doesn't matter if the pop sound comes before or after the ball sprite changes direction). Click the Green Flag button to check this change to the script. Click the Red button to stop all scripts when you are ready
Now we have programmed the sprites to do what we want, it's time to add some means of presenting this player with a score. For this we will need a variable called Score. Click the Variables button above the Blocks Palette Area. Then click the Make a Variable button In the Pop-up window type Score for the variable name and then click the OK button.
	You will see that the Score variable is displayed as a counter in the Stage Area. This can be removed by clicking the checkbox beside the Score variable block in the Blocks Palette Area Drag set Score to 0 block from the Blocks Palette into the Script Area and attach it to the existing script under the go to x: 200 y: 0 block Drag the change Score by 1 block from the Blocks Palette Area into If loop in the script (again it doesn't matter where as long as it is inside the loop). You can check the effect of this change by clicking the Green Flag button to play the game and then the Red button to stop playing.
We now need to detect when we have missed hitting the ball. Firstly, click the Control button and drag a new If loop into the Script Area from the Control Block Palette Area. For now do not attach it to the script. Click the Sensing button and from the Sensing Control Block Palette, drag the touching colour _ ? block into the space at the top of the If loop block.
	This If loop is going to detect whether the ball sprite touches the white line behind the bat sprite (ie if the bat has missed hitting the ball). To ensure that the colour which the If loop detects is accurate, click in the colour pane in the touching colour _ ? block in the If loop block and then click on the white line on the Stage Area with the eye dropper mouse-pointer.
Import the BellToll sound file into the Sounds part of the Script Area (as above) - or any other sound which you think is appropriate. Click the Sound button and then drag the play sound BellToll until done block from the Sound Block Palette into the new If loop in the Script Area. Click the Control button and drag the  Stop All block from the Block Palette into the If loop so it comes after the play sound BellToll until done block. It is important that these are in the correct order otherwise the script will stop before the sound has played.
	Drag the new If loop into the Forever loop into the when Green Flag clicked script as shown. As it is inside the Forever loop the script will keep checking whether the ball sprite is touching the white line as long as the game is being played. You can now play the game by clicking the Green Flag button to see what happens if you miss the ball.
Next, it would be useful to record the Highest score and see if you can beat it it each time you play. This will require another If loop in the script. This time we will need to drag the Greater Than Operator block into the space in the header for the If loop.
	Make a new variable called High Score and then drag the blocks into the If loop to make the following statement: If Score > High score set High Score to Score
This new If loop should now be dragged inside the If touching colour _? loop in the script (as shown). It would still work outside this loop but the High Score is usually updated at the end of the game rather than during the game. You could also drag the Score and High Score displays in the Stage Area so they do not hide the top of the screen where the bat needs to hit the ball.
	Finally, to make the game more difficult for those who become skilful, let's make the bat smaller if they get a score higher than 15. Click on the button for the bat sprite (Sprite 2) in the Sprite Area. Then click on the Costumes tab Click on the Paint button beside the New costume label. In the Paint Editor window, draw a shorter bat than the first one and then click OK
In the Script Area for the bat sprite, using your knowledge of  programming create a new script: When Green Flag clicked Forever If High Score > 15 switch to costume costume 2 as shown  Note: the switch to costume block is in the Looks Blocks Palette

Extensions 

 To extend the game further you could:

• Increase the speed of the ball as the high score increases
• Add another bat so the game becomes a two-player game
• Add a random element to the direction in which the ball bounces off the bat