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的代码，主要是将各种组件装配起来。

游戏界面

具体源码可以参考http://download.csdn.net/download/fyf604702289/10273375

概述

实现分析

代码实现

游戏界面

更多相关文章

随机推荐