连连看的游戏界面十分简单，大致可以分为两个区域：
--游戏主界面区
--控制按钮和数据显示区
1、开发界面布局
本程序使用一个RelativeLayout作为整体的界面布局元素，界面布局上面是一个自定义组件，下面是一个水平排列的LinearLayout。
下面是本程序的布局文件：/res/layout/main.xml
<&＃63;xml version="1.0" encoding="utf-8"&＃63;>
其中指定按钮背景色使用了@drawable/button_selector,这是在res/drawable目录下配置的StateListDrawable对象，配置文件代码如下：res/drawable/button_selector.xml
<&＃63;xml version="1.0" encoding="UTF-8"&＃63;>
2、开发游戏界面组件
本游戏采用了一个自定义View:GameView，它从View的基类派生出来，这个自定义View的功能就是根据游戏状态来描绘游戏界面上的全部方块。
为了开发这个GameView，本程序还提供了一个Piece类，一个Piece对象代表游戏界面中的一个方块，它除了封装了方块上的图片之外，还需要封装该方块代表二维数组中的那个元素，也需要封装它的左上角在游戏界面中的X、Y坐标,这X、Y坐标可以决定方块的绘制位置，GameView根据这两个坐标值绘制全部方块即可。
下面是Piece类的代码：cn\oyp\link\view\Piece.java
package cn.oyp.link.view; import android.graphics.Point; /** * 连连看游戏中的方块对象
*
* 关于本代码介绍可以参考一下博客: 欧阳鹏的CSDN博客
*/ public class Piece { /** * 保存方块对象的所对应的图片 */ private PieceImage pieceImage; /** * 该方块的左上角的x坐标 */ private int beginX; /** * 该方块的左上角的y座标 */ private int beginY; /** * 该对象在Piece[][]数组中第一维的索引值 */ private int indexX; /** * 该对象在Piece[][]数组中第二维的索引值 */ private int indexY; /** * 设置该Piece对象在数组中的索引值 * * @param indexX * 该方块的左上角的x坐标 * @param indexY * 该方块的左上角的y座标 */ public Piece(int indexX, int indexY) { this.indexX = indexX; this.indexY = indexY; } /** * 获取该Piece的中心位置 * * @return 中心点的坐标对象Point */ public Point getCenter() { return new Point(getBeginX() + getPieceImage().getImage().getWidth() / 2, getBeginY() + getPieceImage().getImage().getHeight() / 2); } /** * 判断两个Piece上的图片是否相同 * * @param otherPieceImage * 另外的一个Piece对象 * @return 是否相同 */ public boolean isSameImage(Piece otherPieceImage) { if (pieceImage == null) { if (otherPieceImage.pieceImage != null) return false; } // 当两个Piece封装图片资源ID相同时，即可认为这两个Piece上的图片相同。 return pieceImage.getImageId() == otherPieceImage.pieceImage .getImageId(); } /** * @return 该方块的左上角的X坐标 */ public int getBeginX() { return beginX; } /** * 设置该方块的左上角的X坐标 * * @param beginX */ public void setBeginX(int beginX) { this.beginX = beginX; } /** * @return 该方块的左上角的Y座标 */ public int getBeginY() { return beginY; } /** * 设置该方块的左上角的Y坐标 * * @param beginY */ public void setBeginY(int beginY) { this.beginY = beginY; } /** * @return 该对象在Piece[][]数组中第一维的索引值 */ public int getIndexX() { return indexX; } /** * 设置该对象在Piece[][]数组中第一维的索引值 * * @param indexX */ public void setIndexX(int indexX) { this.indexX = indexX; } /** * @return 该对象在Piece[][]数组中第二维的索引值 */ public int getIndexY() { return indexY; } /** * 设置该对象在Piece[][]数组中第二维的索引值 * * @param indexY */ public void setIndexY(int indexY) { this.indexY = indexY; } /** * @return 保存方块对象的所对应的图片 */ public PieceImage getPieceImage() { return pieceImage; } /** * 设置保存方块对象的所对应的图片 * * @param pieceImage */ public void setPieceImage(PieceImage pieceImage) { this.pieceImage = pieceImage; } }
上面Piece类中封装的PieceImage代表了该方块上的图片，它封装了两个信息：Bitmap对象和图片资源ID。其中Bitmap对象用于在游戏界面上绘制方块；而图片资源ID则表示该Piece对象的标识，当两个Piece所封装的图片资源ID相等时，即可认为这两个Piece上的图片相同。
下面是PieceImage的代码：cn\oyp\link\view\PieceImage.java
package cn.oyp.link.view; import android.graphics.Bitmap; /** * 封装图片ID与图片本身的工具类
*
* 关于本代码介绍可以参考一下博客: 欧阳鹏的CSDN博客
*/ public class PieceImage { /** * 图片 */ private Bitmap image; /** * 图片资源ID */ private int imageId; /** * 构造函数 * * @param image * 图片 * @param imageId * 图片ID */ public PieceImage(Bitmap image, int imageId) { super(); this.image = image; this.imageId = imageId; } /** * @return 图片 */ public Bitmap getImage() { return image; } /** * 设置图片 * * @param image */ public void setImage(Bitmap image) { this.image = image; } /** * @return 图片ID */ public int getImageId() { return imageId; } /** * 设置图片ID * * @param imageId */ public void setImageId(int imageId) { this.imageId = imageId; } }
GameView主要就是根据游戏的状态来绘制界面上的方块，GameView继承了View组件，重写了View组件上的onDraw(Canvas canvas)方法，重写该方法主要就是绘制游戏里剩余的方块，除此之外，它还复杂绘制连接方块的连接线。GameView的代码如下：cn\oyp\link\view\GameView.java
京公网安备 11010802041100号