4、界面设计说明

4.1、程序描述 　　

主要功能：用于为玩家提供可视化的游戏界面，增加了游戏的可玩性。 　

可扩展性：能够适应应用要求的变化和修改，具有灵活的可扩充性。

4.2、功能界面演示

1、生成游戏界面，生成进度条。如下图：

4.21

由此图可知：time 控制游戏的进度

连连看的主界面及变形（refresh）和求助 图标按钮。

2、下图为过关时的效果界面：

4.22 图中为“失败”界面

4.23图中为胜利过关信息界面：

图中有：关闭、重玩、下一关 等按钮选项

如上图4.24 为是否退出游戏提示框

4.3、算法 　　

　

 

 

  1. 　  
  2.  
  3. //定义游戏视图类  
  4.  
  5. public class GameView extends View  
  6.  
  7. //存储素材图片  
  8.  
  9. public int[] p_w_picpathType   
  10.  
  11. //保存所有小格子中的图片  
  12.  
  13. public int[][] grid = new int[row][col];  
  14.  
  15. //初始化加载图片的类型  
  16.  
  17. public void initType() {  
  18.  
  19. //总共要加载的图片  
  20.  
  21. int size = (row-2)*(col-2); //64  
  22.  
  23. //每类图片加载的次数（张数） 要为偶数  
  24.  
  25. int count=size/p_w_picpathType.length; //p_w_picpathType.length=16 即，16种图片  
  26.  
  27.  
  28. for(int i=0; i<p_w_picpathType.length; i++){  
  29.  
  30. for(int j=0; j<count;j++){  
  31.  
  32. type.add(p_w_picpathType[i]);  
  33.  
  34. }  
  35.  
  36. }  
  37.  
  38. }  
  39.  
  40. //初始化网格的设计  
  41.  
  42. private void initGrid() {  
  43.  
  44. Random r = new Random();  
  45.  
  46. for(int i=0; i<row;i++){  
  47.  
  48. for(int j=0; j<col;j++){  
  49.  
  50. if(i==0 || i==row-1 || j==0 ||j==col-1){  
  51.  
  52. grid[i][j]=0; //四周不设置图片  
  53.  
  54. }else{  
  55.  
  56. int index=r.nextInt(type.size());  
  57.  
  58. grid[i][j]=type.get(index);  
  59.  
  60. type.remove(index);  
  61.  
  62. }  
  63.  
  64. }  
  65.  
  66. }  
  67.  
  68. }  
  69.  
  70. //设置位图的大小  
  71.  
  72. private void ititmBitmap(Context context) {  
  73.  
  74. int typeLength=p_w_picpathType.length;  
  75.  
  76. p_w_picpath=new Bitmap[typeLength];  
  77.  
  78.  
  79. //重新绘制  
  80.  
  81. for(int i=0;i<typeLength;i++){  
  82.  
  83. //创建一个Bitmap的对象  
  84.  
  85. Bitmap bitmap=Bitmap.createBitmap((int)width, (int)height, Bitmap.Config.ARGB_8888);  
  86.  
  87. //对Bitmap进行绘制  
  88.  
  89. Canvas canvas = new Canvas(bitmap);  
  90.  
  91. Drawable dwr = context.getResources().getDrawable(p_w_picpathType[i]);  
  92.  
  93. dwr.setBounds(1, 1, 30, 30);  
  94.  
  95. dwr.draw(canvas);  
  96.  
  97. p_w_picpath[i]=bitmap;  
  98.  
  99. }  
  100.  
  101. }  
  102.  
  103. //在OnDraw函数中画出框格，每次进行重绘操作  
  104.  
  105. //设置背景颜色:  
  106.  
  107. Paint backGround = new Paint();  
  108.  
  109. backGround.setColor(Color.WHITE);  
  110.  
  111. //画一个矩形  
  112.  
  113. canvas.drawRect(0, 0, getWidth(), getHeight(), backGround);  
  114.  
  115.  
  116. //设置网格线条的颜色  
  117.  
  118. Paint higth= new Paint();  
  119.  
  120. higth.setColor(Color.BLUE);  
  121.  
  122.  
  123. //画网格  
  124.  
  125. for(int i=0;i<10;i++){  
  126.  
  127. //画横线、纵线  
  128.  
  129. canvas.drawLine(0, height*i, getWidth(), height*i, higth);  
  130.  
  131. canvas.drawLine(width*i, 0, width*i, getHeight(), higth);  
  132.  
  133. }  
  134.  
  135.  
  136. //画p_w_picpath图片  
  137.  
  138. boolean test=true; //检测图片是否肖完  
  139.  
  140. for(int i=0;i<row;i++){  
  141.  
  142. for(int j=0;j<col;j++){  
  143.  
  144. if(grid[i][j]!=0){  
  145.  
  146. canvas.drawBitmap(p_w_picpath[Arrays.binarySearch(p_w_picpathType, grid[i][j])],   
  147.  
  148. i*width, j*height, null);  
  149.  
  150.  
  151. test=false; ////还有图片，说明未赢  
  152.  
  153. }  
  154.  
  155. }  
  156.  
  157. }  
  158.

5、主要显示及算法设计说明

5.1、程序描述 　　

主要功能：完成图片的消除功能，消除时画线功能，重新排列功能。 　

可扩展性：能够适应应用要求的变化和修改，具有灵活的可扩充性。

　

5.2、显示界面 无

 

 

5.3、算法 　　

5.3.1、图片的连接判断

对于选中的两个方块的销毁，它们必须符合下面3个条件：

1、选中的两个方块图案相同。

2、选中的两个方块之间没有障碍物阻碍的情况下，可以用若干个垂直的直线线段连接起来。

3、这些将它们连接起来的直线线段的折点不超过两个（连接线由x轴和y轴的平行线组成）。　

我们进行分情况分析：

无拐点、一个拐点、两个拐点，设置flag进行标记这三种情况。

以下是相关代码：

 

 

 

  1. //获得一个点可向上下左右走的范围  
  2.  
  3. public int[] extend(Point a){  
  4.  
  5. int i;  
  6.  
  7. int[] aLoc = new int[4];  
  8.  
  9. //向上  
  10.  
  11. for(i=a.y-1;i>=0 && grid[a.x][i]==0;i--){   
  12.  
  13. }  
  14.  
  15. aLoc[0]=i+1;  
  16.  
  17. //向下  
  18.  
  19. for(i=a.y+1;i<row && grid[a.x][i]==0;i++){   
  20.  
  21. }  
  22.  
  23. aLoc[1]=i-1;  
  24.  
  25. //向左  
  26.  
  27. for(i=a.x-1;i>=0 && grid[i][a.y]==0;i--){   
  28.  
  29. }  
  30.  
  31. aLoc[2]=i+1;  
  32.  
  33. //向右  
  34.  
  35. for(i=a.x+1;i<col && grid[i][a.y]==0;i++){   
  36.  
  37. }  
  38.  
  39. aLoc[3]=i-1;  
  40.  
  41.  
  42. return aLoc;  
  43.  
  44. }  
  45.  
  46. //用于判断水平方向是否连通  
  47.  
  48. private boolean horizon(Point a, Point b){  
  49.  
  50. if(a.x == b.x && a.y == b.y) //如果点击的是同一个图案，直接返回false  
  51.  
  52. return false;  
  53.  
  54. int x_start = a.x <= b.x ? a.x : b.x;  
  55.  
  56. int x_end = a.x <= b.x ? b.x : a.x;  
  57.  
  58. for(int x = x_start + 1; x < x_end; x++)//只要一个不是-1，直接返回false  
  59.  
  60. if(grid[x][a.y] != 0){  
  61.  
  62. return false;  
  63.  
  64. }  
  65.  
  66. return true;  
  67.  
  68. }  
  69.  
  70. //用于判断垂直方向是否连通  
  71.  
  72. private boolean vertical(Point a, Point b){  
  73.  
  74. if(a.x == b.x && a.y == b.y)  
  75.  
  76. return false;  
  77.  
  78. int y_start = a.y <= b.y ? a.y : b.y;  
  79.  
  80. int y_end = a.y <= b.y ? b.y : a.y;  
  81.  
  82. for(int y = y_start + 1; y < y_end; y++)  
  83.  
  84. if(grid[a.x][y] != 0)  
  85.  
  86. return false;  
  87.  
  88. return true;  
  89.  
  90. }  
  91.  
  92. 　//只有一个拐点的情况  
  93.  
  94. private boolean oneCorner(Point a, Point b){  
  95.  
  96. Point c = new Point(a.x, b.y);  
  97.  
  98. Point d = new Point(b.x, a.y);  
  99.  
  100. if(grid[c.x][c.y] == 0){  
  101.  
  102. boolean method1 = horizon(b, c) && vertical(a, c);  
  103.  
  104. if(method1){  
  105.  
  106. corner=new Point(c.x, c.y);  
  107.  
  108. }  
  109.  
  110. return method1;  
  111.  
  112. }  
  113.  
  114. if(grid[d.x][d.y] == 0){  
  115.  
  116. boolean method2 = horizon(a, d) && vertical(b, d);  
  117.  
  118. if(method2){  
  119.  
  120. corner=new Point(d.x, d.y);  
  121.  
  122. }  
  123.  
  124. return method2;  
  125.  
  126. }else{  
  127.  
  128. return false;  
  129.  
  130. }  
  131.  
  132. }  
  133.  
  134. //有两个拐点的情况  
  135.  
  136. private boolean twoCorner(Point a, Point b)  
  137.  
  138. {  
  139.  
  140. ll = scan(a, b);  
  141.  
  142. if(ll.isEmpty())  
  143.  
  144. return false;  
  145.  
  146. for(int index = 0; index < ll.size(); index++){  
  147.  
  148. Line line = (Line)ll.get(index);  
  149.  
  150. if(line.direct == 1){  
  151.  
  152. if(horizon(a, line.a) && horizon(b, line.b)){  
  153.  
  154. corner=new Point(line.a);  
  155.  
  156. corner2=new Point(line.b);  
  157.  
  158. return true;  
  159.  
  160. }  
  161.  
  162. } else{  
  163.  
  164. if(vertical(a, line.a) && vertical(b, line.b)){  
  165.  
  166. corner=new Point(line.a);  
  167.  
  168. corner2=new Point(line.b);  
  169.  
  170. return true;  
  171.  
  172. }  
  173.  
  174. }  
  175.  
  176. }  
  177.  
  178. return false;  
  179.  
  180. }  
  181.  
  182. //上面设计了一个类来判断两个拐点的情况  
  183.  
  184. //类的定义，构造函数如下  
  185.  
  186. class Line{  
  187.  
  188. public Point a;  
  189.  
  190. public Point b;  
  191.  
  192. public int direct;  
  193.  
  194.  
  195. public Line(){  
  196.  
  197. a = new Point();  
  198.  
  199. b = new Point();  
  200.  
  201. }  
  202.  
  203.  
  204. public Line(int direct, Point a, Point b){  
  205.  
  206. this.direct = direct;  
  207.  
  208. this.a = a;  
  209.  
  210. this.b = b;  
  211.  
  212. }  
  213.  
  214. }  
  215.  
  216. //对两个拐点的情况进行扫描，将扫描线放入Line类型的数组中  
  217.  
  218. private LinkedList scan(Point a, Point b){  
  219.  
  220. ll = new LinkedList<Line>();  
  221.  
  222. //Point c = new Point(a.x, b.y);  
  223.  
  224. //Point d = new Point(b.x, a.y);  
  225.  
  226. for(int y = a.y; y >= 0; y--)  
  227.  
  228. if(grid[a.x][y] == 0 && grid[b.x][y] == 0 && horizon(new Point(a.x, y), new Point(b.x, y)))  
  229.  
  230. ll.add(new Line(0, new Point(a.x, y), new Point(b.x, y)));  
  231.  
  232.  
  233. for(int y = a.y; y < row; y++)  
  234.  
  235. if(grid[a.x][y] == 0 && grid[b.x][y] == 0 && horizon(new Point(a.x, y), new Point(b.x, y)))  
  236.  
  237. ll.add(new Line(0, new Point(a.x, y), new Point(b.x, y)));  
  238.  
  239.  
  240. for(int x = a.x; x >= 0; x--)  
  241.  
  242. if(grid[x][a.y] == 0 && grid[x][b.y] == 0 && vertical(new Point(x, a.y), new Point(x, b.y)))  
  243.  
  244. ll.add(new Line(1, new Point(x, a.y), new Point(x, b.y)));  
  245.  
  246.  
  247. for(int x = a.x; x < col; x++)  
  248.  
  249. if(grid[x][a.y] == 0 && grid[x][b.y] == 0 && vertical(new Point(x, a.y), new Point(x, b.y)))  
  250.  
  251. ll.add(new Line(1, new Point(x, a.y), new Point(x, b.y)));  
  252.  
  253.  
  254. return ll;  
  255.  
  256. }  
  257.  
  258. //最后做总体判断，flag表示拐点的数目  
  259.  
  260. public boolean checkLink(Point a,Point b){  
  261.  
  262. if(grid[a.x][a.y] != grid[b.x][b.y])//如果图案不同，直接为false  
  263.  
  264. return false;  
  265.  
  266. if(a.y == b.y && horizon(a, b)){  
  267.  
  268. flag=0;  
  269.  
  270. return true;  
  271.  
  272. }  
  273.  
  274. if(a.x == b.x && vertical(a, b)){  
  275.  
  276. flag=0;  
  277.  
  278. return true;  
  279.  
  280. }  
  281.  
  282. if(oneCorner(a, b)){  
  283.  
  284. flag=1;  
  285.  
  286. return true;  
  287.  
  288. }  
  289.  
  290. if(twoCorner(a, b)){  
  291.  
  292. flag=2;  
  293.  
  294. return true;  
  295.  
  296. }else{  
  297.  
  298. return false;  
  299.  
  300. }  
  301.  
  302. }

5.3.2、图片消除的画线

根据flag的值分情况分析：

Flag=0时，从起点到终点画一条线即可

Flag=1时，从起点到拐点，从拐点到终点画两条线

Flag=2时，从起点到拐点，从拐点到拐点，从拐点到终点画三条线。

在做连接判断时就将路径保存下来。

//画线操作写在OnDraw函数中，corner、corner2保存拐点坐标

//每次都sleep(50)后重绘

 

 

 

  1. switch(flag){  
  2.  
  3. case 0:  
  4.  
  5. canvas.drawLine(width*(former.x + 0.5f), height*(former.y+0.5f),  
  6.  
  7. width*(current.x+ 0.5f), height*(current.y + 0.5f), p);  
  8.  
  9. flag=-1;  
  10.  
  11. SystemClock.sleep(50);  
  12.  
  13. invalidate();  
  14.  
  15. break;  
  16.  
  17. case 1:  
  18.  
  19. canvas.drawLine(width*(former.x + 0.5f), height*(former.y+0.5f),  
  20.  
  21. width*(corner.x+ 0.5f), height*(corner.y + 0.5f), p);  
  22.  
  23. canvas.drawLine(width*(corner.x + 0.5f), height*(corner.y+0.5f),  
  24.  
  25. width*(current.x+ 0.5f), height*(current.y + 0.5f), p);  
  26.  
  27. flag=-1;  
  28.  
  29. SystemClock.sleep(50);  
  30.  
  31. invalidate();  
  32.  
  33. break;  
  34.  
  35. case 2:  
  36.  
  37. canvas.drawLine(width*(former.x + 0.5f), height*(former.y+0.5f),  
  38.  
  39. width*(corner.x + 0.5f), height*(corner.y + 0.5f), p);  
  40.  
  41. canvas.drawLine(width*(corner.x + 0.5f), height*(corner.y+0.5f),  
  42.  
  43. width*(corner2.x+ 0.5f), height*(corner2.y + 0.5f), p);  
  44.  
  45. canvas.drawLine(width*(corner2.x + 0.5f), height*(corner2.y+0.5f),  
  46.  
  47. width*(current.x+ 0.5f), height*(current.y + 0.5f), p);  
  48.  
  49. flag=-1;  
  50.  
  51. SystemClock.sleep(50);  
  52.  
  53. invalidate();  
  54.  
  55. break;  
  56.  
  57. default:  
  58.  
  59. break;  
  60.  
  61. }

5.3.3、重新排列

隔一段时间后，将原有的排列随机打乱，进行重新排列

//对当前界面中的图片进行重新排列

  1. public void reDraw(){  
  2.  
  3. Random r = new Random();  
  4.  
  5. type= new ArrayList<Integer>();  
  6.  
  7. for(int i=0;i<row; i++){  
  8.  
  9. for(int j=0; j <col;j++){  
  10.  
  11. if(grid[i][j]!=0){  
  12.  
  13. type.add(grid[i][j]);  
  14.  
  15. }  
  16.  
  17. }  
  18.  
  19. }  
  20.  
  21.  
  22. for(int i=0;i<row; i++){  
  23.  
  24. for(int j=0; j <col;j++){  
  25.  
  26. if(grid[i][j]!=0){  
  27.  
  28. int index = r.nextInt(type.size());  
  29.  
  30. grid[i][j] = type.get(index);  
  31.  
  32. type.remove(index);  
  33.  
  34. }  
  35.  
  36. }  
  37.  
  38. }  
  39.  
  40. former_i=former_j=0;  
  41.  
  42. former.x=former.y=0;  
  43.  
  44. invalidate();  
  45.  
  46. }  
  47.  
  48.  
  49. //重新排列界面中的图片  
  50.  
  51. private void reStart() {  
  52.  
  53. GameActivity.refresh=true;  
  54.  
  55. initType();  
  56.  
  57. initGrid();  
  58.  
  59. invalidate();  
  60.  
  61. }