连连看游戏设计(FL 车在臣).ppt

1、连连看游戏设计,FL 车在臣 ,三个版本各自特点,数字版本： TextField；TextFormat； 外部图片版本： Loader；URLRequest； 内部图片版本： BitmapData；工厂模式（设计模式）；,游戏演示,D:FLLLK_Fla.swf,OO 设计,程序是什么？ 答：数据 + 算法 程序 程序的核心是什么？ 答：数据 面向对象的类是什么？ 答：属性 + 方法 类,package import flash.display.Sprite; import flash.text.TextField; public class Card extends Sprite publi

2、c var id:int; public var W:Number = 30; public var H:Number = 40; public var i:int; public var j:int; public var TargetCard:Card; private var color:uint = 0 xcccccc; public var Path:Array = new Array(); public function Card(id:int) this.id = id; init(); function init():void graphics.beginFill(color)

3、; graphics.drawRect(0,0,W,H); graphics.endFill(); var Text:TextField = new TextField(); Text.text = String(id); addChild(Text); function setIndex(a:int, b:int):void i = a; j = b; ,设计 Card 类,import flash.text.TextFormat; Text.selectable = false; Text.autoSize = left; /TextFieldAutoSize.NONE（默认值）、Text

4、FieldAutoSize.LEFT、/TextFieldAutoSize.RIGHT 和 TextFieldAutoSize.CENTER var tf:TextFormat = new TextFormat(null,25); / tf.size = 25; Text.setTextFormat(tf); / 设置文本格式必需在最后,文本框修正,添加交互方法,import flash.filters.*; import flash.events.MouseEvent; private var pressed:Boolean = false; function Pressed():void

5、pressed = true; function UnPressed():void pressed = false; this.filters = null; function MouseOver(evt:MouseEvent):void var blur:BevelFilter = new BevelFilter(); var shadow:DropShadowFilter = new DropShadowFilter(10); var f:Array = new Array(); f.push(blur); f.push(shadow); this.filters = f; functio

6、n MouseOut(evt:MouseEvent):void if(pressed = false) this.filters = null; ,二维数组,二维数组：即数组中的数组（图表类程序通常采用数组）,一维数组：var array:Array = new Array( 5 ); 二维数组：for (var i:uint = 0; i 5; i+) arrayi = new Array(); ,生成数组,生成 Row 行 Colum 列的二维数组 var Row:uint = 4; var Colum:uint = 5; var numArray:Array = new Array();

7、 for (var i:uint = 0; i Row; i+) numArrayi = new Array(); var num:uint = 0; for (var j:uint = 0; j Colum; j+) numArrayij = +num; ,打乱数组,游戏中 Card 的位置都是随机的因此要打乱数组 for (i = 0; i Row; i+) for (j = 0; j Colum; j+) var Rani:uint = Math.floor(Math.random() * Row); var Ranj:uint = Math.floor(Math.random() *

8、Colum); var temp:uint = numArrayij; numArrayij = numArrayRaniRanj; numArrayRaniRanj = temp; / 输出数组 for (i = 0; i numArray.length; i+) trace(numArrayi); ,将数组转换为卡片,var MarginLeft:Number = 180; var MarginTop:Number = 100; for (i = 0; i Row; i+) for (j = 0; j Colum; j+) var card:Card = new Card(numArray

9、ij); addChild(card); card.x = MarginLeft + j * (card.W + 2); card.y = MarginTop + i * (card.H + 2); card.setIndex(i, j); ,加入简单的判断,为每个卡片添加 Click 侦听； 存储点击到的两个卡片； 简单地判断两个卡片的 id 是否相同。,下面为寻路算法做准备,为寻路制作 map 数组,将 numArray 转化为一个表示通路的数组； 生成 0，1 数组 map； 用 0 表示无卡片（通路）； 用 1 表示有卡片（不通）；,要表现卡片在 map 中的数组下标，而不是在 num

10、Array 中的下标,map 数组严阵以待,好了，表现通路的数组已经准备好了； 下面进入本程序的核心； 寻路算法,寻路规则,最多允许连三条线； 最多允许两个拐角；,假设两个位置,假设第一次点击到的数组位置在 x1,y1； 假设第二次点击到的数组位置在 x2,y2；,x1,y1,x2,y2,两种寻路情况,此时只能横向走通,x1,y1,x2,y2,两种寻路情况,此时只能纵向走通,x1,y1,x2,y2,寻路算法（横向）,for (var i:uint = 0; i i) ? -1 : 1; for (var j = y1; j != i; j += step) count += mapx1j; s

11、tep = (x1 x2) ? -1 : 1; for (j = x1; j != x2; j += step) count += mapji; step = (i y2) ? 1 : -1; for (j = i; j != y2; j+= step) count += mapx2j; if (count = 1) return true; ,寻路算法（纵向）,for (i = 0; i y1) ? 1 : -1; for (j = y1; j != y2; j += step) count += mapij; step = (x2 i) ? 1 : -1; for (j = i; j !=

12、 x2; j += step) count += mapjy2; if (count = 1) return true; ,卡片间的连线,将通路保存到数组 Path 中； 如果有通路依次读取 Path 的路径； 将 Path 数组转换为舞台上的真正位置； 最后可适当做寻路的优化。,恭喜各位,现在，我们已经完成了第一个版本（数字版的连连看）； 有了这个基础再去做图片版的，简直就是换汤不换药了，你一定感兴趣的，一起来吧，Come On！,外部图片版本,import flash.display.Loader; import .URLRequest; 将 Sprite 改为 Loader； 去掉所有绘图有关及文本框的代码； 加入：load(new URLRequest (Ima