AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

我的Android进阶之旅------>Android疯狂连连看游戏的实现之开发游戏界面(二)

2013-11-04 1010
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 连连看的游戏界面十分简单，大致可以分为两个区域： 游戏主界面区控制按钮和数据显示区1、开发界面布局 本程序使用一个RelativeLayout作为整体的界面布局元素，界面布局上面是一个自定义组件，下面是一个水平排列的LinearLayout。


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

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

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/>
 * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的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/>
 * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的CSDN博客</a> <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/>
 * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的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/>
 * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的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;
	}
}

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

==================================================================================================

  作者：欧阳鹏  欢迎转载，与人分享是进步的源泉！

  转载请保留原文地址：http://blog.csdn.net/ouyang_peng

==================================================================================================




文章标签：
Android开发
前端开发
索引
数据格式
XML
关键词：
Android开发
Android界面
Android进阶
Android游戏
Android实现
字节卷动
目录
相关文章
请看我回答~
|
2月前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上，安卓和iOS两大阵营各据一方。随着技术的演进，跨平台开发框架成为开发者的新宠，旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战，并分享实用的开发技巧，帮助开发者在安卓和iOS的世界中游刃有余。
请看我回答~
53 1
shuj
|
2月前
|
缓存 前端开发 Android开发
安卓开发中的自定义视图：从零到英雄
【10月更文挑战第42天】 在安卓的世界里，自定义视图是一块画布，让开发者能够绘制出独一无二的界面体验。本文将带你走进自定义视图的大门，通过深入浅出的方式，让你从零基础到能够独立设计并实现复杂的自定义组件。我们将探索自定义视图的核心概念、实现步骤，以及如何优化你的视图以提高性能和兼容性。准备好了吗？让我们开始这段创造性的旅程吧！
shuj
34 1
游客qf4jmczx4xu2y
|
2月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图：打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中，自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程，以及如何通过它们增强应用的用户体验。我们将从基础出发，逐步深入，最终让你能够自信地设计和实现专属的UI组件。
游客qf4jmczx4xu2y
57 4
mrq4nk6ni2neg
|
1月前
|
搜索推荐 前端开发 API
探索安卓开发中的自定义视图：打造个性化用户界面
在安卓应用开发的广阔天地中，自定义视图是一块神奇的画布，让开发者能够突破标准控件的限制，绘制出独一无二的用户界面。本文将带你走进自定义视图的世界，从基础概念到实战技巧，逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者，这篇文章都将为你打开新的视野，让你的应用在众多同质化产品中脱颖而出。
mrq4nk6ni2neg
56 19
aliyun8599273441-30642
|
2月前
|
IDE Java 开发工具
移动应用与系统：探索Android开发之旅
在这篇文章中，我们将深入探讨Android开发的各个方面，从基础知识到高级技术。我们将通过代码示例和案例分析，帮助读者更好地理解和掌握Android开发。无论你是初学者还是有经验的开发者，这篇文章都将为你提供有价值的信息和技巧。让我们一起开启Android开发的旅程吧！
aliyun8599273441-30642
69 30
请看我回答~
|
1月前
|
JSON Java API
探索安卓开发：打造你的首个天气应用
在这篇技术指南中，我们将一起潜入安卓开发的海洋，学习如何从零开始构建一个简单的天气应用。通过这个实践项目，你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者，这篇文章都将为你提供一个清晰的路线图和实用的代码示例，帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程，打造属于你自己的第一个安卓应用吧！
请看我回答~
62 14
肥猪肥猪-17824
|
1月前
|
Java Linux 数据库
探索安卓开发：打造你的第一款应用
在数字时代的浪潮中，每个人都有机会成为创意的实现者。本文将带你走进安卓开发的奇妙世界，通过浅显易懂的语言和实际代码示例，引导你从零开始构建自己的第一款安卓应用。无论你是编程新手还是希望拓展技术的开发者，这篇文章都将为你打开一扇门，让你的创意和技术一起飞扬。
肥猪肥猪-17824
63 13
shuj
|
1月前
|
XML 存储 Java
探索安卓开发之旅：从新手到专家
在数字时代，掌握安卓应用开发技能是进入IT行业的关键。本文将引导读者从零基础开始，逐步深入安卓开发的世界，通过实际案例和代码示例，展示如何构建自己的第一个安卓应用。我们将探讨基本概念、开发工具设置、用户界面设计、数据处理以及发布应用的全过程。无论你是编程新手还是有一定基础的开发者，这篇文章都将为你提供宝贵的知识和技能，帮助你在安卓开发的道路上迈出坚实的步伐。
shuj
36 5
天下无贼001
|
1月前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略：一次编码，多平台部署
在移动应用开发的广阔天地中，安卓和iOS两大阵营各占一方。随着技术的发展，跨平台开发框架应运而生，它们承诺着“一次编码，到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势，同时通过代码示例揭示跨平台工具的实际运用。
天下无贼001
101 3
我不是游客20240119
|
1月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图：打造个性化UI组件
在安卓应用开发中，自定义视图是一种强大的工具，它允许开发者创造独一无二的用户界面元素，从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例，引导你了解如何在安卓项目中实现自定义组件，并探讨其背后的技术原理。我们将从基础的View类讲起，逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者，这篇文章都将为你提供有价值的见解和技巧。
我不是游客20240119
50 4