摘要：前言最近學習和，剛好搞個小游戲練練手。當向下運動時，我們先將利用算法將想象中的方陣順時針旋轉一次，然后可以用向左運動處理的方法合并移動方格，完畢后再順時針旋轉次，或者逆時針旋轉次還原即可。

最近學習Vue和webpack，剛好搞個小游戲練練手。
2048游戲規(guī)則：

每次可以選擇上下左右其中一個方向去滑動，每滑動一次，所有的數(shù)字方塊都會往滑動的方向靠攏外，系統(tǒng)也會在空白的地方亂數(shù)出現(xiàn)一個數(shù)字方塊，相同數(shù)字的方塊在靠攏、相撞時會相加。不斷的疊加最終拼湊出2048這個數(shù)字就算成功。

當然有些細微的合并規(guī)則，比如：
當向左滑動時，某列2 2 2 2 合并成 4 4 0 0 而非 8 0 0 0
也就是說，同列的某個數(shù)字最多只被合并一次。
在線挑戰(zhàn)一把？
（瞎折騰一陣后發(fā)現(xiàn)移動端無法正常顯示了，趕緊調試去）
http://www.ccc5.cc/2048/
移動端掃下面的二維碼即可（微信會轉碼，請點擊掃描后底部的‘訪問原網頁’）

4x4的方格，用一個16個成員的數(shù)組表示。當某個方格沒有數(shù)字的時候用""表示；

創(chuàng)建Vue的模板，綁定數(shù)據(jù)，處理數(shù)據(jù)與相關class的關系；

把數(shù)組當作一個4x4的矩陣，專注數(shù)據(jù)方面的處理，Dom方面的就交給vue更新

其中getclass與getposition為自定義指令：

getclass根據(jù)當前框數(shù)字設置不同的class

getposition根據(jù)當前框的索引位置，設置css樣式的top與left

初始化一個長度為16的數(shù)組，然后隨機選兩個地方填入2或者4。

這里有必要說明下，在segmentfault看到很多人洗牌算法習慣這么寫：

var arr = arr.sort(_=> {
    return Math.random() - 0.5
});

但是經過很多人的測試，這樣洗牌其實是不太亂的，具體參考
數(shù)組的完全隨機排列：https://www.h5jun.com/post/ar...
如何測試洗牌程序：http://coolshell.cn/articles/...

繼續(xù)回到主題，數(shù)據(jù)初始化完成之后，添加兩個自定義指令，功能前面已經講過了，實現(xiàn)也很簡單，
方格里面數(shù)字不同，對應的class不一樣，我這里定義的規(guī)則是
數(shù)字2對應.s2
數(shù)字4對應.s4
...

監(jiān)聽4個方向鍵和移動端的滑動事件，在ready環(huán)節(jié)處理

    ready: function () {
        document.addEventListener("keyup", this.keyDown);
        document.querySelector("#app ul").addEventListener("touchstart", this.touchStart);
        document.querySelector("#app ul").addEventListener("touchend", this.touchEnd);
        //document上獲取touchmove事件 如果是由.box觸發(fā)的 則禁止屏幕滾動
        document.addEventListener("touchmove", e=>{
            e.target.classList.contains("box") && e.preventDefault();
        });
    },
    methods:{
        touchStart(e){
            //在start中記錄開始觸摸的點
            this.start["x"] = e.changedTouches[0].pageX;
            this.start["y"] = e.changedTouches[0].pageY;
        },
        touchEnd(e){
            //handle...
        },
        /*
        *方向鍵 事件處理
        */
        keyDown(e){
            //handle...
        }
    }    

我們將nums這個數(shù)組想象成一個4x4的方陣。

        2 2 2 2
        x x x x
        x x x x
        x x x x

當向左合并的時候，以第一列來說，從左至右:

inxde=0位置的2在合并時是不需要動的，index=1位置的2和index=0位置的2數(shù)值相同，合并成4,放在index=0的位置,第一列變成4 "" 2 2

index=2位置的2，向左挪到index=1空出的位置，變成4 2 "" 2,同時，index=3位置的2一直向左運動，直到碰上index=1處的2，二者在這輪都沒有過合并，所以這里可以合并為4 4 "" ""

從這里我們可以看出，向左運動時，最左的位置，也就是index%4 === 0的位置，是無需挪動的，其他位置，若有數(shù)字，其左側有空位的話則向左挪動一位，其左側有個與其相同的數(shù)字時，且二者在此輪中沒有合并過，則二者合并，空出當前位：

2 2 2 2 => 4 4 "" ""

4 2 2 2 => 4 4 2 ""

"" 4 2 2=> 4 4 "" ""

2 2 4 2 => 4 4 2 ""

...

如果打算將向上，向右，向下都這么處理一遍并非不可以，但比較容易出錯。我們既然都將nums想象成了一個4x4的方陣，那么何不將該方陣旋轉一下呢。
當向下運動時，我們先將nums利用算法將想象中的方陣順時針旋轉一次，然后可以用向左運動處理的方法合并、移動方格，完畢后再順時針旋轉3次，或者逆時針旋轉1次還原即可。

旋轉算法：

有了這個函數(shù)，我們就只要寫向左運動的處理函數(shù)了

詳細的方向轉換及處理過程

當所有的16個方格都已經被填滿，且橫向與縱向都無法合并時，游戲結束

    isPass(){
            let isOver=true,hasPass=false,tmp = this.T(this.nums,1);
            this.nums.forEach((i,j)=>{
                if(this.nums[j-4] == i || this.nums[j+4] == i || tmp[j-4] == tmp[j] || tmp[j+4] == tmp[j]){
                    isOver = false;
                }
                if(i==2048){
                    hasPass = true;
                }
            });
            if(!this.blankIndex().length){
                isOver && alert("游戲結束！");
            };
        }

。。。。。。。。
如何才能PASS？你有本事可以玩到很恐怖的數(shù)字。具體能玩到多少需要用數(shù)學證明吧，已有知乎大神證明，估計在3884450左右。傳送門https://www.zhihu.com/questio...

奉上全部代碼app.vue

index.html

main.js

import Vue from "vue"
import App from "./app.vue"


new Vue({
  el: "body",
  components:{App}
});

webpack配置

const webpack = require("webpack");

module.exports = {
  entry: {
      app:["./app/main.js","webpack-hot-middleware/client","webpack/hot/dev-server"]
  },
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js",//打包后輸出文件的文件名
    publicPath:"http://localhost:8080/"
  },
  module: {
    loaders: [
      {test: /.css$/, loader: "style!css"},
      {test: /.vue$/, loader: "vue"},
      {test: /.js$/,exclude:/node_modules|vue/dist|vue-router/|vue-loader/|vue-hot-reload-api// ,loader: "babel"}
    ]
  },
  vue:{
    loaders:{
      js:"babel"
    }
  },
  babel: {
    presets: ["es2015","stage-0"],
    plugins: ["transform-runtime"]
  },
  plugins:[
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: "./public",//本地服務器所加載的頁面所在的目錄
    colors: true,//終端中輸出結果為彩色
    hot: true,
    inline: true//實時刷新
  },
  resolve: {
    extensions: ["", ".js", ".vue"]
  }    
}

css就不貼了，Github上托管了：https://github.com/Elity/2048...

很久沒寫這么長的文章了，累死。花了整整倆小時?。?！