【Javascript系列】 - Threes For 1536

遊戲網址https://weihanchen.github.io/puzzle-game-threes1536/

一、最近興起一波熱潮的Android遊戲(2048)是一款以數字累積為設計概念的遊戲，在16方格產生出2與4兩個數字而玩家可以上下左右移動遇到相同的數字則相加，直到2048這個數字出現，但事實上這款遊戲類似於Threes，而相較於2048，個人覺得Threes玩起來更具挑戰性，故根據介紹影片了解其規則，並將之設計為網頁板以娛樂及研究所用。

二、基本說明

1.玩家遊戲時只要設法將數字推到角落相加至1536即可破關。

2.不過，不是所有的數字都能相加，只有1+2，及3個倍數相同數字相加(3+3、6+6...)。

3.沒有時間限制，可以長時間思考後進行下一步，猶如下棋。

4.當無空間可推牌時則遊戲結束。
5.自動加總分數並記錄。
6.以Canvas進行繪製。

三、演算法說明

1.定義出4*4的二維陣列array[4][4]，一開始以亂數不重覆演算法取出1、2、3號並分配位置。

2.註冊上、下、左、右事件，並分別處理每次的移動。

   (1)上：由array[0][0]依序往下到array[0][2]判斷是否有可以合併或移動的格子，為什麼只到array[0][2]而不是array[0][3]呢?因為我們可以用變數first、second來進行如下圖，若first、second符合合併的條件就將first更新為first+second、second="",依序向下移動整欄結束後向下一列。

    (2)下：由下往上由左而右依序判斷。

    (3)左：由左而右在由上而下。

      (4)右：由右而左由上而下。

3.在上下左右的事件裡一併同時處理可新增的數字，基本上每移動一次則會有新的數字出現，那麼該出現哪個數字呢?還有如果向上的移動中如果一次個欄都有進行移動的時候該怎麼辦?

      (1)至於該出現哪個數字就必須去統計1、2、3在矩陣中最少的次數，若出現次數為最少則加入該數字，因此每次的加總就要去重新統計次數。

      (2)如下圖，當按下"上"的按鍵時可能發生四個欄中都有數字向上移動，如此一來我們就必須由亂數去選擇出該出現在哪個位置。

4.每按一次按鍵就去判斷數字是否達到過關條件(1536)及是否已無空間可推牌，若是則結束遊戲。

四、演算法之javascript檔