《连连看游戏设计(FL车在臣)培训课件》由会员分享，可在线阅读，更多相关《连连看游戏设计(FL车在臣)培训课件（25页珍藏版）》请在金锄头文库上搜索。
1、1,连连看游戏设计,FL 车在臣 ,2,三个版本各自特点,数字版本： TextField；TextFormat； 外部图片版本： Loader；URLRequest； 内部图片版本： BitmapData；工厂模式（设计模式）；,3,游戏演示,D:FLLLK_Fla.swfLLK_Fla.swf,4,OO 设计,程序是什么？ 答：数据 + 算法 程序 程序的核心是什么？ 答：数据 面向对象的类是什么？ 答：属性 + 方法 类,5,package import flash.display.Sprite; import flash.text.TextField; public class Card
2、 extends Sprite public 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 grap
3、hics.beginFill(color); 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 类,6,import flash.text.TextFormat; Text.selectable = false; Text.autoSize = left; /TextField
4、AutoSize.NONE（默认值）、TextFieldAutoSize.LEFT、/TextFieldAutoSize.RIGHT 和 TextFieldAutoSize.CENTER var tf:TextFormat = new TextFormat(null,25); / tf.size = 25; Text.setTextFormat(tf); / 设置文本格式必需在最后,文本框修正,7,添加交互方法,import flash.filters.*; import flash.events.MouseEvent; private var pressed:Boolean = false;
5、 function Pressed():void 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);
6、this.filters = f; function MouseOut(evt:MouseEvent):void if(pressed = false) this.filters = null; ,8,二维数组,二维数组：即数组中的数组（图表类程序通常采用数组）,一维数组：var array:Array = new Array( 5 ); 二维数组：for (var i:uint = 0; i 5; i+) arrayi = new Array(); ,9,生成数组,生成 Row 行 Colum 列的二维数组 var Row:uint = 4; var Colum:uint = 5; var
7、numArray:Array = new Array(); 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; ,10,打乱数组,游戏中 Card 的位置都是随机的因此要打乱数组 for (i = 0; i Row; i+) for (j = 0; j Colum; j+) var Rani:uint = Math.floor(Math.random() * Row); var Ranj:ui
8、nt = Math.floor(Math.random() * Colum); var temp:uint = numArrayij; numArrayij = numArrayRaniRanj; numArrayRaniRanj = temp; / 输出数组 for (i = 0; i numArray.length; i+) trace(numArrayi); ,11,将数组转换为卡片,var MarginLeft:Number = 180; var MarginTop:Number = 100; for (i = 0; i Row; i+) for (j = 0; j Colum; j+
9、) var card:Card = new Card(numArrayij); addChild(card); card.x = MarginLeft + j * (card.W + 2); card.y = MarginTop + i * (card.H + 2); card.setIndex(i, j); ,12,加入简单的判断,为每个卡片添加 Click 侦听； 存储点击到的两个卡片； 简单地判断两个卡片的 id 是否相同。,下面为寻路算法做准备,13,为寻路制作 map 数组,将 numArray 转化为一个表示通路的数组； 生成 0，1 数组 map； 用 0 表示无卡片（通路）；
10、用 1 表示有卡片（不通）；,要表现卡片在 map 中的数组下标，而不是在 numArray 中的下标,14,map 数组严阵以待,好了，表现通路的数组已经准备好了； 下面进入本程序的核心； 寻路算法,15,寻路规则,最多允许连三条线； 最多允许两个拐角；,16,假设两个位置,假设第一次点击到的数组位置在 x1,y1； 假设第二次点击到的数组位置在 x2,y2；,x1,y1,x2,y2,17,两种寻路情况,此时只能横向走通,x1,y1,x2,y2,18,两种寻路情况,此时只能纵向走通,x1,y1,x2,y2,19,寻路算法（横向）,for (var i:uint = 0; i i) ? -1
11、: 1; for (var j = y1; j != i; j += step) count += mapx1j; step = (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; ,20,寻路算法（纵向）,for (i = 0; i y1) ? 1 : -1; for (j = y1; j != y2; j +=
12、step) count += mapij; step = (x2 i) ? 1 : -1; for (j = i; j != x2; j += step) count += mapjy2; if (count = 1) return true; ,21,卡片间的连线,将通路保存到数组 Path 中； 如果有通路依次读取 Path 的路径； 将 Path 数组转换为舞台上的真正位置； 最后可适当做寻路的优化。,22,恭喜各位,现在，我们已经完成了第一个版本（数字版的连连看）； 有了这个基础再去做图片版的，简直就是换汤不换药了，你一定感兴趣的，一起来吧，Come On！,23,外部图片版本,imp
13、ort flash.display.Loader; import .URLRequest; 将 Sprite 改为 Loader； 去掉所有绘图有关及文本框的代码； 加入：load(new URLRequest (Imag/ + id + .jpg); 将 W 和 H 改为图片大小的像素值。,24,内部图片版本,只需给出条件，让工厂类将所需类的实例返回给我们； 导入到库中的位图基类都是 BitmapData； BitmapData 的派生类有两个参数，分别为宽度和高度，当使用导入的位图时，这两个参数可任意给出（但类型要匹配），因为会由系统自动重新定义。,25,谢谢观看,FL 车在臣（2008-6-24） ,
