连连看的游戏界面十分简单,大致可以分为两个区域:
- 游戏主界面区
- 控制按钮和数据显示区
1、开发界面布局
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent" android:layout_height="fill_parent"
- android:background="@drawable/room">
- <!-- 游戏主界面的自定义组件 -->
- <cn.oyp.link.view.GameView
- android:id="@+id/gameView" android:layout_width="fill_parent"
- android:layout_height="fill_parent" />
- <!-- 水平排列的LinearLayout -->
- <LinearLayout android:layout_width="fill_parent"
- android:layout_height="fill_parent" android:orientation="horizontal"
- android:layout_marginTop="380px" android:background="#1e72bb"
- android:gravity="center">
- <!-- 控制游戏开始的按钮,该按钮的背景图片可以根据按钮的状态改变 -->
- <Button android:id="@+id/startButton" android:layout_width="wrap_content"
- android:layout_height="wrap_content" android:background="@drawable/button_selector" />
- <!-- 显示游戏剩余时间的文本框 -->
- <TextView android:id="@+id/timeText" android:layout_width="wrap_content"
- android:layout_height="wrap_content" android:gravity="center"
- android:textSize="20dip" android:width="150px" android:textColor="#ff9" />
- </LinearLayout>
- </RelativeLayout>
其中指定按钮背景色使用了@drawable/button_selector,这是在res/drawable目录下配置的StateListDrawable对象,配置文件代码如下:res/drawable/button_selector.xml
- <?xml version="1.0" encoding="UTF-8"?>
- <selector xmlns:android="http://schemas.android.com/apk/res/android">
- <!-- 指定按钮按下时的图片 -->
- <item android:state_pressed="true" android:drawable="@drawable/start_down" />
- <!-- 指定按钮松开时的图片 -->
- <item android:state_pressed="false" android:drawable="@drawable/start" />
- </selector>
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;
- /**
- * 连连看游戏中的方块对象 <br/>
- * <br/>
- * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的CSDN博客</a> <br/>
- */
- 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与图片本身的工具类 <br/>
- * <br/>
- * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的CSDN博客</a> <br/>
- */
- 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;
- /**
- * 连连看游戏中的游戏主界面 <br/>
- * <br/>
- * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的CSDN博客</a> <br/>
- */
- 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<Point> 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;
- /**
- * 连接信息类<br/>
- * <br/>
- * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的CSDN博客</a> <br/>
- */
- public class LinkInfo {
- /**
- * 创建一个集合用于保存连接点
- */
- private List<Point> points = new ArrayList<Point>();
- /**
- * 提供第一个构造器, 表示两个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<Point> getLinkPoints() {
- return points;
- }
- }