摘要：還在上班很無(wú)聊數(shù)字華容道暢玩地址開發(fā)源碼地址這個(gè)叫前言年末了。光隨機(jī)生成一個(gè)亂序數(shù)列是不夠的，還得保證這個(gè)數(shù)列的逆序數(shù)為偶數(shù)，嗦嘎。所以，我們直接將交換的次數(shù)，記為數(shù)列逆序數(shù)個(gè)數(shù)，就達(dá)到了想要的效果。

還在上班？很無(wú)聊？數(shù)字華容道暢玩地址

開發(fā)源碼地址

年末了。哦，不，要過(guò)年了。以前只能一路站到公司的我，今早居然是坐著過(guò)來(lái)的。新的一年，總要學(xué)一個(gè)新東西來(lái)迎接新的未來(lái)吧，所以選擇了一直未碰的那個(gè)據(jù)說(shuō)是全宇宙最牛逼的前端框架-React，在上下班的地鐵上看了兩天官方教程，so what。光看不練假把式，于是就想著做個(gè)什么，偶然看到一個(gè)妹妹發(fā)了一條關(guān)于玩數(shù)字華容道，根本停不下來(lái)的朋友圈，這游戲我在今年的最強(qiáng)大腦看過(guò)，但是就看兩小天才在滑呀滑呀滑，感覺還不錯(cuò)，程序猿就該多玩益智類，少玩什么跳一跳。于是去商店下了個(gè)，玩著還行，就是廣告太多，而且只能玩五階以下的，看起不難，一個(gè)想法涌于腦上，何不拿這練練手做個(gè)Demo，畢竟我們屬于智慧家族的。閑話扯完，進(jìn)入正題。本文包含但不僅包括以下內(nèi)容:

Demo 開發(fā)環(huán)境

數(shù)字華容道里的秘密

講一講里面算法的實(shí)現(xiàn)

React的使用感受及易錯(cuò)點(diǎn)

React：16.2.0

react-router-dom：4.2.2

webpack：3.8.1

JS：ES6

CSS：Scss

React教程

項(xiàng)目目錄結(jié)構(gòu)（很適合React入門 如果感覺不錯(cuò)，請(qǐng)留下你的star）：如下圖所示
項(xiàng)目目錄結(jié)構(gòu)

數(shù)字華容道里在外國(guó)被稱為puzzle,譯為數(shù)字推盤，最經(jīng)典的就是puzzle15的高價(jià)懸賞13 15 14局面的解。怎么玩，一圖勝千言，簡(jiǎn)單來(lái)說(shuō)就是講左圖的亂選狀態(tài)，滑成右圖所示的順序狀態(tài)。個(gè)人感覺和小時(shí)候玩的推箱子有點(diǎn)類似。

clipboard.png

其實(shí)寫完Demo的隨機(jī)序列頁(yè)面生成和操作交互就用了一個(gè)周天和一個(gè)周一晚上，但到現(xiàn)在線上這個(gè)樣子，又多用了三四個(gè)晚上(白天上班，晚上學(xué)習(xí)，這就是前端的日常)，為什么？因?yàn)楫?dāng)時(shí)基礎(chǔ)版部署到線上，讓女朋友試一把，結(jié)果玩?zhèn)€三階的，都兩分鐘了還在折騰(我最快是18秒還原)，怎么這么笨，于是搶過(guò)來(lái)，搗騰，再搗騰，怎么回事，感覺無(wú)解啊，于是去百度了一下，在知乎里看到了這個(gè)問(wèn)題，還真的有無(wú)解的情況，問(wèn)題地址?？磮D，后面還要講(敲黑板)

clipboard.png

噢，原來(lái)是醬紫。光隨機(jī)生成一個(gè)亂序數(shù)列是不夠的，還得保證這個(gè)數(shù)列的逆序數(shù)為偶數(shù)，嗦嘎。于是在隨機(jī)序列的生成中又多加一個(gè)過(guò)程，判斷序列逆序數(shù)奇偶性，并調(diào)整。早上地鐵上自己又不斷玩玩測(cè)試，三階ok，四階ok，五階ok，然后又一遍，一遍。原以為這樣就大功告成了，但是出現(xiàn)了這樣的畫面。有圖。誰(shuí)剛說(shuō)的四階ok。。。。于是又測(cè)試了多次，發(fā)現(xiàn)三階，五階確實(shí)ok，但四階確實(shí)有Bug。Why，后面自己每開一局，截一張圖，無(wú)解的，標(biāo)記下來(lái)，下面就是幾張立功的圖片。
立了大功的幾張圖
下午年會(huì)，領(lǐng)導(dǎo)上面講，自己下面睡。睡得天昏地暗，時(shí)過(guò)境遷，居然還在叨叨叨，自己就拿起酒店提供的紙和筆找這些數(shù)字間的秘密。首先，這幾組數(shù)字都是偶逆序列，前一晚寫的調(diào)整奇逆序列為偶逆序列的代碼是沒有問(wèn)題的，那問(wèn)題出在哪了。抓腦摳鼻，抖腳搖頭，那一組圖片來(lái)回翻閱，靈光一閃，水哥附身，原來(lái)是這樣:空格項(xiàng)都出現(xiàn)在第三行，哦，不，應(yīng)該是奇數(shù)行。為什么呢？又去百度，又看到了上面知乎和豆瓣的正經(jīng)說(shuō)瞎話的大神（此生最討此類人，害死個(gè)仙人），看到這，我開始懷疑，這句話的正確性。奇數(shù)階，格子上下左右移動(dòng)確實(shí)不會(huì)改變數(shù)列的逆序奇偶性。但偶數(shù)階，格子的上下移動(dòng)是會(huì)改變序列的奇偶性的，簡(jiǎn)單總結(jié)一下：

奇數(shù)階(3x3,5x5)：上移或下移一個(gè)數(shù)字，其調(diào)換的位置是偶數(shù)，所以不改變數(shù)列逆序數(shù)的奇偶性，所以奇數(shù)階，生成的初始隨機(jī)數(shù)列的逆序數(shù)必須為偶數(shù)；

偶數(shù)階(4x4,6x6)：上移或下移一個(gè)數(shù)字，其調(diào)換的位置是奇數(shù)，所以會(huì)改變數(shù)列逆序數(shù)的奇偶性，上下交換一次改變一次奇偶性，交換兩次就回到初始狀態(tài)。所以可以大致這樣理解，偶數(shù)的平方仍然為偶數(shù)，其有數(shù)字的滑塊個(gè)數(shù)為奇數(shù)個(gè)，所以有一個(gè)數(shù)字必然會(huì)和空滑塊產(chǎn)生位置交換，如果空滑塊位于奇數(shù)行（空滑塊是不參于數(shù)字序列的逆序數(shù)計(jì)算的），就會(huì)產(chǎn)生2n-1次交換，其會(huì)改變數(shù)列逆序數(shù)的奇偶性；而位于偶數(shù)行，就會(huì)產(chǎn)生2n次交換，不會(huì)改變數(shù)列逆序數(shù)的奇偶性，所以用一個(gè)公式總結(jié)就是：（數(shù)列初始狀態(tài)是否為偶數(shù)） === （空行是否為偶數(shù)），簡(jiǎn)單來(lái)講就是求這兩個(gè)數(shù)的異或。最后的代碼流程的實(shí)現(xiàn)
clipboard.png

方法有很多，但我知道的兩種，這里分享一下，有知道其他的，請(qǐng)留言做個(gè)評(píng)論，讓大家一起進(jìn)步。
順序數(shù)組隨機(jī)性調(diào)換
思路基本就是，先生成一個(gè)順序的1~n的順序數(shù)組，然后再通過(guò)一個(gè)1~n的循環(huán)來(lái)打亂這個(gè)數(shù)組，其時(shí)間復(fù)雜度是O(n)。代碼如下。

    export const disorganize = (length) => {
        const arr = [];
        let temp;
        for (var i = 1; i < length; i++) {
            arr.push(i);
        }
        for (i = 0; i < length; i++) {
            let random = Math.round(Math.random() * (length - 2));
            temp = arr[random];
            arr[random] = arr[i];
            arr[i] = temp;
        }
        return arr;
    };

隨機(jī)數(shù)生成亂序數(shù)組
生成一個(gè)隨機(jī)數(shù)，并判斷其是否在目標(biāo)數(shù)組中已存在，當(dāng)數(shù)組個(gè)數(shù)為n時(shí)，目的達(dá)到。其時(shí)間復(fù)雜度我不知，代碼如下：

    export const randomArr = (length) => {
        const arr = [];
        let temp;
        while(arr.length<(length-1)){
            let random = 1+Math.round(Math.random() * (length - 2));
            if(random
雖然代碼看起比上面的簡(jiǎn)單，但其時(shí)間復(fù)雜度最由是O(f(n)，最差情況未知，所以，方法一更推薦，如果說(shuō)的有什么毛病，還請(qǐng)及時(shí)指出。
數(shù)列逆序性的奇偶性判斷
最先想到的就是冒泡排序，因?yàn)槊芭菖判蜻^(guò)程就是判斷兩個(gè)數(shù)是否逆序，是，就交換，不是，繼續(xù)下一組判斷。所以，我們直接將交換的次數(shù)，記為數(shù)列逆序數(shù)個(gè)數(shù)，就達(dá)到了想要的效果。當(dāng)然這個(gè)題用其他排序方法也能達(dá)到目的，理解了其排序的原理，就很容易計(jì)算數(shù)列的逆序性，我這里是直接用的以前冒泡排序的算法。
const bubbleOrder=(arr)=>{
    let i ,j ,count=0;
    const swap=(tar,lastIndex,newIndex)=>{
        let temp = tar[lastIndex];
        tar[lastIndex] =tar[newIndex];
        tar[newIndex] = temp;
        count++;
    }
    for(i=0;ii;j--){
            (arr[j]
JS寫一個(gè)秒表
秒表是啥，start-pause-stop-reset，中間的步驟不是必須的，但前后兩步必須。當(dāng)然方法有很多，但都離不開setTimeout或則setInterval兩個(gè)方法，requestAnimation應(yīng)該也可以。這里提供一個(gè)自己寫的，當(dāng)然思路來(lái)源于網(wǎng)上，只是用自己的思路表達(dá)出來(lái)?；趕etInterval和Date對(duì)象。源碼如下:
const timer=(offsetTime)=>{  //offsetTime為0時(shí)，表示從0開始計(jì),不為0，表示是暫停后繼續(xù)計(jì)時(shí)
    const formatter=(t)=>{
        const res =t>9 ? t : "0"+t
        return res;
    }
    let startTime = new Date().getTime(),tPass=0,tOffset=offsetTime||0;
    this.interId = setInterval(()=> {   //this.interId 是組件下面建的一個(gè)保持定時(shí)器值的,用于暫停和停止
        let tNew = new Date().getTime(),ms,sec,min,timeStr;
        tPass = tOffset +tNew - startTime;
        ms = Math.floor(tPass/10 % 100);
        sec = Math.floor((tPass / 1000) % 60);
        min = Math.floor((tPass / 1000 / 60) % 60);
        timeStr = formatter(min)+":"+formatter(sec)+":"+formatter(ms);
        this.tick(timeStr,tPass);
    },100)
}

tick(timeStr,tPass){  //這是游戲頁(yè)面一個(gè)react組件中的一個(gè)用于更新顯示dom的觸發(fā)器
    this.setState({
        timePass:tPass,
        time:timeStr
    })
}
React的使用感受及易錯(cuò)點(diǎn)(大神留步)
用Vue與用React的區(qū)別，抱頭痛哭，Vue半年沒上項(xiàng)目了，忘得差不多了，個(gè)人觀點(diǎn)（非喜勿噴）。

直接感受就是，Vue確實(shí)比React容易上手,其模板，js，css的組件式的開發(fā)方式，更接近我們以前工作中常用的template ＋ requireJs的開發(fā)模式。
React更強(qiáng)調(diào)js的編程和項(xiàng)目的整體架構(gòu)，state放在哪一級(jí)，哪一級(jí)通過(guò)props來(lái)控制,當(dāng)然route 4.0的組件化設(shè)計(jì)更強(qiáng)調(diào)這一點(diǎn)；
React在國(guó)內(nèi)還是不像Vue那么大眾，比方說(shuō)，出了問(wèn)題，很多只有在stackOverflow有相關(guān)答案；
不過(guò)，不論是Vue還是React，熟悉ES6和面向?qū)ο蟮木幊?，兩者上手都是很快?裝個(gè)逼,別打我)。

在整個(gè)學(xué)習(xí)過(guò)程中，將很多教程中敲黑板指出來(lái)的坑，又結(jié)結(jié)實(shí)實(shí)踩了一遍，現(xiàn)在可以說(shuō)影響深刻。自己整理了一下，做個(gè)小分享，愿和我一樣剛?cè)腴T的，遇見下面的錯(cuò)誤，不會(huì)那么迷茫
不要在
Cannot read property "setState" of undefined"
解釋：這個(gè)問(wèn)題，主要是組件對(duì)象的構(gòu)造constructor中，未在constructor綁定事件處理函數(shù)的this指向。這個(gè)在教程中是有明確說(shuō)明的，解決辦法就是constructor()中添加：this.resetClick = this.resetClick.bind(this);
clipboard.png
Cannot read property "size" of undefined"
解釋：這個(gè)問(wèn)題，主要是組件對(duì)象的構(gòu)造constructor中，未傳入props對(duì)象，導(dǎo)致整個(gè)組件對(duì)象無(wú)props屬性;其實(shí)除了理解繼承，理解React組件的生命周期也很重要。
clipboard.png
you are adding a new property in the Synthetic event Object
解釋：可以簡(jiǎn)單理解為SyntheticEvent是react為瀏覽器兼容寫的一個(gè)dom事件代理，除了她原有的那些屬性，你不能私自為其添加屬性。
clipboard.png
clipboard.png
iphone，元素滑動(dòng)，頁(yè)面會(huì)跟隨滑動(dòng)
這個(gè)真的是一個(gè)讓人頭疼的東西，太影響交互體驗(yàn)了。如果做過(guò)h5都知道加滑動(dòng)阻止.而react有他自己的一套事件機(jī)制封裝，所以在跟元素直接添加touchmove的preventDefault是不行的。得用最原始的事件寫法寫一個(gè)阻止滑動(dòng)的觸摸事件，如下所示。
  componentDidMount() {
    document.addEventListener("touchmove", (e) => {
      e.preventDefault();
    }, { passive: false });
  }```
### 其他，后面持續(xù)補(bǔ)充 ###
## 一個(gè)疑問(wèn) ##
一開始我的游戲盒子是用的flex布局，但一考慮，盒子里面的方塊要滑動(dòng)效果，我要做滑動(dòng)的緩動(dòng)效果，于是又改用了絕對(duì)定位布局，每個(gè)
方塊計(jì)算其定位點(diǎn)。但事實(shí)證明，我當(dāng)時(shí)確實(shí)太菜，我用了state來(lái)管理每個(gè)方塊在盒子的位置，但我調(diào)整state時(shí)，React的virtualDom
會(huì)自動(dòng)計(jì)算，并更新dom節(jié)點(diǎn)，那我保持整個(gè)項(xiàng)目，怎么才能自己做出緩動(dòng)效果呢？純CSS不行，請(qǐng)各位大神給點(diǎn)建議。

## 結(jié)束語(yǔ) ##
在放假的前幾個(gè)小時(shí)，把拖了幾天的文章寫完，有點(diǎn)趕，有不足的地方還請(qǐng)及時(shí)指出。關(guān)于這個(gè)項(xiàng)目，后期自己想繼續(xù)優(yōu)化，做一些功能拓展，比如接入數(shù)據(jù)記錄,NxM階這樣的玩法，有思路的，還請(qǐng)能分享給我，郵箱：closertb@163.com。在最后，送給2017未曾放棄努力的自己一些鼓勵(lì)，愿2018年能用更好的發(fā)展。也祝各位戰(zhàn)友2018新年快樂，年后再見?。。。。? 

  [1]: http://closertb.site/Klotski/#/
  [2]: https://github.com/closertb/firstRect
  [3]: https://doc.react-china.org/docs/hello-world.html
  [4]: https://www.zhihu.com/question/266065256/
  [5]: https://user-gold-cdn.xitu.io/2018/2/13/1618cb629aace0d9?w=796&h=360&f=png&s=53732
  [6]: https://user-gold-cdn.xitu.io/2018/2/13/1618cb629ab569ec?w=711&h=628&f=png&s=71949
  [7]: https://user-gold-cdn.xitu.io/2018/2/13/1618cb62a7e093f4?w=800&h=286&f=png&s=75406
  [8]: https://user-gold-cdn.xitu.io/2018/2/13/1618cb629ac112bc?w=737&h=274&f=png&s=16593
  [9]: https://user-gold-cdn.xitu.io/2018/2/13/1618d487f446f29f?w=792&h=64&f=png&s=34023
  [10]: https://user-gold-cdn.xitu.io/2018/2/13/1618cb629d17bc25?w=800&h=166&f=png&s=71885
  [11]: https://user-gold-cdn.xitu.io/2018/2/13/1618d487f004387d?w=800&h=234&f=png&s=114244
  [12]: https://user-gold-cdn.xitu.io/2018/2/13/1618deda973d9c73?w=800&h=121&f=png&s=85783
  [17]: https://m.douban.com/mip/group/topic/21451258/?qq-pf-to=pcqq.c2c
  [18]: https://user-gold-cdn.xitu.io/2018/2/13/1618dfabca309cb6?w=800&h=404&f=png&s=39405
  [19]: https://juejin.im/entry/587de1b32f301e0057a28897