1、开发界面布局

本程序使用一个RelativeLayout作为整体的界面布局元素，界面布局上面是一个自定义组件，下面是一个水平排列的LinearLayout。

下面是本程序的布局文件：/res/layout/main.xml

其中指定按钮背景色使用了@drawable/button_selector,这是在res/drawable目录下配置的StateListDrawable对象，配置文件代码如下：res/drawable/button_selector.xml

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

package cn.oyp.link.view;import java.util.List;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Point;import android.util.AttributeSet;import android.view.View;import cn.oyp.link.board.GameService;import cn.oyp.link.utils.ImageUtil;import cn.oyp.link.utils.LinkInfo;/** * 连连看游戏中的游戏主界面 
 * 
 * 关于本代码介绍可以参考一下博客: 欧阳鹏的CSDN博客 
 */public class GameView extends View {	/**	 * 游戏逻辑的实现类	 */	private GameService gameService;	/**	 * 保存当前已经被选中的方块	 */	private Piece selectedPiece;	/**	 * 连接信息对象	 */	private LinkInfo linkInfo;	/**	 * 画笔Paint	 */	private Paint paint;	/**	 * 选中标识的图片对象	 */	private Bitmap selectImage;	/**	 * 构造方法	 * 	 * @param context	 * @param attrs	 */	public GameView(Context context, AttributeSet attrs) {		super(context, attrs);		this.paint = new Paint();		// 设置连接线的颜色		this.paint.setColor(Color.RED);		// 设置连接线的粗细		this.paint.setStrokeWidth(3);		// 初始化被选中的图片		this.selectImage = ImageUtil.getSelectImage(context);	}	/**	 * 设置连接信息对象	 * 	 * @param linkInfo	 */	public void setLinkInfo(LinkInfo linkInfo) {		this.linkInfo = linkInfo;	}	/**	 * 设置当前选中方块	 * 	 * @param piece	 */	public void setSelectedPiece(Piece piece) {		this.selectedPiece = piece;	}	/**	 * 设置游戏逻辑的实现类	 * 	 * @param gameService	 */	public void setGameService(GameService gameService) {		this.gameService = gameService;	}	/**	 * 绘制图形的方法	 */	@Override	protected void onDraw(Canvas canvas) {		super.onDraw(canvas);		if (this.gameService == null)			return;		Piece[][] pieces = gameService.getPieces();		if (pieces != null) {			// 遍历pieces二维数组			for (int i = 0; i < pieces.length; i++) {				for (int j = 0; j < pieces[i].length; j++) {					// 如果二维数组中该元素不为空（即有方块），将这个方块的图片画出来					if (pieces[i][j] != null) {						// 得到这个Piece对象						Piece piece = pieces[i][j];						// 根据方块左上角X、Y座标绘制方块						canvas.drawBitmap(piece.getPieceImage().getImage(),								piece.getBeginX(), piece.getBeginY(), null);					}				}			}		}		// 如果当前对象中有linkInfo对象, 即连接信息		if (this.linkInfo != null) {			// 绘制连接线			drawLine(this.linkInfo, canvas);			// 处理完后清空linkInfo对象			this.linkInfo = null;		}		// 画选中标识的图片		if (this.selectedPiece != null) {			canvas.drawBitmap(this.selectImage, this.selectedPiece.getBeginX(),					this.selectedPiece.getBeginY(), null);		}	}	/**	 * 根据LinkInfo绘制连接线的方法。	 * 	 * @param linkInfo	 *            连接信息对象	 * @param canvas	 *            画布	 */	private void drawLine(LinkInfo linkInfo, Canvas canvas) {		// 获取LinkInfo中封装的所有连接点		List
     
       points = linkInfo.getLinkPoints();		// 依次遍历linkInfo中的每个连接点		for (int i = 0; i < points.size() - 1; i++) {			// 获取当前连接点与下一个连接点			Point currentPoint = points.get(i);			Point nextPoint = points.get(i + 1);			// 绘制连线			canvas.drawLine(currentPoint.x, currentPoint.y, nextPoint.x,					nextPoint.y, this.paint);		}	}	// 开始游戏方法	public void startGame() {		this.gameService.start();		this.postInvalidate();	}}

LinkInfo是一个非常简单的工具类，它用于封装两个方块之间的连接信息：其实就是封装了一个List,List里面保存了连接线所需要经过的点。两个方块之间最多只能用3条线段相连，也就是说最多只能2个拐点，加上这两个方块的中心，方块的连接信息最多只需要4个连接点。因此，LinkInfo最多需要封装4个连接点，最少需要封装2个连接点。

下面是LinkInfo的代码：cn\oyp\link\utils.LinkInfo.java

package cn.oyp.link.utils;import java.util.List;import java.util.ArrayList;import android.graphics.Point;/** * 连接信息类
 * 
 * 关于本代码介绍可以参考一下博客: 欧阳鹏的CSDN博客 
 */public class LinkInfo {	/**	 *  创建一个集合用于保存连接点	 */	private List
     
       points = new ArrayList
      
       ();	/**	 *  提供第一个构造器, 表示两个Point可以直接相连, 没有转折点	 * @param p1	 * @param p2	 */	public LinkInfo(Point p1, Point p2) {		// 加到集合中去		points.add(p1);		points.add(p2);	}	/**	 *  提供第二个构造器, 表示三个Point可以相连, p2是p1与p3之间的转折点	 * @param p1	 * @param p2	 * @param p3	 */	public LinkInfo(Point p1, Point p2, Point p3) {		points.add(p1);		points.add(p2);		points.add(p3);	}	/**	 *  提供第三个构造器, 表示四个Point可以相连, p2, p3是p1与p4的转折点	 * @param p1	 * @param p2	 * @param p3	 * @param p4	 */	public LinkInfo(Point p1, Point p2, Point p3, Point p4) {		points.add(p1);		points.add(p2);		points.add(p3);		points.add(p4);	}	/**	 * @return 连接集合	 */	public List
       
         getLinkPoints() {		return points;	}}

关于具体的实现步骤，请参考下面的链接：

==================================================================================================

作者：欧阳鹏欢迎转载，与人分享是进步的源泉！

转载请保留原文地址：

==================================================================================================

转载于:https://www.cnblogs.com/ouyangpeng/p/8538237.html

你可能感兴趣的文章