欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-06-14 09:29:52
连连看的游戏界面十分简单,大致可以分为两个区域: --游戏主界面区 --控制按钮和数据显示区 1、开发界面布局 本程序使用一个relativelayout作...

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

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 p2, 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疯狂连连看游戏的实现之实现游戏逻辑(五)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。