2048,一個最近風靡全球的游戲。
2048,一個令玩家愛不釋手的游戲。
我認為，你玩轉2048，不如搞定2048.
2048,規則大家應該都知道了，這里在贅述一面：
在玩法規則也非常的簡單，一開始方格內會出現2或者4等這兩個小數字，玩家只需要上下左右其中一個方向來移動出現的數字，所有的數字就會向滑動的方向靠攏，而滑出的空白方塊就會隨機出現一個數字，相同的數字相撞時會疊加靠攏，然后一直這樣，不斷的疊加最終拼湊出2048這個數字就算成功。
這個游戲創意非凡，用代碼實現功能卻是非常的簡單。區區500行代碼，就滿足相應的要求。
首先，請看我的思維導圖：
這是我的游戲的類的結構圖：
下面我將一個個介紹相應的類。
首先，先介紹animLayer這個類，這是一個控制移動動畫類，相應的源代碼如下：
public class AnimLayer extends FrameLayout { public AnimLayer(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); initLayer(); } public AnimLayer(Context context, AttributeSet attrs) { super(context, attrs); initLayer(); } public AnimLayer(Context context) { super(context); initLayer(); } private void initLayer(){ } public void createMoveAnim(final Card from,final Card to,int fromX,int toX,int fromY,int toY){ final Card c = getCard(from.getNum()); LayoutParams lp = new LayoutParams(Config.CARD_WIDTH, Config.CARD_WIDTH); lp.leftMargin = fromX*Config.CARD_WIDTH; lp.topMargin = fromY*Config.CARD_WIDTH; c.setLayoutParams(lp); if (to.getNum()<=0) { to.getLabel().setVisibility(View.INVISIBLE); } TranslateAnimation ta = new TranslateAnimation(0, Config.CARD_WIDTH*(toX-fromX), 0, Config.CARD_WIDTH*(toY-fromY)); ta.setDuration(100); ta.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) {} @Override public void onAnimationRepeat(Animation animation) {} @Override public void onAnimationEnd(Animation animation) { to.getLabel().setVisibility(View.VISIBLE); recycleCard(c); } }); c.startAnimation(ta); } private Card getCard(int num){ Card c; if (cards.size()>0) { c = cards.remove(0); }else{ c = new Card(getContext()); addView(c); } c.setVisibility(View.VISIBLE); c.setNum(num); return c; } private void recycleCard(Card c){ c.setVisibility(View.INVISIBLE); c.setAnimation(null); cards.add(c); } private List<Card> cards = new ArrayList<Card>(); public void createScaleTo1(Card target){ ScaleAnimation sa = new ScaleAnimation(0.1f, 1, 0.1f, 1, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); sa.setDuration(100); target.setAnimation(null); target.getLabel().startAnimation(sa); } }
看了以上的代碼，我們能夠得到這樣子的總結：
Ⅰ，我們看到這個動畫層控件繼承與楨布局了，他實質是楨布局控件。
Ⅱ，根據相應的索引，獲取相應卡片對象，記住了這個一定是先從數組列表中移去，再添加，這樣做的目的是在4.2以下系統出現異常。還要注意移動的對象，要注意回收相應的對象。
Ⅲ，這個類的核心功能，就是實現相應動畫的功能，要記住從哪兒控件移動到哪兒控件中去。對齊相應移動動畫，添加相應的動畫監聽的事件。
接下來，看一看card類，這是一個主要控制類，主要控制卡片移動邏輯。還是看一下源代碼：
public class Card extends FrameLayout { public Card(Context context) { super(context); LayoutParams lp = null; background = new View(getContext()); lp = new LayoutParams(-1, -1); lp.setMargins(10, 10, 0, 0); background.setBackgroundColor(0x33ffffff); addView(background, lp); label = new TextView(getContext()); label.setTextSize(28); label.setGravity(Gravity.CENTER); lp = new LayoutParams(-1, -1); lp.setMargins(10, 10, 0, 0); addView(label, lp); setNum(0); } private int num = 0; public int getNum() { return num; } public void setNum(int num) { this.num = num; if (num<=0) { label.setText(""); }else{ label.setText(num+""); } switch (num) { case 0: label.setBackgroundColor(0x00000000); break; case 2: label.setBackgroundColor(0xffeee4da); break; case 4: label.setBackgroundColor(0xffede0c8); break; case 8: label.setBackgroundColor(0xfff2b179); break; case 16: label.setBackgroundColor(0xfff59563); break; case 32: label.setBackgroundColor(0xfff67c5f); break; case 64: label.setBackgroundColor(0xfff65e3b); break; case 128: label.setBackgroundColor(0xffedcf72); break; case 256: label.setBackgroundColor(0xffedcc61); break; case 512: label.setBackgroundColor(0xffedc850); break; case 1024: label.setBackgroundColor(0xffedc53f); break; case 2048: label.setBackgroundColor(0xffedc22e); break; default: label.setBackgroundColor(0xff3c3a32); break; } } public boolean equals(Card o) { return getNum()==o.getNum(); } protected Card clone(){ Card c= new Card(getContext()); c.setNum(getNum()); return c; } public TextView getLabel() { return label; } private TextView label; private View background; }
我們能夠得到這樣的結論，相應的結論如下:
Ⅰlabel顯示相應得分情況，background是相應背景圖片。
Ⅱ在構造函數初始化情況，我們設置相應文字，字體大小，以及相應的對齊方式了，這些都是在數據初始化中做的動作了。
Ⅲ根據不同分值卡片，來顯示不同顏色的卡片，就是在這個setnumber中實現的。
Ⅳ相應的卡片拷貝,是一種必然，我們就在這個clone方法中完成了相應值傳遞。
這樣，利用了面向對象的原則，就把一個卡片的類模擬出來了。
config類，主要是一些配置信息，我們記錄了每行的長度，和卡片的寬度。
接下來，就來到了這個游戲的重頭戲——GameView類，相當於一個游戲組件的控制類。相應源代碼如下：
public class GameView extends GridLayout { /** * 構造 函數 數據的初始化 * @param context * @param attrs * @param defStyle */ public GameView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); initView(); } /** * 構造函數 數據初始化 * @param context */ public GameView(Context context) { super(context); initView(); } /** * 構造函數 數據的初始化 * @param context 上下文對象 * @param attrs */ public GameView(Context context, AttributeSet attrs) { super(context, attrs); initView(); } /** * 初始化 ui控件 */ private void initView(){ setColumnCount(Config.LINES); setBackgroundColor(0xffbbada0); setOnTouchListener(new View.OnTouchListener() { private float startX,startY,offsetX,offsetY; @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: startX = event.getX(); startY = event.getY(); break; case MotionEvent.ACTION_UP: offsetX = event.getX()-startX; offsetY = event.getY()-startY; if (Math.abs(offsetX)>Math.abs(offsetY)) { if (offsetX<-5) { swipeLeft(); }else if (offsetX>5) { swipeRight(); } }else{ if (offsetY<-5) { swipeUp(); }else if (offsetY>5) { swipeDown(); } } break; } return true; } }); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); Config.CARD_WIDTH = (Math.min(w, h)-10)/Config.LINES; addCards(Config.CARD_WIDTH,Config.CARD_WIDTH); startGame(); } /** * 添加卡片的方法 * @param cardWidth 寬度 * @param cardHeight 高度 */ private void addCards(int cardWidth,int cardHeight){ Card c; for (int y = 0; y < Config.LINES; y++) { for (int x = 0; x < Config.LINES; x++) { c = new Card(getContext()); addView(c, cardWidth, cardHeight); cardsMap[x][y] = c; } } } /** * 開始游戲的方法 */ public void startGame(){ MainActivity aty = MainActivity.getMainActivity(); aty.clearScore(); aty.showBestScore(aty.getBestScore()); for (int y = 0; y < Config.LINES; y++) { for (int x = 0; x < Config.LINES; x++) { cardsMap[x][y].setNum(0); } } addRandomNum(); addRandomNum(); } /** * 添加隨機卡片的方法 */ private void addRandomNum(){ emptyPoints.clear(); for (int y = 0; y < Config.LINES; y++) { for (int x = 0; x < Config.LINES; x++) { if (cardsMap[x][y].getNum()<=0) { emptyPoints.add(new Point(x, y)); } } } if (emptyPoints.size()>0) { Point p = emptyPoints.remove((int)(Math.random()*emptyPoints.size())); cardsMap[p.x][p.y].setNum(Math.random()>0.1?2:4); MainActivity.getMainActivity().getAnimLayer().createScaleTo1(cardsMap[p.x][p.y]); } } private void swipeLeft(){ boolean merge = false; for (int y = 0; y < Config.LINES; y++) { for (int x = 0; x < Config.LINES; x++) { for (int x1 = x+1; x1 < Config.LINES; x1++) { if (cardsMap[x1][y].getNum()>0) { if (cardsMap[x][y].getNum()<=0) { MainActivity.getMainActivity().getAnimLayer().createMoveAnim(cardsMap[x1][y],cardsMap[x][y], x1, x, y, y); cardsMap[x][y].setNum(cardsMap[x1][y].getNum()); cardsMap[x1][y].setNum(0); x--; merge = true; }else if (cardsMap[x][y].equals(cardsMap[x1][y])) { MainActivity.getMainActivity().getAnimLayer().createMoveAnim(cardsMap[x1][y], cardsMap[x][y],x1, x, y, y); cardsMap[x][y].setNum(cardsMap[x][y].getNum()*2); cardsMap[x1][y].setNum(0); MainActivity.getMainActivity().addScore(cardsMap[x][y].getNum()); merge = true; } break; } } } } if (merge) { addRandomNum(); checkComplete(); } } private void swipeRight(){ boolean merge = false; for (int y = 0; y < Config.LINES; y++) { for (int x = Config.LINES-1; x >=0; x--) { for (int x1 = x-1; x1 >=0; x1--) { if (cardsMap[x1][y].getNum()>0) { if (cardsMap[x][y].getNum()<=0) { MainActivity.getMainActivity().getAnimLayer().createMoveAnim(cardsMap[x1][y], cardsMap[x][y],x1, x, y, y); cardsMap[x][y].setNum(cardsMap[x1][y].getNum()); cardsMap[x1][y].setNum(0); x++; merge = true; }else if (cardsMap[x][y].equals(cardsMap[x1][y])) { MainActivity.getMainActivity().getAnimLayer().createMoveAnim(cardsMap[x1][y], cardsMap[x][y],x1, x, y, y); cardsMap[x][y].setNum(cardsMap[x][y].getNum()*2); cardsMap[x1][y].setNum(0); MainActivity.getMainActivity().addScore(cardsMap[x][y].getNum()); merge = true; } break; } } } } if (merge) { addRandomNum(); checkComplete(); } } private void swipeUp(){ boolean merge = false; for (int x = 0; x < Config.LINES; x++) { for (int y = 0; y < Config.LINES; y++) { for (int y1 = y+1; y1 < Config.LINES; y1++) { if (cardsMap[x][y1].getNum()>0) { if (cardsMap[x][y].getNum()<=0) { MainActivity.getMainActivity().getAnimLayer().createMoveAnim(cardsMap[x][y1],cardsMap[x][y], x, x, y1, y); cardsMap[x][y].setNum(cardsMap[x][y1].getNum()); cardsMap[x][y1].setNum(0); y--; merge = true; }else if (cardsMap[x][y].equals(cardsMap[x][y1])) { MainActivity.getMainActivity().getAnimLayer().createMoveAnim(cardsMap[x][y1],cardsMap[x][y], x, x, y1, y); cardsMap[x][y].setNum(cardsMap[x][y].getNum()*2); cardsMap[x][y1].setNum(0); MainActivity.getMainActivity().addScore(cardsMap[x][y].getNum()); merge = true; } break; } } } } if (merge) { addRandomNum(); checkComplete(); } } private void swipeDown(){ boolean merge = false; for (int x = 0; x < Config.LINES; x++) { for (int y = Config.LINES-1; y >=0; y--) { for (int y1 = y-1; y1 >=0; y1--) { if (cardsMap[x][y1].getNum()>0) { if (cardsMap[x][y].getNum()<=0) { MainActivity.getMainActivity().getAnimLayer().createMoveAnim(cardsMap[x][y1],cardsMap[x][y], x, x, y1, y); cardsMap[x][y].setNum(cardsMap[x][y1].getNum()); cardsMap[x][y1].setNum(0); y++; merge = true; }else if (cardsMap[x][y].equals(cardsMap[x][y1])) { MainActivity.getMainActivity().getAnimLayer().createMoveAnim(cardsMap[x][y1],cardsMap[x][y], x, x, y1, y); cardsMap[x][y].setNum(cardsMap[x][y].getNum()*2); cardsMap[x][y1].setNum(0); MainActivity.getMainActivity().addScore(cardsMap[x][y].getNum()); merge = true; } break; } } } } if (merge) { addRandomNum(); checkComplete(); } } private void checkComplete(){ boolean complete = true; ALL: for (int y = 0; y < Config.LINES; y++) { for (int x = 0; x < Config.LINES; x++) { if (cardsMap[x][y].getNum()==0|| (x>0&&cardsMap[x][y].equals(cardsMap[x-1][y]))|| (x<Config.LINES-1&&cardsMap[x][y].equals(cardsMap[x+1][y]))|| (y>0&&cardsMap[x][y].equals(cardsMap[x][y-1]))|| (y<Config.LINES-1&&cardsMap[x][y].equals(cardsMap[x][y+1]))) { complete = false; break ALL; } } } if (complete) { new AlertDialog.Builder(getContext()).setTitle("提示").setMessage("游戲已經結束").setPositiveButton("確定重新開始嗎?", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { startGame(); } }).show(); } } private Card[][] cardsMap = new Card[Config.LINES][Config.LINES]; private List<Point> emptyPoints = new ArrayList<Point>();
這里,介紹三個方法了，一個是判斷手勢的方法，一個是移動磚塊的方法，一個是判斷怎么游戲結束的方法。
手機游戲的精髓，就是對手勢的判斷，我這里記錄手勢在x軸上的距離，與y軸的距離誰大誰小，然后，判斷了相應的x軸距離大於+5單位向右移，小於-5單位向左移。y軸的移動以此類推。
移動磚塊的方法，我們分成兩種來處理，一種了，沒有能合並但有能夠移動的，就移動到相應的位置。二種了，能夠合並的，合並到相應的位置再移動。
怎么判斷游戲是否結束了，我們就看是否所有磚塊填滿，還要看一個什么，互相數字是否相同，級能夠合並的了。
注意這個控件gridlayout控件了，這種控件是android4.0才引進的一個新的布局文件，倘若你要兼容更低的版本了，請導入android support——v7jar包。
mainactivity主要是顯示界面，就是一些游戲的界面展示，這里不做過多贅述了。
這種游戲運行的效果圖如下：
后記，這個2048游戲，技術對於任何一個技術人員，就是一個小菜一碟，對於一個熟練的程序員，半個小時就能搞定，然而他能夠風靡全球，巧就巧在他的玩法的奇特，秒就妙在構思，歸根結底，就是一個創新的能力。創新是何等重要，這個例子便是最直接證明，最終套用愛因斯坦的一句話結尾——想象力比知識重要，任何技術在創新面前弱爆了。
游戲的開源地址,http://pan.baidu.com/s/1kTt6ren