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

2024-02-26 11:46:03 59

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

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

packagecn.oyp.link.view;

importandroid.graphics.Point;

/**
*连连看游戏中的方块对象

*

*关于本代码介绍可以参考一下博客:欧阳鹏的CSDN博客

*/
publicclassPiece{
/**
*保存方块对象的所对应的图片
*/
privatePieceImagepieceImage;
/**
*该方块的左上角的x坐标
*/
privateintbeginX;
/**
*该方块的左上角的y座标
*/
privateintbeginY;
/**
*该对象在Piece[][]数组中第一维的索引值
*/
privateintindexX;
/**
*该对象在Piece[][]数组中第二维的索引值
*/
privateintindexY;

/**
*设置该Piece对象在数组中的索引值
*
*@paramindexX
*该方块的左上角的x坐标
*@paramindexY
*该方块的左上角的y座标
*/
publicPiece(intindexX,intindexY){
this.indexX=indexX;
this.indexY=indexY;
}

/**
*获取该Piece的中心位置
*
*@return中心点的坐标对象Point
*/
publicPointgetCenter(){
returnnewPoint(getBeginX()+getPieceImage().getImage().getWidth()
/2,getBeginY()+getPieceImage().getImage().getHeight()/2);
}

/**
*判断两个Piece上的图片是否相同
*
*@paramotherPieceImage
*另外的一个Piece对象
*@return是否相同
*/
publicbooleanisSameImage(PieceotherPieceImage){
if(pieceImage==null){
if(otherPieceImage.pieceImage!=null)
returnfalse;
}
//当两个Piece封装图片资源ID相同时，即可认为这两个Piece上的图片相同。
returnpieceImage.getImageId()==otherPieceImage.pieceImage
.getImageId();
}

/**
*@return该方块的左上角的X坐标
*/
publicintgetBeginX(){
returnbeginX;
}

/**
*设置该方块的左上角的X坐标
*
*@parambeginX
*/
publicvoidsetBeginX(intbeginX){
this.beginX=beginX;
}

/**
*@return该方块的左上角的Y座标
*/
publicintgetBeginY(){
returnbeginY;
}

/**
*设置该方块的左上角的Y坐标
*
*@parambeginY
*/
publicvoidsetBeginY(intbeginY){
this.beginY=beginY;
}

/**
*@return该对象在Piece[][]数组中第一维的索引值
*/
publicintgetIndexX(){
returnindexX;
}

/**
*设置该对象在Piece[][]数组中第一维的索引值
*
*@paramindexX
*/
publicvoidsetIndexX(intindexX){
this.indexX=indexX;
}

/**
*@return该对象在Piece[][]数组中第二维的索引值
*/
publicintgetIndexY(){
returnindexY;
}

/**
*设置该对象在Piece[][]数组中第二维的索引值
*
*@paramindexY
*/
publicvoidsetIndexY(intindexY){
this.indexY=indexY;
}

/**
*@return保存方块对象的所对应的图片
*/
publicPieceImagegetPieceImage(){
returnpieceImage;
}

/**
*设置保存方块对象的所对应的图片
*
*@parampieceImage
*/
publicvoidsetPieceImage(PieceImagepieceImage){
this.pieceImage=pieceImage;
}
}

上面Piece类中封装的PieceImage代表了该方块上的图片，它封装了两个信息：Bitmap对象和图片资源ID。其中Bitmap对象用于在游戏界面上绘制方块；而图片资源ID则表示该Piece对象的标识，当两个Piece所封装的图片资源ID相等时，即可认为这两个Piece上的图片相同。

下面是PieceImage的代码：cn\oyp\link\view\PieceImage.java

packagecn.oyp.link.view;

importandroid.graphics.Bitmap;

/**
*封装图片ID与图片本身的工具类

*

*关于本代码介绍可以参考一下博客:欧阳鹏的CSDN博客

*/
publicclassPieceImage{
/**
*图片
*/
privateBitmapimage;
/**
*图片资源ID
*/
privateintimageId;

/**
*构造函数
*
*@paramimage
*图片
*@paramimageId
*图片ID
*/
publicPieceImage(Bitmapimage,intimageId){
super();
this.image=image;
this.imageId=imageId;
}

/**
*@return图片
*/
publicBitmapgetImage(){
returnimage;
}

/**
*设置图片
*
*@paramimage
*/
publicvoidsetImage(Bitmapimage){
this.image=image;
}

/**
*@return图片ID
*/
publicintgetImageId(){
returnimageId;
}

/**
*设置图片ID
*
*@paramimageId
*/
publicvoidsetImageId(intimageId){
this.imageId=imageId;
}
}

GameView主要就是根据游戏的状态来绘制界面上的方块，GameView继承了View组件，重写了View组件上的onDraw(Canvascanvas)方法，重写该方法主要就是绘制游戏里剩余的方块，除此之外，它还复杂绘制连接方块的连接线。GameView的代码如下：cn\oyp\link\view\GameView.java

packagecn.oyp.link.view;

importjava.util.List;

importandroid.content.Context;
importandroid.graphics.Bitmap;
importandroid.graphics.Canvas;
importandroid.graphics.Color;
importandroid.graphics.Paint;
importandroid.graphics.Point;
importandroid.util.AttributeSet;
importandroid.view.View;
importcn.oyp.link.board.GameService;
importcn.oyp.link.utils.ImageUtil;
importcn.oyp.link.utils.LinkInfo;

/**
*连连看游戏中的游戏主界面

*

*关于本代码介绍可以参考一下博客:欧阳鹏的CSDN博客

*/
publicclassGameViewextendsView{
/**
*游戏逻辑的实现类
*/
privateGameServicegameService;
/**
*保存当前已经被选中的方块
*/
privatePieceselectedPiece;
/**
*连接信息对象
*/
privateLinkInfolinkInfo;
/**
*画笔Paint
*/
privatePaintpaint;
/**
*选中标识的图片对象
*/
privateBitmapselectImage;

/**
*构造方法
*
*@paramcontext
*@paramattrs
*/
publicGameView(Contextcontext,AttributeSetattrs){
super(context,attrs);
this.paint=newPaint();
//设置连接线的颜色
this.paint.setColor(Color.RED);
//设置连接线的粗细
this.paint.setStrokeWidth(3);
//初始化被选中的图片
this.selectImage=ImageUtil.getSelectImage(context);
}

/**
*设置连接信息对象
*
*@paramlinkInfo
*/
publicvoidsetLinkInfo(LinkInfolinkInfo){
this.linkInfo=linkInfo;
}

/**
*设置当前选中方块
*
*@parampiece
*/
publicvoidsetSelectedPiece(Piecepiece){
this.selectedPiece=piece;
}

/**
*设置游戏逻辑的实现类
*
*@paramgameService
*/
publicvoidsetGameService(GameServicegameService){
this.gameService=gameService;
}

/**
*绘制图形的方法
*/
@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
if(this.gameService==null)
return;
Piece[][]pieces=gameService.getPieces();
if(pieces!=null){
//遍历pieces二维数组
for(inti=0;ipoints=linkInfo.getLinkPoints();
//依次遍历linkInfo中的每个连接点
for(inti=0;i
LinkInfo是一个非常简单的工具类，它用于封装两个方块之间的连接信息：其实就是封装了一个List,List里面保存了连接线所需要经过的点。两个方块之间最多只能用3条线段相连，也就是说最多只能2个拐点，加上这两个方块的中心，方块的连接信息最多只需要4个连接点。因此，LinkInfo最多需要封装4个连接点，最少需要封装2个连接点。

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


packagecn.oyp.link.utils;

importjava.util.List;
importjava.util.ArrayList;

importandroid.graphics.Point;

/**
*连接信息类

*

*关于本代码介绍可以参考一下博客:欧阳鹏的CSDN博客

*/
publicclassLinkInfo{
/**
*创建一个集合用于保存连接点
*/
privateListpoints=newArrayList();

/**
*提供第一个构造器,表示两个Point可以直接相连,没有转折点
*@paramp1
*@paramp2
*/
publicLinkInfo(Pointp1,Pointp2){
//加到集合中去
points.add(p1);
points.add(p2);
}

/**
*提供第二个构造器,表示三个Point可以相连,p2是p1与p3之间的转折点
*@paramp1
*@paramp2
*@paramp3
*/
publicLinkInfo(Pointp1,Pointp2,Pointp3){
points.add(p1);
points.add(p2);
points.add(p3);
}

/**
*提供第三个构造器,表示四个Point可以相连,p2,p3是p1与p4的转折点
*@paramp1
*@paramp2
*@paramp3
*@paramp4
*/
publicLinkInfo(Pointp1,Pointp2,Pointp3,Pointp4){
points.add(p1);
points.add(p2);
points.add(p3);
points.add(p4);
}

/**
*@return连接集合
*/
publicListgetLinkPoints(){
returnpoints;
}
}

关于具体的实现步骤，请参考下面的链接：
我的Android进阶之旅------>Android疯狂连连看游戏的实现之游戏效果预览(一)


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


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


我的Android进阶之旅------>Android疯狂连连看游戏的实现之实现游戏逻辑(五)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

热门推荐

随机推荐