Create a simple puzzle game with flash

There may be a lot of flash friends who have tried to make a jigsaw puzzle of their own, but regret not knowing how to implement it or not knowing ActionScript (hereinafter referred to as). Don't worry, the bandits will tell you today how to make a simple jigsaw puzzle out of Flash's commonly used as a simple jigsaw puzzle, as I say, is not simply a patchwork of pictures.

The finished product is as follows: You can use the mouse to drag the image fragment above to the appropriate position in the box below, for the convenience of everyone to find a bit, the game gives a certain degree of transparency of the original as a reference. You can find that the game also designed a "adsorption" function that allows you to easily arrange the puzzle, while the game will automatically determine whether the puzzle is all correctly completed.

Production steps:

The first step: the preparation of the picture

Since it is a puzzle, of course, first of all have pictures, I found is a 320*240 pixel jpg picture, through fireworks cut it into 12 pieces (each 80*80px), and then saved into 12 jpg small picture standby, the name best have a certain law, For example, I named them pic1~pic12, of course, you can also use other image processing tools to achieve this step.

Step two: Create Flash file

Open today's protagonist ――flash, through the menu modify Document ... or ctrl+j Open the document properties panel (because bandits use flash MX, some shortcuts may be different from Flash 5, but bandits will try to give the corresponding shortcut in Flash 5, the shortcut in Flash 5 is CTRL + M), change the screen size to 400*600px, and others to maintain the default value.

Step three: Make the movie Clip to judge the position

In the scene through the menu file import or Ctrl+r imported 12 pieces have been processed small pictures, and then in the original order placed in the bottom half of the scene, select the top left corner, select the menu insert Convert to symbol or press F8 key, in the pop-up convert To the symbol panel select Movie Clip (hereafter referred to as MC), control points selected in the image center (this is important, Flash 5 may not have this option, but fortunately the default value of Flash 5 is the center), name is Check1 (also can be named according to their own custom) , the rest of the pictures are treated in the same way.

Then select Menu Window Properties or CTRL+F3, open the Properties panel, and instance name b1~b12 for each of these pictures in order to call them later in the action. Select All MC (Ctrl + A), Set their alpha properties to 30%, just to make the MC look blurry, so the player can't clearly identify which part to increase the difficulty of the game.

Fourth step: Make the MC used to drag

This is a more important step, we will use this MC to achieve the drawing block and location of the judge, where we use the MC nested button in order to achieve code reuse, this is a very important way, I hope everyone should pay attention to.

Select menu Insert New Symbol ... or Ctrl+f8 New button (hereinafter referred to as BT), named Button_body, after the confirmation into the editing interface, in the timeline (timeline) Right-click Hit frame, select New Keyframe in the shortcut menu to establish keyframes, select the rectangular tool (R), Draw a rectangle, select the selection Tool (V), double-click the rectangle, in the properties panel, the width, height, x coordinates, y coordinates are set to 80, 80, 0, 0 respectively; new MC name Button_action, confirm to enter MC edit window, ctrl+l Open Library (library), drag the button_body you just created, and also set the x and Y coordinates to (0,0).

Next start adding As for BT (button), select the button_body you just dragged in, open the Actions panel through the menu window actions or F9 key (Flash 5 for Ctrl+alt+a), and use the shortcut key ctrl+shift+e ( Flash 5 is for ctrl+e, provided that the Actions panel is selected to convert to expert mode (expert model, this mode is more flexible to write as, recommended), fill in the following code:

On (Press) {//Down mouse StartDrag (_parent, False, 50, 50, 350, 550);////enable the tile to be dragged within a certain range} on (Released) {//Release mouse Stopdrag ();/stop dragging F or (I=1 i <=12; i++) {//Determine where the tile is located if (_parent._x <=eval ("_root.b" +i). _x+40 and _parent._x> =eval ("_root.b" +i). _x -40 and _parent._y <=eval ("_root.b" +i). _y+40 and _parent._y> =eval ("_root.b" +i). _y-40) {// _parent._x = eval ("_root.b" +i) if the dragged Tile center point enters the range of the MC at a certain location. _x;//sets the coordinates of the tile to the appropriate location _parent._y = eval ("_root.b" +i). _y ; } } }

In this way, the drag and drop component button_action is made, in the following production will be repeated use of this MC.

Step Fifth: Make the dragged tiles

Create a new MC, named Pic1 (this name does not matter), OK, go to the edit window, drag button_action in the library, set coordinates (0,0), and then drag the originally imported picture pic1.jpg from the library into coordinates (0,0), Repeat this step until all the tiles have their own corresponding MC.

By the way, make a button, named Button_back, to start a new game after the game is finished.

Sixth step: The complete work of the game

Back in the scene, name the existing layer in the timeline as the "position judgment layer", click the Insert Layer button in the lower-left corner of the timeline, and create a new three layer, named "Tile Layer", "as Layer" and "button and hint layer" respectively. Select tile Layer, Drag the pic1~pic12 in the library into the layer. Special Note: Here is the MC, not the picture, we can hold down the CTRL key and select a discontinuous number of symbol. In order, in the Properties panel, fill in instance name as P1~P12 respectively.

Select button and hint layer, set the second frame as a keyframe (if you are using Flash 5, select the frame four, and add the "tile layer" to the two frame) in the Properties panel (Flash 5 for the frame panel) and fill in the frame label as "F5" Over ", select the Type tool (A), in the middle position written after the prompt, such as:" Good you win!! ", and then drag into the button_back to the appropriate location, and bundled as:

On (release) {prevframe ();//back to Previous frame, start new game//flash 5 should be gotoAndPlay (1)}

Now into the sprint phase, select the As layer, select the first frame, and bundle as:

Stop ();//flash 5 To remove this sentence for (I=1 i <=12; i++) {//Game initialization eval ("P" +i). _x = Random (240) +80;//then set the tile position in a certain area of the top half of the scene eval (" P "+i). _y = Random (160) +70; _root.onenterframe = function () {//flash 5 remove this and last "}", bundle the following as to the second frame of the layer, and bundle the Gotoanfplay (2) b = 0 in the third frame; For (J=1 J <=12; J + +) {if (eval ("P" +j). _x = = eval ("B" +j). _x and eval ("P" +j). _y = eval ("B" +j). _y) {//Determine if the tile is in the correct position, such as The result is b + = 1;//variable plus One}} if (b = = 12) {//If all tiles are positioned correctly gotoandstop ("over");/Show Victory Info}};

At this point, the puzzle game on the production completed, quickly ctrl+enter test it!

Use your head, you can add time limit for the game, increase the difficulty of the game, or in the course of the game with a button to hide/show test pictures and so on