分类导航

Android 发布时间：2022-04-28 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Android实现疯狂连连看游戏之开发游戏界面(二)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

1、开发界面布局

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

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

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://scheR_823_11845@as.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://scheR_823_11845@as.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; 
 } 
}