이번에는 좀 상세히 설명하기 위해, 코딩하는 순서대로 3번으로 나누어 설명하겠습니다.

아래의 코딩은 왼쪽 8개 이미지 만드는 것뿐입니다.

복사하여 실행하여 보십시오.

//AS3_PuzzleGame.fla

var puzzlePiecesArr:Array;

// 나누어진 이미지 8개 배열

var puzzlePiecesFound:Array;

/*

나누어진 이미지 8개의 name 배열

0, 1, 2, 3, 4, 5, 6, 7

*/

var totalPuzzlePieces:Number;

// 나누어진 이미지의 총 갯수 즉 8

var puzzleBmp:BitmapData;

// 원 이미지

var imagesArr:Array;

// 원 이미지 3개의 배열

var imageLoader:Loader;

// 원 이미지 올리기

var requestURL:URLRequest;     

// 원 이미지 위치

var holder:MovieClip;

init();

function init(){

            totalPuzzlePieces = 8;

            imagesArr = new Array("image1.jpg", "image2.jpg", "image3.jpg");

            // 3개의 이미지 배열 생성

            puzzlePiecesArr = new Array();

            // 나누어진 이미지 8개 배열 생성

            puzzlePiecesFound = new Array();

            // 나누어진 이미지 8개의 name 배열 생성

            // Create the image Loader

            imageLoader = new Loader();

            imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadImg);

            // Create the URL Request

            var index:Number = Math.floor(Math.random() * imagesArr.length);

            requestURL = new URLRequest(imagesArr[index]);

            // 이미지 로드

            imageLoader.load(requestURL);

            // Setup a holder mc to hold the puzzle pieces

            holder = new MovieClip();

            addChild(holder);

}

function onLoadImg(evt:Event):void{

            // Determine the width and height of each puzzle piece.

            // Each puzzle consists of 4 columns and 2 rows.

            var widthPuzzlePiece:Number = imageLoader.width / 4;

            var heightPuzzlePiece:Number = imageLoader.height / 2;

            // Draw the image from the movie clip into a BitmapData Obj.

            puzzleBmp = new BitmapData(imageLoader.width, imageLoader.height);

            puzzleBmp.draw(imageLoader, new Matrix());

            var puzzlePieceBmp:BitmapData;

            var x:Number = 0;

            var y:Number = 0;

            // 8번 반복하면서, 8개로 나누어진 이미지를 복사한다.

            for (var i:Number = 0; i < 8; i++)

            {

                        puzzlePieceBmp = new BitmapData(widthPuzzlePiece, heightPuzzlePiece);

                        puzzlePieceBmp.copyPixels(puzzleBmp, new Rectangle(x,y,widthPuzzlePiece,heightPuzzlePiece), new Point(0,0));

                // 아래 설명 1 참조

                        makePuzzlePiece(puzzlePieceBmp, i);

                        x += widthPuzzlePiece;

                        if(x >= puzzleBmp.width)

                        {

                                   x = 0;

                                   y += heightPuzzlePiece;

                        }

            }

            arrangePuzzlePieces();

}

function makePuzzlePiece(puzzlePiece:BitmapData, index:int){

            var puzzlePieceClip:Bitmap = new Bitmap(puzzlePiece);

            var tmp2:MovieClip = new MovieClip();

            tmp2.addChild(puzzlePieceClip);

            tmp2.name = String(index)           // Added for Strict Mode

            holder.addChild(tmp2);

            puzzlePiecesArr.push(tmp2);

            // This is used to check if the same piece has been placed

            puzzlePiecesFound.push(tmp2.name);

}

function arrangePuzzlePieces():void

{

            var widthPuzzlePiece:Number = puzzlePiecesArr[0].width;

            var heightPuzzlePiece:Number = puzzlePiecesArr[0].height;

            var locationArr:Array = new Array();

            locationArr.push({x:10, y:10});

            locationArr.push({x:10 + widthPuzzlePiece + 5, y: 10});

            locationArr.push({x:10, y:10 + heightPuzzlePiece + 5});

            locationArr.push({x:10 + widthPuzzlePiece + 5, y:10 + heightPuzzlePiece + 5});

            locationArr.push({x:10, y:10 + (heightPuzzlePiece + 5) * 2});

            locationArr.push({x:10 + widthPuzzlePiece + 5, y:10 + (heightPuzzlePiece + 5) * 2});

            locationArr.push({x:10, y:10 + (heightPuzzlePiece + 5) * 3});

            locationArr.push({x:10 + widthPuzzlePiece + 5, y:10 + (heightPuzzlePiece + 5) * 3});

            // 아래 설명 2 참조

            var index:Number = 0;

            var coordinates:Object;

            while(locationArr.length > 0)

            {

                        coordinates = locationArr.splice(Math.floor(Math.random() * locationArr.length), 1)[0];

                        // 아래 설명 3 참조

                        puzzlePiecesArr[index].x = coordinates.x;

                        puzzlePiecesArr[index].y = coordinates.y;

                        index++;

            }

}

설명 1

puzzlePieceBmp = new BitmapData(widthPuzzlePiece, heightPuzzlePiece);

puzzlePieceBmp.copyPixels(puzzleBmp, new Rectangle(x,y,widthPuzzlePiece,heightPuzzlePiece),

new Point(0,0));

100 픽셀 x 133.5 픽셀 사각형을 만들고, 8번 반복하면서,

8개 나누는 이미지를 복사합니다.

설명 2

아래와 의미가 같습니다. 즉 바꾸어도 동일한 결과가 나옵니다.

push() 메서드는 배열에 요소를 삽입합니다.

locationArr.push({x:10, y:10});

            locationArr.push({x:10 + 100 + 5, y: 10});

            locationArr.push({x:10, y:10 + 133.5 + 5});

            locationArr.push({x:10 + 100 + 5, y:10 + 133.5 + 5});

            locationArr.push({x:10, y:10 + (133.5 + 5) * 2});

            locationArr.push({x:10 + 100 + 5, y:10 + (133.5 + 5) * 2});

            locationArr.push({x:10, y:10 + (133.5 + 5) * 3});

            locationArr.push({x:10 + 100 + 5, y:10 + (133.5 + 5) * 3});

설명 3

coordinates = locationArr.splice(Math.floor(Math.random() * locationArr.length), 1)[0];

Math.random()는  무작위 숫자(0 <= n < 1)를 만드는 메서드이고,

Math.floor(var:Number) 메서드는 정수로 바꾸는 것입니다.

splice() 매서드는 배열에 요소를 삽입합니다.

slice([startIndex:Number], [endIndex:Number])