溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Android實(shí)現(xiàn)瘋狂連連看游戲之開發(fā)游戲界面(二)

發(fā)布時(shí)間:2020-10-19 10:49:00 來源:腳本之家 閱讀:323 作者:歐陽鵬 欄目:移動(dòng)開發(fā)

連連看的游戲界面十分簡單,大致可以分為兩個(gè)區(qū)域:
--游戲主界面區(qū)
--控制按鈕和數(shù)據(jù)顯示區(qū)

1、開發(fā)界面布局

本程序使用一個(gè)RelativeLayout作為整體的界面布局元素,界面布局上面是一個(gè)自定義組件,下面是一個(gè)水平排列的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"> 
 <!-- 控制游戲開始的按鈕,該按鈕的背景圖片可以根據(jù)按鈕的狀態(tài)改變 --> 
 <Button android:id="@+id/startButton" android:layout_width="wrap_content" 
 android:layout_height="wrap_content" android:background="@drawable/button_selector" /> 
 <!-- 顯示游戲剩余時(shí)間的文本框 --> 
 <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對(duì)象,配置文件代碼如下:res/drawable/button_selector.xml

<?xml version="1.0" encoding="UTF-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
 <!-- 指定按鈕按下時(shí)的圖片 --> 
 <item android:state_pressed="true" android:drawable="@drawable/start_down" /> 
 <!-- 指定按鈕松開時(shí)的圖片 --> 
 <item android:state_pressed="false" android:drawable="@drawable/start" /> 
</selector> 

2、開發(fā)游戲界面組件

本游戲采用了一個(gè)自定義View:GameView,它從View的基類派生出來,這個(gè)自定義View的功能就是根據(jù)游戲狀態(tài)來描繪游戲界面上的全部方塊。

為了開發(fā)這個(gè)GameView,本程序還提供了一個(gè)Piece類,一個(gè)Piece對(duì)象代表游戲界面中的一個(gè)方塊,它除了封裝了方塊上的圖片之外,還需要封裝該方塊代表二維數(shù)組中的那個(gè)元素,也需要封裝它的左上角在游戲界面中的X、Y坐標(biāo),這X、Y坐標(biāo)可以決定方塊的繪制位置,GameView根據(jù)這兩個(gè)坐標(biāo)值繪制全部方塊即可。

下面是Piece類的代碼:cn\oyp\link\view\Piece.java

package cn.oyp.link.view; 
 
import android.graphics.Point; 
 
/** 
 * 連連看游戲中的方塊對(duì)象 <br/> 
 * <br/> 
 * 關(guān)于本代碼介紹可以參考一下博客: 歐陽鵬的CSDN博客</a> <br/> 
 */ 
public class Piece { 
 /** 
 * 保存方塊對(duì)象的所對(duì)應(yīng)的圖片 
 */ 
 private PieceImage pieceImage; 
 /** 
 * 該方塊的左上角的x坐標(biāo) 
 */ 
 private int beginX; 
 /** 
 * 該方塊的左上角的y座標(biāo) 
 */ 
 private int beginY; 
 /** 
 * 該對(duì)象在Piece[][]數(shù)組中第一維的索引值 
 */ 
 private int indexX; 
 /** 
 * 該對(duì)象在Piece[][]數(shù)組中第二維的索引值 
 */ 
 private int indexY; 
 
 /** 
 * 設(shè)置該P(yáng)iece對(duì)象在數(shù)組中的索引值 
 * 
 * @param indexX 
 * 該方塊的左上角的x坐標(biāo) 
 * @param indexY 
 * 該方塊的左上角的y座標(biāo) 
 */ 
 public Piece(int indexX, int indexY) { 
 this.indexX = indexX; 
 this.indexY = indexY; 
 } 
 
 /** 
 * 獲取該P(yáng)iece的中心位置 
 * 
 * @return 中心點(diǎn)的坐標(biāo)對(duì)象Point 
 */ 
 public Point getCenter() { 
 return new Point(getBeginX() + getPieceImage().getImage().getWidth() 
 / 2, getBeginY() + getPieceImage().getImage().getHeight() / 2); 
 } 
 
 /** 
 * 判斷兩個(gè)Piece上的圖片是否相同 
 * 
 * @param otherPieceImage 
 * 另外的一個(gè)Piece對(duì)象 
 * @return 是否相同 
 */ 
 public boolean isSameImage(Piece otherPieceImage) { 
 if (pieceImage == null) { 
 if (otherPieceImage.pieceImage != null) 
 return false; 
 } 
 // 當(dāng)兩個(gè)Piece封裝圖片資源ID相同時(shí),即可認(rèn)為這兩個(gè)Piece上的圖片相同。 
 return pieceImage.getImageId() == otherPieceImage.pieceImage 
 .getImageId(); 
 } 
 
 /** 
 * @return 該方塊的左上角的X坐標(biāo) 
 */ 
 public int getBeginX() { 
 return beginX; 
 } 
 
 /** 
 * 設(shè)置該方塊的左上角的X坐標(biāo) 
 * 
 * @param beginX 
 */ 
 public void setBeginX(int beginX) { 
 this.beginX = beginX; 
 } 
 
 /** 
 * @return 該方塊的左上角的Y座標(biāo) 
 */ 
 public int getBeginY() { 
 return beginY; 
 } 
 
 /** 
 * 設(shè)置該方塊的左上角的Y坐標(biāo) 
 * 
 * @param beginY 
 */ 
 public void setBeginY(int beginY) { 
 this.beginY = beginY; 
 } 
 
 /** 
 * @return 該對(duì)象在Piece[][]數(shù)組中第一維的索引值 
 */ 
 public int getIndexX() { 
 return indexX; 
 } 
 
 /** 
 * 設(shè)置該對(duì)象在Piece[][]數(shù)組中第一維的索引值 
 * 
 * @param indexX 
 */ 
 public void setIndexX(int indexX) { 
 this.indexX = indexX; 
 } 
 
 /** 
 * @return 該對(duì)象在Piece[][]數(shù)組中第二維的索引值 
 */ 
 public int getIndexY() { 
 return indexY; 
 } 
 
 /** 
 * 設(shè)置該對(duì)象在Piece[][]數(shù)組中第二維的索引值 
 * 
 * @param indexY 
 */ 
 public void setIndexY(int indexY) { 
 this.indexY = indexY; 
 } 
 
 /** 
 * @return 保存方塊對(duì)象的所對(duì)應(yīng)的圖片 
 */ 
 public PieceImage getPieceImage() { 
 return pieceImage; 
 } 
 
 /** 
 * 設(shè)置保存方塊對(duì)象的所對(duì)應(yīng)的圖片 
 * 
 * @param pieceImage 
 */ 
 public void setPieceImage(PieceImage pieceImage) { 
 this.pieceImage = pieceImage; 
 } 
} 

上面Piece類中封裝的PieceImage代表了該方塊上的圖片,它封裝了兩個(gè)信息:Bitmap對(duì)象和圖片資源ID。其中Bitmap對(duì)象用于在游戲界面上繪制方塊;而圖片資源ID則表示該P(yáng)iece對(duì)象的標(biāo)識(shí),當(dāng)兩個(gè)Piece所封裝的圖片資源ID相等時(shí),即可認(rèn)為這兩個(gè)Piece上的圖片相同。

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

package cn.oyp.link.view; 
 
import android.graphics.Bitmap; 
 
/** 
 * 封裝圖片ID與圖片本身的工具類 <br/> 
 * <br/> 
 * 關(guān)于本代碼介紹可以參考一下博客: 歐陽鵬的CSDN博客 <br/> 
 */ 
public class PieceImage { 
 /** 
 * 圖片 
 */ 
 private Bitmap image; 
 /** 
 * 圖片資源ID 
 */ 
 private int imageId; 
 
 /** 
 * 構(gòu)造函數(shù) 
 * 
 * @param image 
 * 圖片 
 * @param imageId 
 * 圖片ID 
 */ 
 public PieceImage(Bitmap image, int imageId) { 
 super(); 
 this.image = image; 
 this.imageId = imageId; 
 } 
 
 /** 
 * @return 圖片 
 */ 
 public Bitmap getImage() { 
 return image; 
 } 
 
 /** 
 * 設(shè)置圖片 
 * 
 * @param image 
 */ 
 public void setImage(Bitmap image) { 
 this.image = image; 
 } 
 
 /** 
 * @return 圖片ID 
 */ 
 public int getImageId() { 
 return imageId; 
 } 
 
 /** 
 * 設(shè)置圖片ID 
 * 
 * @param imageId 
 */ 
 public void setImageId(int imageId) { 
 this.imageId = imageId; 
 } 
} 

GameView主要就是根據(jù)游戲的狀態(tài)來繪制界面上的方塊,GameView繼承了View組件,重寫了View組件上的onDraw(Canvas canvas)方法,重寫該方法主要就是繪制游戲里剩余的方塊,除此之外,它還復(fù)雜繪制連接方塊的連接線。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/> 
 * 關(guān)于本代碼介紹可以參考一下博客:歐陽鵬的CSDN博客</a> <br/> 
 */ 
public class GameView extends View { 
 /** 
 * 游戲邏輯的實(shí)現(xiàn)類 
 */ 
 private GameService gameService; 
 /** 
 * 保存當(dāng)前已經(jīng)被選中的方塊 
 */ 
 private Piece selectedPiece; 
 /** 
 * 連接信息對(duì)象 
 */ 
 private LinkInfo linkInfo; 
 /** 
 * 畫筆Paint 
 */ 
 private Paint paint; 
 /** 
 * 選中標(biāo)識(shí)的圖片對(duì)象 
 */ 
 private Bitmap selectImage; 
 
 /** 
 * 構(gòu)造方法 
 * 
 * @param context 
 * @param attrs 
 */ 
 public GameView(Context context, AttributeSet attrs) { 
 super(context, attrs); 
 this.paint = new Paint(); 
 // 設(shè)置連接線的顏色 
 this.paint.setColor(Color.RED); 
 // 設(shè)置連接線的粗細(xì) 
 this.paint.setStrokeWidth(3); 
 // 初始化被選中的圖片 
 this.selectImage = ImageUtil.getSelectImage(context); 
 } 
 
 /** 
 * 設(shè)置連接信息對(duì)象 
 * 
 * @param linkInfo 
 */ 
 public void setLinkInfo(LinkInfo linkInfo) { 
 this.linkInfo = linkInfo; 
 } 
 
 /** 
 * 設(shè)置當(dāng)前選中方塊 
 * 
 * @param piece 
 */ 
 public void setSelectedPiece(Piece piece) { 
 this.selectedPiece = piece; 
 } 
 
 /** 
 * 設(shè)置游戲邏輯的實(shí)現(xiàn)類 
 * 
 * @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二維數(shù)組 
 for (int i = 0; i < pieces.length; i++) { 
 for (int j = 0; j < pieces[i].length; j++) { 
 // 如果二維數(shù)組中該元素不為空(即有方塊),將這個(gè)方塊的圖片畫出來 
 if (pieces[i][j] != null) { 
 // 得到這個(gè)Piece對(duì)象 
 Piece piece = pieces[i][j]; 
 // 根據(jù)方塊左上角X、Y座標(biāo)繪制方塊 
 canvas.drawBitmap(piece.getPieceImage().getImage(), 
 piece.getBeginX(), piece.getBeginY(), null); 
 } 
 } 
 } 
 } 
 // 如果當(dāng)前對(duì)象中有l(wèi)inkInfo對(duì)象, 即連接信息 
 if (this.linkInfo != null) { 
 // 繪制連接線 
 drawLine(this.linkInfo, canvas); 
 // 處理完后清空linkInfo對(duì)象 
 this.linkInfo = null; 
 } 
 // 畫選中標(biāo)識(shí)的圖片 
 if (this.selectedPiece != null) { 
 canvas.drawBitmap(this.selectImage, this.selectedPiece.getBeginX(), 
 this.selectedPiece.getBeginY(), null); 
 } 
 } 
 
 /** 
 * 根據(jù)LinkInfo繪制連接線的方法。 
 * 
 * @param linkInfo 
 * 連接信息對(duì)象 
 * @param canvas 
 * 畫布 
 */ 
 private void drawLine(LinkInfo linkInfo, Canvas canvas) { 
 // 獲取LinkInfo中封裝的所有連接點(diǎn) 
 List<Point> points = linkInfo.getLinkPoints(); 
 // 依次遍歷linkInfo中的每個(gè)連接點(diǎn) 
 for (int i = 0; i < points.size() - 1; i++) { 
 // 獲取當(dāng)前連接點(diǎn)與下一個(gè)連接點(diǎn) 
 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是一個(gè)非常簡單的工具類,它用于封裝兩個(gè)方塊之間的連接信息:其實(shí)就是封裝了一個(gè)List,List里面保存了連接線所需要經(jīng)過的點(diǎn)。兩個(gè)方塊之間最多只能用3條線段相連,也就是說最多只能2個(gè)拐點(diǎn),加上這兩個(gè)方塊的中心,方塊的連接信息最多只需要4個(gè)連接點(diǎn)。因此,LinkInfo最多需要封裝4個(gè)連接點(diǎn),最少需要封裝2個(gè)連接點(diǎn)。
下面是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/> 
 * 關(guān)于本代碼介紹可以參考一下博客: 歐陽鵬的CSDN博客</a> <br/> 
 */ 
public class LinkInfo { 
 /** 
 * 創(chuàng)建一個(gè)集合用于保存連接點(diǎn) 
 */ 
 private List<Point> points = new ArrayList<Point>(); 
 
 /** 
 * 提供第一個(gè)構(gòu)造器, 表示兩個(gè)Point可以直接相連, 沒有轉(zhuǎn)折點(diǎn) 
 * @param p1 
 * @param p2 
 */ 
 public LinkInfo(Point p1, Point p2) { 
 // 加到集合中去 
 points.add(p1); 
 points.add(p2); 
 } 
 
 /** 
 * 提供第二個(gè)構(gòu)造器, 表示三個(gè)Point可以相連, p2是p1與p3之間的轉(zhuǎn)折點(diǎn) 
 * @param p1 
 * @param p2 
 * @param p3 
 */ 
 public LinkInfo(Point p1, Point p2, Point p3) { 
 points.add(p1); 
 points.add(p2); 
 points.add(p3); 
 } 
 
 /** 
 * 提供第三個(gè)構(gòu)造器, 表示四個(gè)Point可以相連, p2, p3是p1與p4的轉(zhuǎn)折點(diǎn) 
 * @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; 
 } 
} 

關(guān)于具體的實(shí)現(xiàn)步驟,請(qǐng)參考下面的鏈接:

我的Android進(jìn)階之旅------>Android瘋狂連連看游戲的實(shí)現(xiàn)之游戲效果預(yù)覽(一)

我的Android進(jìn)階之旅------>Android瘋狂連連看游戲的實(shí)現(xiàn)之狀態(tài)數(shù)據(jù)模型(三)

我的Android進(jìn)階之旅------>Android瘋狂連連看游戲的實(shí)現(xiàn)之加載界面圖片和實(shí)現(xiàn)游戲Activity(四)

我的Android進(jìn)階之旅------>Android瘋狂連連看游戲的實(shí)現(xiàn)之實(shí)現(xiàn)游戲邏輯(五)

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI