Vue+Webpack 實(shí)戰(zhàn) 實(shí)現(xiàn)小游戲：2048

kyanag 發(fā)布于2019-08-20 10:14 / 1160人閱讀

摘要：前言最近學(xué)習(xí)和，剛好搞個(gè)小游戲練練手。當(dāng)向下運(yùn)動(dòng)時(shí)，我們先將利用算法將想象中的方陣順時(shí)針旋轉(zhuǎn)一次，然后可以用向左運(yùn)動(dòng)處理的方法合并移動(dòng)方格，完畢后再順時(shí)針旋轉(zhuǎn)次，或者逆時(shí)針旋轉(zhuǎn)次還原即可。

前言

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

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

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

思路

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

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

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

模板

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

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

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

關(guān)鍵實(shí)現(xiàn) 初始化數(shù)據(jù)

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

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

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

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

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

事件處理

監(jiān)聽4個(gè)方向鍵和移動(dòng)端的滑動(dòng)事件，在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ā)的 則禁止屏幕滾動(dòng)
        document.addEventListener("touchmove", e=>{
            e.target.classList.contains("box") && e.preventDefault();
        });
    },
    methods:{
        touchStart(e){
            //在start中記錄開始觸摸的點(diǎn)
            this.start["x"] = e.changedTouches[0].pageX;
            this.start["y"] = e.changedTouches[0].pageY;
        },
        touchEnd(e){
            //handle...
        },
        /*
        *方向鍵 事件處理
        */
        keyDown(e){
            //handle...
        }
    }

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

當(dāng)向左合并的時(shí)候，以第一列來(lái)說(shuō)，從左至右:

inxde=0位置的2在合并時(shí)是不需要?jiǎng)拥模琲ndex=1位置的2和index=0位置的2數(shù)值相同，合并成4,放在index=0的位置,第一列變成4 "" 2 2

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

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

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 ""

...

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

旋轉(zhuǎn)算法：

有了這個(gè)函數(shù)，我們就只要寫向左運(yùn)動(dòng)的處理函數(shù)了

詳細(xì)的方向轉(zhuǎn)換及處理過程

當(dāng)所有的16個(gè)方格都已經(jīng)被填滿，且橫向與縱向都無(wú)法合并時(shí)，游戲結(jié)束

    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("游戲結(jié)束！");
            };
        }

。。。。。。。。
如何才能PASS？你有本事可以玩到很恐怖的數(shù)字。具體能玩到多少需要用數(shù)學(xué)證明吧，已有知乎大神證明，估計(jì)在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",//本地服務(wù)器所加載的頁(yè)面所在的目錄
    colors: true,//終端中輸出結(jié)果為彩色
    hot: true,
    inline: true//實(shí)時(shí)刷新
  },
  resolve: {
    extensions: ["", ".js", ".vue"]
  }    
}

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

很久沒寫這么長(zhǎng)的文章了，累死。花了整整倆小時(shí)！！！