杭州华育LOGO

学员作品 学员心得 技术园地 潮人地 Android(安卓)培训 杭州电脑(计算机)培训 杭州网络营销培训 杭州JAVA培训
返回首页

安卓培训名博之Android疯狂连连看游戏的实现之开发游戏界面(二)

时间:2014-10-14 00:21来源:csdn 作者:小黑妹 点击:
安卓培训名博之Android疯狂连连看游戏的实现之开发游戏界面(二) 连连看的游戏界面十分简单,大致可以分为两个区域: 游戏主界面区 控制按钮和数据显示区

 安卓培训名博之Android疯狂连连看游戏的实现之开发游戏界面(二)

 

连连看的游戏界面十分简单,大致可以分为两个区域:

 

  • 游戏主界面区
  • 控制按钮和数据显示区

1、开发界面布局

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

下面是本程序的布局文件:/res/layout/main.xml
[html] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent" android:layout_height="fill_parent"  
  4.     android:background="@drawable/room">  
  5.     <!-- 游戏主界面的自定义组件 -->  
  6.     <cn.oyp.link.view.GameView  
  7.         android:id="@+id/gameView" android:layout_width="fill_parent"  
  8.         android:layout_height="fill_parent" />  
  9.     <!-- 水平排列的LinearLayout -->  
  10.     <LinearLayout android:layout_width="fill_parent"  
  11.         android:layout_height="fill_parent" android:orientation="horizontal"  
  12.         android:layout_marginTop="380px" android:background="#1e72bb"  
  13.         android:gravity="center">  
  14.         <!-- 控制游戏开始的按钮,该按钮的背景图片可以根据按钮的状态改变 -->  
  15.         <Button android:id="@+id/startButton" android:layout_width="wrap_content"  
  16.             android:layout_height="wrap_content" android:background="@drawable/button_selector" />  
  17.         <!-- 显示游戏剩余时间的文本框 -->  
  18.         <TextView android:id="@+id/timeText" android:layout_width="wrap_content"  
  19.             android:layout_height="wrap_content" android:gravity="center"  
  20.             android:textSize="20dip" android:width="150px" android:textColor="#ff9" />  
  21.     </LinearLayout>  
  22. </RelativeLayout>  

其中指定按钮背景色使用了@drawable/button_selector,这是在res/drawable目录下配置的StateListDrawable对象,配置文件代码如下:res/drawable/button_selector.xml
[html] view plaincopy
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <!-- 指定按钮按下时的图片 -->  
  4.     <item android:state_pressed="true" android:drawable="@drawable/start_down" />  
  5.     <!-- 指定按钮松开时的图片 -->  
  6.     <item android:state_pressed="false" android:drawable="@drawable/start" />  
  7. </selector>  

2、开发游戏界面组件

 

本游戏采用了一个自定义View:GameView,它从View的基类派生出来,这个自定义View的功能就是根据游戏状态来描绘游戏界面上的全部方块。

为了开发这个GameView,本程序还提供了一个Piece类,一个Piece对象代表游戏界面中的一个方块,它除了封装了方块上的图片之外,还需要封装该方块代表二维数组中的那个元素,也需要封装它的左上角在游戏界面中的X、Y坐标,这X、Y坐标可以决定方块的绘制位置,GameView根据这两个坐标值绘制全部方块即可。

下面是Piece类的代码:cn\oyp\link\view\Piece.java

 

[java] view plaincopy
 
  1. package cn.oyp.link.view;  
  2.   
  3. import android.graphics.Point;  
  4.   
  5. /** 
  6.  * 连连看游戏中的方块对象 <br/> 
  7.  * <br/> 
  8.  * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的CSDN博客</a> <br/> 
  9.  */  
  10. public class Piece {  
  11.     /** 
  12.      * 保存方块对象的所对应的图片 
  13.      */  
  14.     private PieceImage pieceImage;  
  15.     /** 
  16.      * 该方块的左上角的x坐标 
  17.      */  
  18.     private int beginX;  
  19.     /** 
  20.      * 该方块的左上角的y座标 
  21.      */  
  22.     private int beginY;  
  23.     /** 
  24.      * 该对象在Piece[][]数组中第一维的索引值 
  25.      */  
  26.     private int indexX;  
  27.     /** 
  28.      * 该对象在Piece[][]数组中第二维的索引值 
  29.      */  
  30.     private int indexY;  
  31.   
  32.     /** 
  33.      * 设置该Piece对象在数组中的索引值 
  34.      *  
  35.      * @param indexX 
  36.      *            该方块的左上角的x坐标 
  37.      * @param indexY 
  38.      *            该方块的左上角的y座标 
  39.      */  
  40.     public Piece(int indexX, int indexY) {  
  41.         this.indexX = indexX;  
  42.         this.indexY = indexY;  
  43.     }  
  44.   
  45.     /** 
  46.      * 获取该Piece的中心位置 
  47.      *  
  48.      * @return 中心点的坐标对象Point 
  49.      */  
  50.     public Point getCenter() {  
  51.         return new Point(getBeginX() + getPieceImage().getImage().getWidth()  
  52.                 / 2, getBeginY() + getPieceImage().getImage().getHeight() / 2);  
  53.     }  
  54.   
  55.     /** 
  56.      * 判断两个Piece上的图片是否相同 
  57.      *  
  58.      * @param otherPieceImage 
  59.      *            另外的一个Piece对象 
  60.      * @return 是否相同 
  61.      */  
  62.     public boolean isSameImage(Piece otherPieceImage) {  
  63.         if (pieceImage == null) {  
  64.             if (otherPieceImage.pieceImage != null)  
  65.                 return false;  
  66.         }  
  67.         // 当两个Piece封装图片资源ID相同时,即可认为这两个Piece上的图片相同。  
  68.         return pieceImage.getImageId() == otherPieceImage.pieceImage  
  69.                 .getImageId();  
  70.     }  
  71.   
  72.     /** 
  73.      * @return 该方块的左上角的X坐标 
  74.      */  
  75.     public int getBeginX() {  
  76.         return beginX;  
  77.     }  
  78.   
  79.     /** 
  80.      * 设置该方块的左上角的X坐标 
  81.      *  
  82.      * @param beginX 
  83.      */  
  84.     public void setBeginX(int beginX) {  
  85.         this.beginX = beginX;  
  86.     }  
  87.   
  88.     /** 
  89.      * @return 该方块的左上角的Y座标 
  90.      */  
  91.     public int getBeginY() {  
  92.         return beginY;  
  93.     }  
  94.   
  95.     /** 
  96.      * 设置该方块的左上角的Y坐标 
  97.      *  
  98.      * @param beginY 
  99.      */  
  100.     public void setBeginY(int beginY) {  
  101.         this.beginY = beginY;  
  102.     }  
  103.   
  104.     /** 
  105.      * @return 该对象在Piece[][]数组中第一维的索引值 
  106.      */  
  107.     public int getIndexX() {  
  108.         return indexX;  
  109.     }  
  110.   
  111.     /** 
  112.      * 设置该对象在Piece[][]数组中第一维的索引值 
  113.      *  
  114.      * @param indexX 
  115.      */  
  116.     public void setIndexX(int indexX) {  
  117.         this.indexX = indexX;  
  118.     }  
  119.   
  120.     /** 
  121.      * @return 该对象在Piece[][]数组中第二维的索引值 
  122.      */  
  123.     public int getIndexY() {  
  124.         return indexY;  
  125.     }  
  126.   
  127.     /** 
  128.      * 设置该对象在Piece[][]数组中第二维的索引值 
  129.      *  
  130.      * @param indexY 
  131.      */  
  132.     public void setIndexY(int indexY) {  
  133.         this.indexY = indexY;  
  134.     }  
  135.   
  136.     /** 
  137.      * @return 保存方块对象的所对应的图片 
  138.      */  
  139.     public PieceImage getPieceImage() {  
  140.         return pieceImage;  
  141.     }  
  142.   
  143.     /** 
  144.      * 设置保存方块对象的所对应的图片 
  145.      *  
  146.      * @param pieceImage 
  147.      */  
  148.     public void setPieceImage(PieceImage pieceImage) {  
  149.         this.pieceImage = pieceImage;  
  150.     }  
  151. }  


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

 

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

 

[java] view plaincopy
 
  1. package cn.oyp.link.view;  
  2.   
  3. import android.graphics.Bitmap;  
  4.   
  5. /** 
  6.  * 封装图片ID与图片本身的工具类 <br/> 
  7.  * <br/> 
  8.  * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的CSDN博客</a> <br/> 
  9.  */  
  10. public class PieceImage {  
  11.     /** 
  12.      * 图片 
  13.      */  
  14.     private Bitmap image;  
  15.     /** 
  16.      * 图片资源ID 
  17.      */  
  18.     private int imageId;  
  19.   
  20.     /** 
  21.      * 构造函数 
  22.      *  
  23.      * @param image 
  24.      *            图片 
  25.      * @param imageId 
  26.      *            图片ID 
  27.      */  
  28.     public PieceImage(Bitmap image, int imageId) {  
  29.         super();  
  30.         this.image = image;  
  31.         this.imageId = imageId;  
  32.     }  
  33.   
  34.     /** 
  35.      * @return 图片 
  36.      */  
  37.     public Bitmap getImage() {  
  38.         return image;  
  39.     }  
  40.   
  41.     /** 
  42.      * 设置图片 
  43.      *  
  44.      * @param image 
  45.      */  
  46.     public void setImage(Bitmap image) {  
  47.         this.image = image;  
  48.     }  
  49.   
  50.     /** 
  51.      * @return 图片ID 
  52.      */  
  53.     public int getImageId() {  
  54.         return imageId;  
  55.     }  
  56.   
  57.     /** 
  58.      * 设置图片ID 
  59.      *  
  60.      * @param imageId 
  61.      */  
  62.     public void setImageId(int imageId) {  
  63.         this.imageId = imageId;  
  64.     }  
  65. }  

 

 

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

 

[java] view plaincopy
 
  1. package cn.oyp.link.view;  
  2.   
  3. import java.util.List;  
  4.   
  5. import android.content.Context;  
  6. import android.graphics.Bitmap;  
  7. import android.graphics.Canvas;  
  8. import android.graphics.Color;  
  9. import android.graphics.Paint;  
  10. import android.graphics.Point;  
  11. import android.util.AttributeSet;  
  12. import android.view.View;  
  13. import cn.oyp.link.board.GameService;  
  14. import cn.oyp.link.utils.ImageUtil;  
  15. import cn.oyp.link.utils.LinkInfo;  
  16.   
  17. /** 
  18.  * 连连看游戏中的游戏主界面 <br/> 
  19.  * <br/> 
  20.  * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的CSDN博客</a> <br/> 
  21.  */  
  22. public class GameView extends View {  
  23.     /** 
  24.      * 游戏逻辑的实现类 
  25.      */  
  26.     private GameService gameService;  
  27.     /** 
  28.      * 保存当前已经被选中的方块 
  29.      */  
  30.     private Piece selectedPiece;  
  31.     /** 
  32.      * 连接信息对象 
  33.      */  
  34.     private LinkInfo linkInfo;  
  35.     /** 
  36.      * 画笔Paint 
  37.      */  
  38.     private Paint paint;  
  39.     /** 
  40.      * 选中标识的图片对象 
  41.      */  
  42.     private Bitmap selectImage;  
  43.   
  44.     /** 
  45.      * 构造方法 
  46.      *  
  47.      * @param context 
  48.      * @param attrs 
  49.      */  
  50.     public GameView(Context context, AttributeSet attrs) {  
  51.         super(context, attrs);  
  52.         this.paint = new Paint();  
  53.         // 设置连接线的颜色  
  54.         this.paint.setColor(Color.RED);  
  55.         // 设置连接线的粗细  
  56.         this.paint.setStrokeWidth(3);  
  57.         // 初始化被选中的图片  
  58.         this.selectImage = ImageUtil.getSelectImage(context);  
  59.     }  
  60.   
  61.     /** 
  62.      * 设置连接信息对象 
  63.      *  
  64.      * @param linkInfo 
  65.      */  
  66.     public void setLinkInfo(LinkInfo linkInfo) {  
  67.         this.linkInfo = linkInfo;  
  68.     }  
  69.   
  70.     /** 
  71.      * 设置当前选中方块 
  72.      *  
  73.      * @param piece 
  74.      */  
  75.     public void setSelectedPiece(Piece piece) {  
  76.         this.selectedPiece = piece;  
  77.     }  
  78.   
  79.     /** 
  80.      * 设置游戏逻辑的实现类 
  81.      *  
  82.      * @param gameService 
  83.      */  
  84.     public void setGameService(GameService gameService) {  
  85.         this.gameService = gameService;  
  86.     }  
  87.   
  88.     /** 
  89.      * 绘制图形的方法 
  90.      */  
  91.     @Override  
  92.     protected void onDraw(Canvas canvas) {  
  93.         super.onDraw(canvas);  
  94.         if (this.gameService == null)  
  95.             return;  
  96.         Piece[][] pieces = gameService.getPieces();  
  97.         if (pieces != null) {  
  98.             // 遍历pieces二维数组  
  99.             for (int i = 0; i < pieces.length; i++) {  
  100.                 for (int j = 0; j < pieces[i].length; j++) {  
  101.                     // 如果二维数组中该元素不为空(即有方块),将这个方块的图片画出来  
  102.                     if (pieces[i][j] != null) {  
  103.                         // 得到这个Piece对象  
  104.                         Piece piece = pieces[i][j];  
  105.                         // 根据方块左上角X、Y座标绘制方块  
  106.                         canvas.drawBitmap(piece.getPieceImage().getImage(),  
  107.                                 piece.getBeginX(), piece.getBeginY(), null);  
  108.                     }  
  109.                 }  
  110.             }  
  111.         }  
  112.         // 如果当前对象中有linkInfo对象, 即连接信息  
  113.         if (this.linkInfo != null) {  
  114.             // 绘制连接线  
  115.             drawLine(this.linkInfo, canvas);  
  116.             // 处理完后清空linkInfo对象  
  117.             this.linkInfo = null;  
  118.         }  
  119.         // 画选中标识的图片  
  120.         if (this.selectedPiece != null) {  
  121.             canvas.drawBitmap(this.selectImage, this.selectedPiece.getBeginX(),  
  122.                     this.selectedPiece.getBeginY(), null);  
  123.         }  
  124.     }  
  125.   
  126.     /** 
  127.      * 根据LinkInfo绘制连接线的方法。 
  128.      *  
  129.      * @param linkInfo 
  130.      *            连接信息对象 
  131.      * @param canvas 
  132.      *            画布 
  133.      */  
  134.     private void drawLine(LinkInfo linkInfo, Canvas canvas) {  
  135.         // 获取LinkInfo中封装的所有连接点  
  136.         List<Point> points = linkInfo.getLinkPoints();  
  137.         // 依次遍历linkInfo中的每个连接点  
  138.         for (int i = 0; i < points.size() - 1; i++) {  
  139.             // 获取当前连接点与下一个连接点  
  140.             Point currentPoint = points.get(i);  
  141.             Point nextPoint = points.get(i + 1);  
  142.             // 绘制连线  
  143.             canvas.drawLine(currentPoint.x, currentPoint.y, nextPoint.x,  
  144.                     nextPoint.y, this.paint);  
  145.         }  
  146.     }  
  147.   
  148.     // 开始游戏方法  
  149.     public void startGame() {  
  150.         this.gameService.start();  
  151.         this.postInvalidate();  
  152.     }  
  153. }  

 

 

LinkInfo是一个非常简单的工具类,它用于封装两个方块之间的连接信息:其实就是封装了一个List,List里面保存了连接线所需要经过的点。两个方块之间较多只能用3条线段相连,也就是说较多只能2个拐点,加上这两个方块的中心,方块的连接信息较多只需要4个连接点。因此,LinkInfo较多需要封装4个连接点,较少需要封装2个连接点。

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

 

[java] view plaincopy
 
  1. package cn.oyp.link.utils;  
  2.   
  3. import java.util.List;  
  4. import java.util.ArrayList;  
  5.   
  6. import android.graphics.Point;  
  7.   
  8. /** 
  9.  * 连接信息类<br/> 
  10.  * <br/> 
  11.  * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的CSDN博客</a> <br/> 
  12.  */  
  13. public class LinkInfo {  
  14.     /** 
  15.      *  创建一个集合用于保存连接点 
  16.      */  
  17.     private List<Point> points = new ArrayList<Point>();  
  18.   
  19.     /** 
  20.      *  提供第一个构造器, 表示两个Point可以直接相连, 没有转折点 
  21.      * @param p1 
  22.      * @param p2 
  23.      */  
  24.     public LinkInfo(Point p1, Point p2) {  
  25.         // 加到集合中去  
  26.         points.add(p1);  
  27.         points.add(p2);  
  28.     }  
  29.   
  30.     /** 
  31.      *  提供第二个构造器, 表示三个Point可以相连, p2是p1与p3之间的转折点 
  32.      * @param p1 
  33.      * @param p2 
  34.      * @param p3 
  35.      */  
  36.     public LinkInfo(Point p1, Point p2, Point p3) {  
  37.         points.add(p1);  
  38.         points.add(p2);  
  39.         points.add(p3);  
  40.     }  
  41.   
  42.     /** 
  43.      *  提供第三个构造器, 表示四个Point可以相连, p2, p3是p1与p4的转折点 
  44.      * @param p1 
  45.      * @param p2 
  46.      * @param p3 
  47.      * @param p4 
  48.      */  
  49.     public LinkInfo(Point p1, Point p2, Point p3, Point p4) {  
  50.         points.add(p1);  
  51.         points.add(p2);  
  52.         points.add(p3);  
  53.         points.add(p4);  
  54.     }  
  55.   
  56.     /** 
  57.      * @return 连接集合 
  58.      */  
  59.     public List<Point> getLinkPoints() {  
  60.         return points;  
  61.     }  

 

(责任编辑:杭州华育 ;杭州java培训,网络营销培训,杭州计算机培训,it培训,详询客服报名咨询
分享到:
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
提交报名信息

2018年杭州将加大力度经济转型,吸纳更多的技术人才落户杭州,软件人才需求量更是大幅提升,针对目前杭州IT行业人才需求“井喷”现象,华育软件杭州实训基地与杭州155家IT名企合作,建立人才培养与输送关系,启动“Eduask国家高端IT紧缺人才培养工程”。5月针对杭州地区18-28岁大中专生待业青年发放68个技能实训名额(应届大中专毕业生优先),经短期专业岗前实训后推荐进入企业,起薪4500-8000元,五险一金。

姓名: * 性别:
学历: 电话: *
所在地: *
您目前状况:
留言:
*