Android开发——2048小游戏的开发

        眼看自己学android已经有了快半年的时间，学的东西虽然不少但是实战做出来的“产品”却屈指可数，于是打算趁着新年的最后几天完成几个小demo，巩固之前所学的基础，也查漏补缺一下自己知识遗漏的地方。因为之前一段时间一直在玩2048，于是便思索着能不能自己也动手做一个出来，心动不如行动，那今天就一起来学习一下简单的2048小demo的制作。虽然整体的框架脑中已经勾画了出来，但是想要独立完成能力还是有点欠缺，于是借鉴了一下鸿洋大神的文章，并把自己的一些想法和分析也写了下来。我觉得学习别人的作品是很重要的，但是不能单单把代码完完整整的复制黏贴下来然后吹嘘自己多么厉害，而是要静下心来学习别人解决问题的思路，让自己一步步成长到有能力能独立解决一个个难题。

        话不多说，开始我们这次的学习吧。

        首先我们需要清楚的就是我们这个2048的游戏的整个构架是怎么样的，结合实际图片来看一下。

                                                         

        通过图片，我们可以将整个界面可以分为以下几个区域：

• SCORE分数区：一个TextView
• Layout布局区：一个大的ViewGroup中包含很多小View（Item）

        这里我们将Item和ViewGroup都进行自定义，以此来回顾一下自定义View的简单过程。整体可以采用RelativeLayout布局，方便处理他们的相对位置关系，TextView也可以再用LinearLayout嵌套一下。那这里我们就先将布局文件xml写出来。（本人可能更喜欢将整体的布局整理出来，当然这不是一个很好的习惯）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.game2048.MainActivity">

    <com.example.game2048.Game2048Layout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/id_game2048"
        android:layout_centerInParent="true"
        android:background="#ffffff"
        android:padding="10dp">
    </com.example.game2048.Game2048Layout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/id_game2048"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:background="#EEE4DA"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/id_score"
            android:padding="4dp"
            android:text="Score:0"
            android:textColor="#EA7821"
            android:textSize="30sp"
            android:textStyle="bold"/>
    </LinearLayout>

</RelativeLayout>

        这个Game2048Layout就是我们自定义的ViewGroup了。之后我们选择让其继承RelativeLayout，这样可以通过设置RIGHT_OF等属性进行定位，方便Item的放置。当然我们可以先不急着把Game2048Layout完成，因为大部分关键性的代码都在里面，而前提是那一个个小的Item，有了它们才能像图片那样显示数字，才能“滑动”块。所以我们首先自定义Item。

        观察Item，发现其中的主要成分就是背景颜色和数字，颜色也可以由数字来唯一确定，那么最重要的因素就是数字了。有人会说那Item的大小不也很重要吗？确实，Item的大小也是需要确定的，但并不是在这里面确定，而是在外部知道了ViewGroup的宽高之后再加以确定的。

        再思考另外一个很重要的问题，也是之前困扰了我最久的问题：如何让Item进行“移动”并能让两个相同数字“相碰”之后相加。这篇文章的方法是直接改变每个Item上的数字。这个方法比较容易实现但是缺少了那种移动的感觉，如果大家有时间可能参考这篇文章实现让Item跟着手指一起滑动的效果，那样看起来会更加舒服一些但是结构也会更为复杂。那么我们的整体过程就是手指滑动屏幕，然后每个Item进行重绘，改变他的数字和颜色。那么Item里面需要处理的主要方法就是设置数字和获得数字了，可以把重绘View的过程放在设置数字之中。那么来看一下我们Game2048Item的代码：

public class Game2048Item extends View{

    private int mNumber = 0;
    private String mNumberVal;
    private Paint mPaint;
    private Rect mBound;

    public Game2048Item(Context context) {
        this(context,null);
    }

    public Game2048Item(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public Game2048Item(Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mPaint = new Paint();
    }

    public void setNumber(int number){
        mNumber = number;
        mNumberVal = mNumber + "";
        mPaint.setTextSize(50.0f);
        mBound = new Rect();
        mPaint.getTextBounds(mNumberVal,0,mNumberVal.length(),mBound);
        invalidate(); //重新绘制
    }

    public int getNumber