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

《连连看游戏设计(FL车在臣).ppt》由会员分享，可在线阅读，更多相关《连连看游戏设计(FL车在臣).ppt（25页珍藏版）》请在三一办公上搜索。

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

2、: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);graphics.drawRect(0,0,W,H);graphics.endFill();var Text:TextField=new

3、 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（默认值）、TextFieldAutoSize.LEFT、/TextFieldAutoSize.RIGHT 和 TextFieldAutoSize.CENTERvar tf:TextFormat=new T

4、extFormat(null,25);/tf.size=25;Text.setTextFormat(tf);/设置文本格式必需在最后,文本框修正,添加交互方法,import flash.filters.*;import;private var pressed:Boolean=false;function Pressed():void pressed=true;function UnPressed():void pressed=false;this.filters=null;function MouseOver(evt:MouseEvent):void var blur:BevelFilter=

5、new BevelFilter();var shadow:DropShadowFilter=new DropShadowFilter(10);var f:Array=new Array();f.push(blur);f.push(shadow);this.filters=f;function MouseOut(evt:MouseEvent):void if(pressed=false)this.filters=null;,二维数组,二维数组：即数组中的数组（图表类程序通常采用数组）,一维数组：var array:Array=new Array(5);二维数组：for(var i:uint=0;

6、i 5;i+)arrayi=new Array();,生成数组,生成 Row 行 Colum 列的二维数组var Row:uint=4;var Colum:uint=5;var 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;,打乱数组,游戏中 Card 的位置都是随机的因此要打乱数组for(i=0;i Row;i+)for(j=0;j Colum;j+)var Rani:ui

7、nt=Math.floor(Math.random()*Row);var Ranj:uint=Math.floor(Math.random()*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

8、+)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);,加入简单的判断,为每个卡片添加 Click 侦听；存储点击到的两个卡片；简单地判断两个卡片的 id 是否相同。,下面为寻路算法做准备,为寻路制作 map 数组,将 numArray 转化为一个表示通路的数组；生成 0，1 数组 map；用 0 表示无卡片（通路）；用 1 表示有卡片（不通）；,要表现卡片在 map 中的数组下标，而不

9、是在 numArray 中的下标,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;step=(x1 x2)?-1:1;for

10、(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!=x2;j+=step)count+=mapjy2;if(count=1)return true;,卡片间的连线,将通路保存到数组 Path 中；如果有通路依次读取 Path 的路径；将 Path

11、数组转换为舞台上的真正位置；最后可适当做寻路的优化。,恭喜各位,现在，我们已经完成了第一个版本（数字版的连连看）；有了这个基础再去做图片版的，简直就是换汤不换药了，你一定感兴趣的，一起来吧，Come On！,外部图片版本,import;import;将 Sprite 改为 Loader；去掉所有绘图有关及文本框的代码；加入：load(new URLRequest(Imag/+id+.jpg);将 W 和 H 改为图片大小的像素值。,内部图片版本,只需给出条件，让工厂类将所需类的实例返回给我们；导入到库中的位图基类都是 BitmapData；BitmapData 的派生类有两个参数，分别为宽度和高度，当使用导入的位图时，这两个参数可任意给出（但类型要匹配），因为会由系统自动重新定义。,谢谢观看,FL 车在臣（2008-6-24）,