移动微技(Mobile

230移动微技（MobileWidget）应用开发权威指南本章我们进入JILWidget实战开发。本章中的大多实例来自于MobileMarket的应用。通过实例介绍JILWidget应用的需求分析、功能设计、UI设计及编码等过程，力图使开发者能在短时间内熟悉JILWidget应用的开发过程，了解MobileWidget的基本原理。在实例中，我们对关键代码进行了详细的分析及注解，以帮助读者更好地理解应用程序代码。相信通过学习本章，读者将会对JILWidget开发有一个更加直观的认识。7.1连连看连连看是一款经典的益智游戏，游戏规则非常简单：只要选择一对相同图案的图片连接起来，连接路径避开其他图片，并不超过两次转弯则消除此对卡片，消除所有卡片则游戏胜利。游戏规则简单，游戏速度节奏快，画面清晰绚丽。在本节将会介绍连连看游戏Widget的开发和实现过程。7.1.1基础设计对于连连看游戏来说，其游戏性与UI相关性比较大。我们先来看看整个游戏的最终实现运行效果（见图7-1）。7.1.1.1布局模块设计连连看游戏的主体界面分为如下3个区域。l游戏区：由可点击的小图片组成，是连连看游戏的主要内容，占据界面主体；l状态区：显示游戏时间，在游戏的过程中用户可以通过此区域了解到自己的游戏状态；l功能区：放置重玩按钮，用户可以点击此处来重新开始游戏。JILWidget实战开发：不入虎穴，焉得虎子第7章JILWidget实战开发：不入虎穴，焉得虎子第7章231图7-1连连看效果图7.1.1.2UI设计在整体色彩的选择上，采用深绿和淡绿结合的背景，既具有层次感，又最大限度地减小用户的视觉疲劳。前端的图片选择了可爱的卡通图案，尤其适合年轻人使用。7.1.2连连看Widget编程实现根据前面所述的基础设计，我们来实现不同的功能模块。我们将系统的功能划分为如下几个模块：l创建游戏界面；l判断和寻找路径；l消除图片；l重新开始。下面将对连连看的程序实现进行逐一介绍。7.1.2.1创建游戏界面游戏界面的主要内容就是背景、随机排列的图片阵列、图片与边框的距离等。本款连连看游戏所用到的界面并不多，因而相应的HTML框架比较简单。下面来看看HTML代码。!--背景一直不变--divid=_imgimgsrc=bj.png//div!--游戏界面对应的层--divid=wappertablecellpadding=0cellspacing=0trtdtbodyid=gamecanvasonclick=doclick()在GUI设计时，需要考虑色彩的使用安全，能否在大多数平台上应用。读者可以参考第4章“MobileWidgetUI设计基础知识：三分长相，七分打扮”。Tips：232移动微技（MobileWidget）应用开发权威指南/tbody/td/tr/table/div!--重新开始的按钮--divid=buttonimgsrc=restart_button.pngonClick=reCreateCanvas();//div!--显示时间和点击次数--tabletrtddivid=counts0/div/td/trtrtddivid=clicks0/div/td/tr/table在程序逻辑中，为每个方格都定义了x、y坐标以标志其位置，同时为每个方格赋值，使之与各自图片相对应，并保证每个方格上的图片都是随机的。为此，我们采用的做法是定义了Point类，将前面所说的各种属性都定义到Point类中。JavaScript代码如下：//定义图片方格，12*11阵列，每一格是38px*38pxvarwidth=12;varheight=11;vareleWidth=38;vareleHeight=38;vargameEles=newArray();//定义图片阵列varlinkStack=newArray();varlock=false;varnumbers=56;//定义图片数量varflag=true;varseconds=0;//定义时间varid;varpoints=newArray();varvalueStack=newArray();在下面的代码段中，定义了一个数组来初始化存储图片序号，并创建了一些操作数组的方法，在随机位置生成随机数作为序号，用来生成图片。function_index(_value){//查找数组元素的下标JILWidget实战开发：不入虎穴，焉得虎子第7章233for(varvinthis){if(this[v]==_value){returnnewNumber(v)}}return-1;}function_remove(_value){//根据数组元素的值删除数组元素var_index=this.index(_value);this.splice(_index,1);}function_insert(_position,_value){//将值插入到数组指定的位置this.splice(_position,0,_value);}Array.prototype.index=_index;Array.prototype.insert=_insert;Array.prototype.remove=_remove;下面代码段中的Point类表示的是游戏界面上的一个方格，有x、y坐标，用于定义方格在界面中的位置，value是代表该方格对应的游戏图片，directs代表寻找路径时的优先方向，changed代表是否转折。我们定义了一个Point类来实现。functionPoint(_x,_y,_value){//设定Point对象的各种属性this.x=_x;this.y=_y;this.value=_value;this.directs=null;this.changed=0;}下面代码段中的pointStack函数负责在随机位置生成随机数，采用前面提到的insert()方法，即生成随机数之后，在数组的随机位置进行插入。functionpointStack(w,h){//w、h表示创建单元格的长和宽//实际图片占用的单元格只有w-2h-2的大小varsize=(w*h-(w*4+h*4-16))/2;//size的值是初始化窗口中图片的个数，除2是因为//图片必须成对出现，这样才能消除完varpointValue;for(vari=0;isize;i++){while(true){//因为图片有1～8种该段while是生成1到8的随机数pointValue=Math.floor(Math.random()*8)+1;if(pointValue!=0){break;234移动微技（MobileWidget）应用开发权威指南}}//将生成的随机数随机地放在数组valueStack中valueStack.insert(Math.floor(Math.random()*valueStack.length),pointValue);valueStack.insert(Math.floor(Math.random()*valueStack.length),pointValue);}}上面代码段中的“Math.floor(Math.random()*valueStack.length)”负责在当前数组中的任意位置插入随机数pointValue。接下来需要利用pointStack函数所产生的数组来生成一个二维数组，用来对应界面中的格子。functioncreatePoints(w,h){vartemp;vartempValue;pointStack(w,h);//生成一个任意由28对1～8之间的随机数组成的数组for(var_x=0;_xw;_x++){temp=newArray();//生成一个w*h的二维数组，数组元素是Point对象for(var_y=0;_yh;_y++){if(_x==0||_x==(w-1)||_y==0||_y==(h-1)){tempValue=9;//在w*h最外一圈的tempValue赋值为9}else{if(_x==1||_x==(w-2)||_y==1||_y==(h-2)){tempValue=0;//在w*h最外一圈的tempValue赋值为0}else{//在中间的(w-2)*(h-2)的数组元素tempValue//依次对应一个valueStack中的随机数tempValue=valueStack.pop();}}//每个数组元素生成一个Point对象，属性Value的值为tempValuetemp[_y]=newPoint(_x,_y,tempValue);}points[_x]=temp;//生成二维数组points}}程序逻辑的准备工作完成后，接下来创建游戏界面。在此，我们采用table标签来呈现游戏界面中的方格，同时用不同的value值来对应不同的图片。functioncreateCanvas(_width,_height){vargc=document.getElementById(gamecanvas);JILWidget实战开发：不入虎穴，焉得虎子第7章235vartempEles;vartempEle;vartempTr;vartempTd;varisstart=0;vareleHeight1;vareleWidth1;//下面设定最外面一圈图片与边框之间的尺寸，为图片大小的一半eleHeight1=eleHeight/2;eleWidth1=eleWidth/2;//用两层嵌套for循环在一个表格中设定图片阵列的尺寸和对应的图片链接for(varx=1;x_width-1;x++){tempEles=newArray();tempTr=document.createElement(tr);//在一行中生成一个tr元素if(x==1||x==10)tempTr.style.height=eleHeight1+px;//如果是第一行和最后一行，则高度减半elsetempTr.style.height=eleHeight+px;for(vary=1;y_height-1;y++){tempEle=document.createElement(img);if(points[x][y].value0)//根据对应的二维数组元素的value不同//将img元素指向不同的图片tempEle.setAttribute(src,img/+points[x][y].value+.png);elsetempEle.setAttribute(src,img/+points[x][y].value+.jpg);tempEle.setAttribute(id,ele+x+_+y);tempTd=document.createElement(td);if(y==1||y==9){tempEle.style.width=eleWidth1+px;tempTd=document.createElement(td);tempTd.style.width=eleWidth1+px;}else{tempEle.style.width=eleWidth+px;tempTd=document.createElement(td);tempTd.style.width=eleWidth+px;}236移动微技（MobileWidget）应用开发权威指南if(x==1||x==10)//如果是第一行和最后一行，则高度减半tempEle.style.height=eleHeight1+px;elsetempEle.style.height=eleHeight+px;if(x1&&x_width-2&&y1&&y_height-2){if(points[x][y].value0)//如果当