This program doesn't have much in the way of scripts - the interest in this program lies mainly in the challenge of creating the puzzle itself, which is best done in a decent graphics program like Paint Shop Pro (or any program that can handle layers, such as the free programs the GIMP and Paint.net).

You can make your own puzzle if you like but be warned that it's a bit tedious to create as many as 28 pieces (the number used in my puzzle). You could always create a puzzle with fewer pieces. See further down this page for instructions on creating your own puzzle. As you have guessed, every piece is a sprite, and each sprite has had its 'draggable on website?' option turned on (at the top of the script area) so that it can be dragged on a web page animation or in presentation mode.

As stated on the text sprite, this program works best in presentation mode. This is partly so you can see the bright red background through the gaps when you have not placed the pieces correctly, but its also so that the top left piece cannot be moved (sprites can always be dragged around in design mode, so that's why we don't want people to use design mode). If the top left sprite gets moved (dragged) then it automatically comes to the front and therefore obscures the timer monitor. A more sophisticated and better version of this program on the next page solves that problem. So don't try to complete the puzzle below - it's too difficult. Just spend a minute working with it to get a feel for how it works.

Download the above program by clicking here so that you can examine the scripts and so that you can run it in Presentation mode.

You will find a yellow sprite called 'Intro' with text on it and the following scripts attached to it:

So when the green flag is clicked the sprite with text is placed correctly then moved to the front (all the different sprites are in layers, one on top of the other) and made visible.

When the 'Intro' sprite is clicked then it hides itself, resets the timer and broadcasts the message 'initialise'.

You will find that each puzzle piece sprite has two simple scripts like this (these are the scripts for the second piece in the top row):

Thus when the initialise message is received the sprite is moved to a random location (not to close to the edge) and moved to a random layer within the stacking order of the sprites (otherwise an ultra-intelligent player like yourself might be able to deduce a relationship between the layers and the correct locations of the sprites). There is also a script which responds to a 'give_up' message by slowly sliding the piece to its correct location (ask yourself how I knew the coordinates for the correct location of each piece).

A simple script broadcasts the 'give_up' message whenever the 'g' key is pressed:

I attached this script to the Stage but it could have been attached to anything.

So what do I expect you to do with this project? I don't expect you to make your own puzzle unless you really want to (it's not very easy), though I do give instructions lower down this page. I hope you will add a couple of features to the program, though. The most obvious thing to add would be the detection of the completion of the puzzle, as demonstrated on the next page. The program on the next page also demonstrates how pieces can be made to snap into position when they are placed close to their correct positions. Here is an easier suggestion: instead of just allowing the player to take as long as (s)he wants to finish the puzzle, decide on a time limit (600 seconds?) after which the remaining pieces will slide into place by themselves (because the 'give_up' message has been broadcast). People will hate you for not letting them finish, of course, but life is tough ;>( When you're testing your program you will want to limit the time to a very short time, of course, so you don't have to wait too long. You could maybe have a monitor that displays the remaining time rather than the elapsed time?

As you think about possible improvements be aware that 'clicking' a sprite and 'dragging' a spite are two very different things in Scratch. If you write a script that responds to someone clicking on a sprite then that script will NOT respond to the dragging of that sprite. And you can't get around this by using the 'mouse down?' sensor to detect a drag operation because it only detects the beginning of the drag...

How to make your own puzzle (optional)

I designed the following pattern in Paint Shop Pro, starting with a pattern of rectangular blocks which I then distorted with the paint brush. You are welcome to use this picture (it has the same dimensions as the Scratch stage, 480 x 360 pixels) or you can make your own. Be sure NOT to save a picture like this in JPEG format otherwise the pure colours will be degraded and many unwanted colours will be introduced by the JPEG compression process. The GIF format would be a good choice since this format can store pictures with up to 256 colours with no degradation at all.

To use this pattern to make your selected image into puzzle pieces you could try the following steps:

  1. Find a photo you like on the internet
  2. Resize it and crop it so that it has dimensions 480 x 360 pixels.
  3. In Paint Shop Pro, create an image that has two layers, with the above image in the bottom layer and your own image in the top layer.
  4. Save this image in the PSPimage format in case you need to work on this image in multiple sessions. JPEG and GIF won't do since neither of those formats can have multiple layers
  5. With the bottom (hidden) layer selected, click the image with the magic wand tool (tolerance and feathering set to zero) to select an area of uniform colour from the bottom layer - a puzzle-piece-shaped selection should appear.
  6. Select the top layer and copy (Ctrl-C) the selected part of the top layer
  7. Paste this into a new image (Ctrl-V)
  8. Select the central part of the new image using the magic wand tool
  9. Choose File>Save to begin saving the image. Choose the GIF format, but don't click the Save button until you first click the 'Options' button then 'Run Optimiser' then, in the transparency tab, choose 'outside the current selection'. Now complete saving your first picture in the GIF format - it will be saved with transparent areas that will import nicely into Scratch.

Since I know no way of triggering a script at the end of a drag operation I created a forever loop for each piece which checks whether it is close to its correct position. If so then it jumps to its exact correct position then stamps its image onto the stage then hides itself. This is helpful because the stamped image cannot be accidentally moved and because the stamped image will never hide the timer monitor. A 'score' variable is incremented every time a piece snaps into position and when the score reaches 28 triumphant music plays...

Note that in the program below the timer monitor freezes when the puzzle is completed (instead of displaying the included timer monitor I display the value of a variable called 'time' which is continually updated to contain the value of 'timer' until the puzzle is finished).


I can solve the puzzle in less than 200 seconds - can you?