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.
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:
-
Find a photo you like on the internet
-
Resize it and crop it so that it has dimensions
480 x 360 pixels.
-
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.
-
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
-
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.
-
Select the top layer and copy (Ctrl-C)
the selected part of the top layer
-
Paste this into a new image (Ctrl-V)
-
Select the central part of the new image using
the magic wand tool
-
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.