前回の続きです。
Ver.0.1にエフェクトを追加しました。連打しまくるとおかしくなるかも?
それと、ピース(Piece)の綴りを間違えていたのを修正しました。
白く塗りつぶしていた最後のピースを横のほうに表示させるようにしました。
イメージとしては、おもちゃの「できるんです」をイメージ。
次回あたりに大きい画像を縮小して表示させるようにする予定。
ソースコード
<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" nativeDragEnter="onDragEnter(event);" nativeDragDrop="onDragDrop(event);" width="600" height="500" viewSourceURL="srcview/index.html"> <mx:MenuBar labelField="@label" itemClick="useFile(event)" width="100%" id="myMenu"> <mx:dataProvider> <mx:XMLList> <Menu label="操作"> <MenuItem label="スタート" /> </Menu> </mx:XMLList> </mx:dataProvider> </mx:MenuBar> <mx:Image id="myImage" width="100%" height="100%" /> <mx:Move id="myMove" easingFunction="Back.easeInOut" duration="350" /> <mx:Script> <![CDATA[ import mx.effects.easing.*; import mx.controls.Alert; import mx.events.MenuEvent; // 画像のロード判定用 private var loadEnd:Boolean = false; private var file_ary:Array; // 1ピースの幅 private var pieceWidth:Number; // 1ピースの高さ private var pieceHeight:Number; // 空ピースの番号 private var empty:uint; // 完成確認用配列 private var order:Array = new Array(); private var base:Image; // シャッフルしたかどうか private var random:Boolean = false; // メニュー用の関数 private function useFile(e:MenuEvent):void { if(e.label == "スタート") { shuffle(); } } // ドラッグ&ドロップでロード private function onDragEnter(event:NativeDragEvent):void { trace("entered"); var cb:Clipboard = event.clipboard; if(cb.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)) { // ドロップを許可 NativeDragManager.acceptDragDrop(this); } } private function onDragDrop(event:NativeDragEvent):void { if(loadEnd) { for(var i:uint = 0; i <= 15; i++) { myImage.removeChild(myImage.getChildByName(String(i))); } myImage.removeChild(myImage.getChildByName(String(16))); } var cb:Clipboard = event.clipboard; file_ary = cb.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array; trace("ファイル名:" + File(file_ary[0]).name); LoaderRequest(); } private function LoaderRequest():void { var loader:Loader = new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, LoadCompleted); var request:URLRequest = new URLRequest(File(file_ary[0]).url); loader.load(request); } private function LoadCompleted(event:Event):void { // 画像はBitmapでロード var bitmapImage:Bitmap = Bitmap(event.target.loader.content); empty = 15; pieceWidth = bitmapImage.width / 4; pieceHeight = bitmapImage.height / 4; // ピース並べ for(var i:uint = 0; i < 15; i++) { // ピースと同じ大きさのビットマップをつくる var newPieceBitmap:Bitmap = new Bitmap(new BitmapData(pieceWidth, pieceHeight)); // ロードした画像から新しく作ったビットマップにコピー newPieceBitmap.bitmapData.copyPixels(bitmapImage.bitmapData, new Rectangle((i % 4) * pieceWidth, Math.floor(i / 4) * pieceHeight, pieceWidth, pieceHeight), new Point(0, 0)); // ピースの描画 var newPiece:Sprite = new Sprite(); newPiece.addChild(newPieceBitmap); base = new Image(); base.addChild(newPiece); base.width = pieceWidth; base.height = pieceHeight; base.x = (i % 4) * (pieceWidth + 3) + 20; base.y = Math.floor(i / 4) * (pieceHeight + 3) + 30; base.name = String(i); base.addEventListener(MouseEvent.CLICK, click); myImage.addChild(base); } // 空ピースは白い長方形 var emptyPiece:Sprite = new Sprite(); emptyPiece.graphics.beginFill(0xffffff); emptyPiece.graphics.drawRect(0, 0, pieceWidth, pieceHeight); emptyPiece.graphics.endFill(); base = new Image(); base.addChild(emptyPiece); base.width = pieceWidth; base.height = pieceHeight; base.x = 3 * (pieceWidth + 3) + 20; base.y = 3 * (pieceHeight + 3) + 30; base.name = String(15); myImage.addChild(base); var lastPieceBitmap:Bitmap = new Bitmap(new BitmapData(pieceWidth, pieceHeight)); lastPieceBitmap.bitmapData.copyPixels(bitmapImage.bitmapData, new Rectangle(3 * pieceWidth, 3 * pieceHeight, pieceWidth, pieceHeight), new Point(0, 0)); var lastPiece:Sprite = new Sprite(); lastPiece.addChild(lastPieceBitmap); base = new Image(); base.addChild(lastPiece); base.width = pieceWidth; base.height = pieceHeight; base.x = 4 * (pieceWidth + 3) + 20; base.y = 3 * (pieceHeight + 3) + 30; base.name = String(16); myImage.addChild(base); // 完成判定のためIndexをセット for(var j:uint = 0; j < 17; j++) { myImage.setChildIndex(myImage.getChildByName(String(j)), j); } // ピクチャの大きさに合わせてウィンドウの大きさを変更 nativeWindow.width = bitmapImage.width + pieceWidth + 60; nativeWindow.height = bitmapImage.height + 105; loadEnd = true; } // ランダムシャッフル private function shuffle():void { var count:uint = 8888; var pieceNumber:uint; random = true; for(var i:uint = 0; i < count; i++) { pieceNumber = Math.floor(Math.random() * 15); if(checkMove(pieceNumber)) { pieceMove(pieceNumber, random); } } } // ピースクリック時の処理 private function click(event:MouseEvent):void { //ピースの番号 var pieceNumber:int = event.currentTarget.name; trace("click:" + pieceNumber); if(checkMove(pieceNumber)) { pieceMove(pieceNumber, false); } } // ピースが動かせるかチェック private function checkMove(pieceNumber:int):Boolean { var result:Boolean = false; if((pieceNumber == (empty - 4)) || (pieceNumber == (empty + 4))) result = true; else if(((pieceNumber % 4) != 0) && ((pieceNumber - 1) == empty)) result = true; else if(((pieceNumber % 4) != 3) && ((pieceNumber + 1) == empty)) result = true; return result; } // ピース移動 private function pieceMove(pieceNumber:int, random:Boolean):void { var oldEmpty:int = empty; empty = pieceNumber; if(!random) { moveEffect(pieceNumber, oldEmpty); } else { myImage.getChildByName(String(oldEmpty)).x = (pieceWidth + 3) * (pieceNumber % 4) + 20; myImage.getChildByName(String(oldEmpty)).y = (pieceHeight + 3) * Math.floor(pieceNumber / 4) + 30; myImage.getChildByName(String(pieceNumber)).x = (pieceWidth + 3) * (oldEmpty % 4) + 20; myImage.getChildByName(String(pieceNumber)).y = (pieceHeight + 3) * Math.floor(oldEmpty / 4) + 30; } myImage.getChildByName(String(oldEmpty)).name = String(pieceNumber); myImage.getChildByName(String(pieceNumber)).name = String(oldEmpty); indexExchange(pieceNumber); } private function moveEffect(fromNumber:int, toNumber:int):void { myMove.target = myImage.getChildAt(myImage.getChildIndex(myImage.getChildByName(String(fromNumber)))); if(fromNumber == 16) { myMove.duration = 800; myMove.xFrom = (pieceWidth + 3) * 4 + 20; myMove.yFrom = (pieceHeight + 3) * 3 + 30; } else { myMove.xFrom = (pieceWidth + 3) * (fromNumber % 4) + 20; myMove.yFrom = (pieceHeight + 3) * Math.floor(fromNumber / 4) + 30; } myMove.xTo = (pieceWidth + 3) * (toNumber % 4) + 20; myMove.yTo = (pieceHeight + 3) * Math.floor(toNumber / 4) + 30; myMove.play(); if(fromNumber != 16) { myMove.target = myImage.getChildAt(myImage.getChildIndex(myImage.getChildByName(String(toNumber)))); myMove.xFrom = (pieceWidth + 3) * (toNumber % 4) + 20; myMove.yFrom = (pieceHeight + 3) * Math.floor(toNumber / 4) + 30; myMove.xTo = (pieceWidth + 3) * (fromNumber % 4) + 20; myMove.yTo = (pieceHeight + 3) * Math.floor(fromNumber / 4) + 30; myMove.play(); } } // Index交換用関数 private function indexExchange(index:int):void { var indexTemp:int; indexTemp = myImage.getChildIndex(myImage.getChildByName(String(index))); myImage.setChildIndex(myImage.getChildAt(myImage.getChildIndex(myImage.getChildByName(String(index)))), myImage.getChildIndex(myImage.getChildByName(String(empty)))); myImage.setChildIndex(myImage.getChildAt(myImage.getChildIndex(myImage.getChildByName(String(empty)))), indexTemp); // ピース合わせ確認 checkComplete(); } // 完成判定関数 private function checkComplete():void { var complete:Boolean = true; for(var i:uint = 0; i < 15; i++) { if(!(i == myImage.getChildIndex(myImage.getChildByName(String(i))))) { // 不一致があった場合 complete = false; } } // 全て一致した場合 if(complete) { trace("Complete!"); var alert:Alert = Alert.show("complete"); alert.isPopUp = false; alert.cacheAsBitmap = true; moveEffect(16, 15); } } ]]> </mx:Script> </mx:WindowedApplication>↓前回のに上書きしてしまった。
------------------------------------------
2009/9/20 追記
Flex版作りました。
こちら
0 件のコメント:
コメントを投稿