Android实现疯狂连连看游戏之开发游戏界面(二)

概述连连看的游戏界面十分简单，大致可以分为两个区域：--游戏主界面区--控制按钮和数据显示区

连连看的游戏界面十分简单，大致可以分为两个区域：
--游戏主界面区
--控制按钮和数据显示区

1、开发界面布局

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

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

<?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/>  * 关于本代码介绍可以参考一下博客: 欧阳鹏的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/>  * 关于本代码介绍可以参考一下博客: 欧阳鹏的CSDN博客 <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/>  * 关于本代码介绍可以参考一下博客:欧阳鹏的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/>  * 关于本代码介绍可以参考一下博客: 欧阳鹏的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 p3,Point p4) {  points.add(p1);  points.add(p2);  points.add(p3);  points.add(p4);  }   /**  * @return 连接集合  */  public List<Point> getlinkPoints() {  return points;  } } 

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

我的Android进阶之旅------>Android疯狂连连看游戏的实现之游戏效果预览(一)

我的Android进阶之旅------>Android疯狂连连看游戏的实现之状态数据模型(三)

我的Android进阶之旅------>Android疯狂连连看游戏的实现之加载界面图片和实现游戏Activity(四)

我的Android进阶之旅------>Android疯狂连连看游戏的实现之实现游戏逻辑(五)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android实现疯狂连连看游戏之开发游戏界面(二)全部内容，希望文章能够帮你解决Android实现疯狂连连看游戏之开发游戏界面(二)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。