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);
		}
		
	}
}