寫在前面

        工作之餘參與了《慕課網2048遊戲製作》的學習視訊,視訊斷斷續續看完了,遊戲也製作成功了。因為其他的事情也沒來的及總結,一拖時間也就過去了,整理磁碟的時候發現了2048原始碼,思考一下還是將之push到github上了(後面貼出),也順便寫篇總結,回顧一下,同時也謝謝liuyubobobo老師的授課。

     不過原始碼在手,不執行下玩玩,怎麼說的過去呢,哈哈!下面是遊戲截圖。

         大圖是PC端執行的效果,小圖則是在iphone5s上的執行效果(Chrome瀏覽器debug,具體如何做參考文章:http://1.liangtao.sinaapp.com/?p=628

         怎麼樣,效果不錯吧,接下來我會一一回顧2048遊戲的製作。

遊戲架構

          首先在開始製作遊戲之前,我們需要知道遊戲的邏輯是什麼。以便於我們選取什麼技術,考慮遊戲架構的問題。本2048遊戲採用面向過程的設計(讀者有興趣可以改為面向物件的)。2048遊戲是基於使用者響應的遊戲,而且比較的簡單,使用到的技術有:

• UI - HTML/CSS:定製遊戲UI介面.
• JavaScript/jQuery:遊戲主邏輯.
  

         遊戲架構如下圖:

          典型的MVC模式,2048遊戲比較的簡單,這裡也沒有采用面向物件的設計,主資料直接可以放入遊戲主邏輯就行了,而且需要的資料也不是非常的複雜:

/**
 * @Description:main,js
 * @Author:LCore
 */

//4*4格子
var board = new Array();
var score = 0;     //得分記錄
var hasConflicted = new Array();   //記錄棋盤格每個格子是否衝突
var startX,
    startY,
    endX,
    endY;                  //觸控支援

//移動方向定義
var direction = {
    left: 1,
    up: 2,
    down: 3,
    right: 4
};

       這裡涉及到前端css+html,就不貼程式碼了。

遊戲邏輯

         遊戲邏輯這塊是整個遊戲製作的核心部分,處理好整個遊戲的邏輯之後基本上游戲整個的雛形就也行出來了(除開一些互動效果和BUG)。包括遊戲的規則、初始化的邏輯、移動的邏輯(是否能夠移動，如何移動,移動多少)、遊戲結束的邏輯、棋盤更新的邏輯。

       之後由於要實現上述的遊戲邏輯,會形成一些支撐函式support.js。

遊戲互動

優化

       這部分主要處理一些遺留的bug以及進行一些效能上的優化，包括隨機數的生成。使用viewport新增移動端支援,處理移動端的移動效果等。

架設2048

       這部分主要就是將如何將本地的2048放到網路上,架設的方法很多(說白了也就是放在公網伺服器上)。這裡我是放在新浪SAE上的,訪問地址如下:

最後

       本來是想有時間進一步將之做成可記錄分數,積分排行的,無奈擱置了。有興趣的朋友可以自己頭腦風暴進行一些更加有意思的創意(數字換成圖片,絢麗的滑動,加分效果等)。