Android 2048遊戲設計
概述
由於本人要進行安卓的學習,就先做一個簡單的2048小遊戲來練練手,中間也遇到了些困難,但是慢慢也解決了,這裡放上自己實現2048小遊戲的過程。
實現分析
由於基本上算是剛開始接觸Android,很多地方不是很懂,在介面設計上我就有點迷茫,然後參考了一下http://blog.csdn.net/lmj623565791/article/details/40020137這篇部落格,看了下佈局的處理,然後基本上就可以自己來進行實現了。
1.我們把2048裡面盛放16個可見的小方塊的佈局設定成一個自定義的RelativeLayout。
2.我們把2048裡面的16個可見的小方塊,每一個都設定成一個View,這個View需要包含num也就是這個小方塊裡面應該顯示什麼數字,其次就是在佈局中的相對位置。
3.盛放小方塊的佈局需要定義一些屬性,例如小方塊的行列數,佈局本身的寬度,每個小方塊的長度,佈局的內邊距,小方塊的外邊距,還有小方塊本身代表的變數,以及一些用於邏輯控制的變數。
程式碼實現
package com.example.franclyn.testhelloworld;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.view.View;
/**
* Created by franclyn on 2018/3/4.
*/
public class Item_2048 extends View {
static String[] color = { "#CCC0B3", "#EEE4DA", "#EDE0C8", "#F2B179", "#F49563",
"#F5794D", "#F55D37", "#EEE863", "#EDB04D", "#ECB04D", "#EB9437",
"#EA7821", "#EA7821"};
private Rect rect; //記錄自己在layout中的位置
private float y, x; //用於描繪數字的引數
private int num = 0; //方塊記錄的數字
private int textSize = 45; //描繪數字大小的引數
private String mText = null; //顯示的數字
private int textColor, bgColor;
private Paint mPaint = null;
public Item_2048(Context context) {
super(context);
this.mPaint = new Paint();
}
public int getNum() {
return num;
}
public Rect getRect() {
return rect;
}
public int getTextSize() {
return textSize;
}
public void setTextSize(int textSize) {
this.textSize = textSize;
}
public void setNum(int num) {
this.num = num;
}
public void setRect(Rect rect) {
this.rect = rect;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(num == 0) {
bgColor = Color.parseColor(color[0]);
}else {
for(int i = 1; i <= 13; i++) {
if((int)(Math.pow(2, i)) == num)
bgColor = Color.parseColor(color[i]);
}
}
mPaint.setColor(bgColor);
canvas.drawRect(rect, mPaint);
textSize = rect.height() / 2;
mPaint.setTextSize(textSize);
mPaint.setColor(Color.parseColor(color[0]));
x = rect.left + (rect.width() - mPaint.measureText(num + "")) / 2 ;
Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
y = rect.top + (rect.height() + Math.abs(fontMetrics.ascent) - fontMetrics.descent) / 2;
canvas.drawText(num + "", x, y, mPaint);
}
}
以上就是小方塊的程式碼實現,繪製主要在onDraw方法內進行實現。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.franclyn.testhelloworld.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/title">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="restart"
android:id="@+id/restart"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="score : 0"
android:textSize="13pt"
android:background="#ffff00"
android:id="@+id/score"/>
</LinearLayout>
<com.example.franclyn.testhelloworld.GameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/title"
android:padding="10dp"
android:background="#ffffff"
android:id="@+id/l_2048">
</com.example.franclyn.testhelloworld.GameLayout>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
以上是主要的佈局檔案,比較簡陋,只是把基本功能給實現了,在介面最上方會有一個重新開始的按鈕和記錄分數的TextView,在下面就是自定義Layout,也就是遊戲的主要操作的部分。
private int len, layout_len, item_len, marg, pad, score = 0;
private Item_2048 block[][]; //可見小方塊的矩陣
private int items[][]; //對應小方塊的數值
private boolean used[][], mod, once; //mod決定是否產生隨機數,used決定是否能夠進行合併
以上是佈局主要設計的關於邏輯控制的變數。
其中items陣列進行移動邏輯的操作,最後將對應的數值賦予block陣列,進行重繪操作,操作起來會比較方便。
used陣列用來標記在一次操作中是否在某個位置進行了合併數值的操作,如果有過這個操作,在這次操作的剩餘過程中就不能進行數值合併的操作。
mod用來標記是否產生隨機數。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if(!once) { //只初始化一次
len = 4;
block = new Item_2048[len][len];
items = new int[len][len];
used = new boolean[len][len];
pad = Math.min(Math.min(getPaddingLeft(), getPaddingTop()), Math.min(getPaddingRight(),
getPaddingBottom())); //計算佈局的外邊距
layout_len = Math.min(getMeasuredHeight(), getMeasuredWidth());
marg = (layout_len - 2 * pad) / (7 * len - 1); //計算外邊距
item_len = (layout_len - 2 * pad - (len - 1) * marg) / len; //計算小方塊的長度
init();
once = true;
}
setMeasuredDimension(layout_len, layout_len);
}
public void init() { //進行初始化操作
for(int i = 0; i < len; i++) {
for(int j = 0; j < len; j++) {
items[i][j] = 0;
used[i][j] = false;
block[i][j] = new Item_2048(getContext());
block[i][j].setNum(items[i][j]);
}
}
mod = false;
for(int i = 0; i < len; i++) {
for(int j = 0; j < len; j++) {
block[i][j].setRect(new Rect(i * (marg + item_len), j * (marg + item_len), i * (marg + item_len) + item_len, j * (marg + item_len) + item_len)); //設定block在佈局檔案中的位置
addView(block[i][j]);
}
}
genRand();
genRand();
setBlockNum();
invalidate();
}
public void genRand() { //產生隨機數
Random random = new Random();
int x , r, c,y;
while(true) {
x = random.nextInt(len * len);
r = x / len;
c = x % len;
if(items[r][c] == 0) {
y = random.nextInt() % 2;
if(y == 0) {
items[r][c] = 2;
} else {
items[r][c] = 4;
}
break;
}
}
}
public void setBlockNum() { //將items的值賦給block
for(int i = 0; i < len; i++) {
for(int j = 0; j < len; j++) {
block[i][j].setNum(items[i][j]);
}
}
invalidate();
}
上面是主要的頁面佈局的設計,主要是將自定義layout的位置以及其中的小方塊的位置確定。
private GestureDetector.OnGestureListener onGestureListener =
new GestureDetector.SimpleOnGestureListener() {
final int dist = 50;
@Override
public boolean onDown(MotionEvent e) {
return true;
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
Log.e("onFling", "onFling: ");
float x = e2.getX() - e1.getX();
float y = e2.getY() - e1.getY();
if(Math.abs(x) > Math.abs(y)) {
if(x > dist) {
//right
right();
} else if( x < -dist){
//left
left();
}
} else {
if(y > dist) {
//down
down();
} else if(y < -dist){
//up
up();
}
}
if(checkOver()) {
AlertDialog.Builder dialog = new AlertDialog.Builder(getContext());
dialog.setTitle("Oops!!! Game is Over!");
dialog.setTitle("Are you going to restart the game!");
dialog.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
restart();
}
});
dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Log.e("GameOver", "Cancel " );
}
});
dialog.create().show();
}
return true;
}
};
@Override
public boolean onTouchEvent(MotionEvent event) {
// Log.e("onTouchEvent", "onTouchEvent: ");
return detector.onTouchEvent(event);
}
這裡用了GestureDetector用來探測使用者的手勢,並且根據手勢進行相應的處理,處理完成進行了判斷遊戲是否結束的邏輯。
public void handle(int i, int j, int dir_i, int dir_j) {
if(items[i][j] == 0) //如果沒有數值,不進行處理,直接返回
return;
int cur_i, cur_j, tmp;
cur_i = i + dir_i;
cur_j = j + dir_j;
tmp = items[i][j];
items[i][j] = 0;
while((dir_i == 0 ? (dir_j > 0 ? cur_j < len - 1: cur_j > 0) :(dir_i > 0 ? cur_i < len - 1: cur_i > 0 )) && items[cur_i][cur_j] == 0) { //找到一個不為空的位置或者到了陣列的邊界
cur_i += dir_i;
cur_j += dir_j;
}
if(items[cur_i][cur_j] == tmp && (!used[cur_i][cur_j])) { //能夠進行合併操作
items[cur_i][cur_j] = tmp * 2;
score += tmp * 2;
Activity act = (Activity)getContext();
TextView text = act.findViewById(R.id.score);
text.setText("score : " + score);
used[cur_i][cur_j] = true;
mod = true;
} else if(items[cur_i][cur_j] == 0){ //如果為空,直接進行移動
items[cur_i][cur_j] = tmp;
mod = true;
} else { //把數值放到此位置的上一個位置,進行判斷,如果上一個位置不是原位置,將mod設定為true
items[cur_i - dir_i][cur_j - dir_j] = tmp;
if(cur_i - dir_i != i || cur_j - dir_j != j)
mod = true;
}
}
public void lastHandle() {
if(mod) {
genRand();
setBlockNum();
initUsed();
mod = false;
invalidate();
}
}
public void left() {
int cur, tmp;
for(int i = 1; i < len; i++) {
for(int j = 0; j < len; j++) {
handle(i, j, -1, 0);
}
}
lastHandle();
}
public void right() {
int cur, tmp;
for(int i = len - 2; i >= 0; i--) {
for(int j = 0; j < len; j++) {
handle(i, j, 1, 0);
}
}
lastHandle();
}
public void up() {
int cur, tmp;
for(int i = 1; i < len; i++) {
for(int j = 0; j < len; j++) {
handle(j, i, 0, -1);
}
}
lastHandle();
}
public void down() {
int cur, tmp;
for(int i = len - 2; i >= 0; i--) {
for(int j = 0; j < len; j++) {
handle(j, i, 0, 1);
}
}
lastHandle();
}
public boolean checkOk(int i, int j, int d_i, int d_j) {
int cur_i = i + d_i, cur_j = j + d_j;
if(cur_i > 0 && cur_i < len && cur_j > 0 && cur_j < len) {
if(items[i][j] == items[cur_i][cur_j])
return true;
}
return false;
}
public boolean checkOver() {
for(int i = 0; i < len; i++) {
for(int j = 0; j < len; j++) {
if(items[i][j] == 0) {
return false;
}
if(checkOk(i, j, 0, 1) || checkOk(i, j, 0, -1) || checkOk(i, j, -1, 0) || checkOk(i, j, 1, 0))
return false;
}
}
return true;
}
以上程式碼是主要的移動邏輯控制,主要的是handle方法進行判斷,首先按照特定的移動方式,以向上為例,從第二行開始,每一個位置進行操作,設這個位置為(i,j), 記錄自身位置的值,將items[i][j]設定為0,然後向上找到一個非0位置或者達到陣列的邊界為止,設這個位置為(p,q),然後進行判斷,
1.如果找到位置的值與原位置的值相等,並且used[p][q]值為false,這時可以將items[p][q]設定為原來數值的兩倍,表示進行合併操作,同時更新得到分數的值,更新used[p][q],更新mod,表示進行了有效的操作
2.如果找到位置的值為0,將items[p][q]設定為items[i][j]的原來的數值,更新一下mod,表示進行了有效的操作
3.如果不符合以上的兩種情況,就把(p, q)向上的位置設定為items[i][j]原來的數值,因為此時有兩種情況,一種是(p,q)上一個位置為(i, j),另一種情況是(p,q)上一個位置不是(i, j),但是上一個位置的值為0,所以將上一個位置設定為(i,j)原來的值,然後判斷一下上一個位置是不是(i,j),如果不是的話就將mod更新一下,表示進行了有效的操作。
package com.example.franclyn.testhelloworld;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.Rect;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
Button restart;
TextView score;
GameLayout layout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
restart = (Button)findViewById(R.id.restart);
score = (TextView)findViewById(R.id.score);
layout = (GameLayout)findViewById(R.id.l_2048);
restart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Log.i("click", "onClick: ");
AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
dialog.setTitle("Restart the game");
dialog.setTitle("Are you going to restart the game!");
dialog.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
layout.restart();
}
});
dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Log.e("Restart button", "Cancel " );
}
});
dialog.create().show();
}
});
}
}
MainActivity的程式碼,主要是將各種元件裝配起來。