AS3連連看源碼教程（三）

連連看圖標其實四周有一圈爲空的數組，相當於已經連接消除的樣子。主要是用於連接成功邊上的圖標後，生成連接線的效果。

我們修改創建圖標的方法：createIconArray()，根據判斷來創建，四周不創建直接賦值爲null

package com.llk.page 
{
	import com.llk.play.ChooseCase;
	import flash.display.Sprite;
	import com.llk.icon.Icon;
	import com.llk.model.DataIcon;
	import com.llk.event.BaseEvent;
	import flash.events.Event;
	
	
	/**
	 * ...
	 * @author ragged
	 */
	public class PagePlay extends Sprite 
	{
		/**
		 * 遊戲背景
		 */
		private var _bg:Sprite;
		/**
		 * 連連看圖標，二維數組
		 */
		private var _iconArr:Array = [];
		/**
		 * x軸方向的圖標數量
		 */
		private var _numX:uint = 10;
		/**
		 * x軸方向的圖標數量
		 */
		private var _numY:uint = 10;
		/**
		 * 選擇框
		 */
		private var _chooseCase:ChooseCase;
		/**
		 * 第一次選擇的圖標
		 */
		private var _firstIcon:Icon = null;
		
		
		
		
		
		public function PagePlay() 
		{
			super();
			this._bg = new ResPlayBg;
			this.addChild(this._bg);
			this.createIconArray();
			//
			this._chooseCase = new ChooseCase();
			this.addChild(this._chooseCase);
			this._chooseCase.visible = false;
		}
		/**
		 * 當圖標被點擊時
		 * @param	$evt
		 */
		private function whenClick($evt:Event):void
		{
			if (this._firstIcon)
			{
				//第二次選擇，開始判斷相連消除
				
			}
			//第一次選擇圖標，記錄選擇，把選擇框移到目標位置
			this._firstIcon = $evt.target as Icon;
			this._chooseCase.visible = true;
			this._chooseCase.x = $evt.target.x;
			this._chooseCase.y = $evt.target.y;
		}
		/**
		 * 創建ICON二維數組
		 */
		private function createIconArray():void
		{
			//獲取圖標類型數組
			var typeArr:Array = DataIcon.gainIconArray([0, 1, 2, 3, 4, 5], 64, true);
			var k:uint = 0;
			var i:uint;
			var j:uint;
			//增加_numX,_numY全局變量
			for (i = 0; i < this._numX; i++)
			{
				this._iconArr[i] = [];
				for (j = 0; j < this._numY; j++)
				{
					if (i == 0 || j == 0 || i == this._numX - 1 || j == this._numY - 1)
					{
						//數組最外圍不創建圖標
						this._iconArr[i][j] = null;
					}
					else
					{
						this._iconArr[i][j] = new Icon(typeArr[k], i, j);
						this._iconArr[i][j].addEventListener(BaseEvent.WHEN_CLICK, whenClick);
						this.addChild(this._iconArr[i][j]);
						//按數組順序
						k++;
					}
				}
			}
		}
	}
}

然後爲圖標增加點擊效果，點擊後有個選擇框在目標位置顯示，選擇框是不接收鼠標事件的。

圖標被點擊後，會發出點擊事件，PagePlay在創建圖標的時候會監聽每個圖標。

package com.llk.icon 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.utils.getDefinitionByName;
	import com.llk.event.BaseEvent;
	
	/**
	 * ...
	 * @author ragged
	 */
	public class Icon extends Sprite 
	{
		/**
		 * 圖片類型
		 */
		private var _type:uint;
		/**
		 * 圖標
		 */
		private var _icon:Sprite;
		private var _i:uint;
		private var _j:uint;
		
		public function Icon($type:uint, $i:uint, $j:uint)
		{
			super();
			this._type = $type;
			//記錄圖標在二維數組中的位置
			this._i = $i;
			this._j = $j;
			this.x = this._i * 51;
			this.y = this._j * 51;
			
			this.createIcon();
			this.mouseChildren = false;
			this.buttonMode = true;
			this.addEventListener(MouseEvent.MOUSE_DOWN, whenDown);
		}
		private function whenDown($evt:MouseEvent):void
		{
			this.dispatchEvent(new Event(BaseEvent.WHEN_CLICK));
		}
		/**
		 * 根據類型創建圖標
		 */
		private function createIcon():void
		{
			this._icon = new (getDefinitionByName("ResIcon" + this._type) as Class);
			this.addChild(this._icon);
		}
	}
}

package com.llk.event 
{
	/**
	 * ...
	 * @author ragged
	 */
	public class BaseEvent 
	{
		public static const WHEN_CLICK:String = "when_click";
	}
}

package com.llk.play 
{
	import flash.display.Sprite;
	
	/**
	 * ...
	 * @author ragged
	 */
	public class ChooseCase extends Sprite 
	{
		private var _display:Sprite;
		
		
		public function ChooseCase() 
		{
			super();
			this.mouseChildren = false;
			this.mouseEnabled = false;
			//在fla中增加導出顯示類：ResChooseCase
			this._display = new ResChooseCase();
			this.addChild(this._display);
		}
		
	}
}