1. 程式人生 > >Android 2048遊戲設計

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的程式碼,主要是將各種元件裝配起來。

遊戲介面