用React写一个数字华容道，你须要晓得的隐秘

2024年1月15日 149次阅读来源: Denzel

还在上班？很无聊？数字华容道畅玩地点

开辟源码地点

这个叫媒介

年末了。哦，不，要过年了。之前只能一同站到公司的我，今早竟然是坐着过来的。新的一年，总要学一个新东西来驱逐新的未来吧，所以挑选了一向未碰的谁人据说是全宇宙最牛逼的前端框架-React，在上放工的地铁上看了两天官方教程，so what。光看不练假把式，因而就想着做个什么，有时看到一个mm发了一条关于玩数字华容道，基础停不下来的朋友圈，这游戏我在本年的最强大脑看过，然则就看两小天赋在滑呀滑呀滑，觉得还不错，递次猿就该多玩益智类，少玩什么跳一跳。因而去市肆下了个，玩着还行，就是广告太多，而且只能玩五阶以下的，看起不难，一个主意涌于脑上，何不拿这练练手做个Demo，毕竟我们属于伶俐家属的。闲话扯完，进入正题。本文包含但不仅包含以下内容:

Demo 开辟环境
数字华容道里的隐秘
讲一讲内里算法的完成
React的运用感觉及易错点

Demo 开辟环境

React：16.2.0

react-router-dom：4.2.2

webpack：3.8.1

JS：ES6

CSS：Scss

React教程

项目目次组织（很合适React入门假如觉得不错，请留下你的star）：以下图所示
项目目次组织

数字华容道里的隐秘

弄法申明

数字华容道里在外国被称为puzzle,译为数字推盘，最典范的就是puzzle15的高价赏格13 15 14局面的解。怎样玩，一图胜千言，简朴来说就是讲左图的乱选状况，滑成右图所示的递次状况。个人觉得和小时候玩的推箱子有点相似。

clipboard.png

你不晓得的隐秘

实在写完Demo的随机序列页面天生和操纵交互就用了一个周天和一个周一晚上，但到如今线上这个模样，又多用了三四个晚上(白昼上班，晚上进修，这就是前端的一样平常)，为何？由于当时基础版布置到线上，让女朋友试一把，结果玩个三阶的，都两分钟了还在折腾(我最快是18秒复原)，怎样这么笨，因而抢过来，捣腾，再捣腾，怎样回事，觉得无解啊，因而去百度了一下，在知乎里看到了这个题目，还真的有无解的状况，题目地点。看图，背面还要讲(敲黑板)

clipboard.png

噢，原来是酱紫。光随机天生一个乱序数列是不够的，还得保证这个数列的逆序数为偶数，嗦嘎。因而在随机序列的天生中又多加一个历程，推断序列逆序数奇偶性，并调解。早上地铁上本身又不停玩玩测试，三阶ok，四阶ok，五阶ok，然后又一遍，一遍。原以为如许就功德圆满了，然则涌现了如许的画面。有图。谁刚说的四阶ok。。。。因而又测试了屡次，发明三阶，五阶确切ok，但四阶确切有Bug。Why，背面本身每开一局，截一张图，无解的，标记下来，下面就是几张建功的图片。
立了大功的几张图
下昼年会，指导上面讲，本身下面睡。睡得昏天黑地，时过境迁，竟然还在叨叨叨，本身就拿起旅店供应的纸和笔找这些数字间的隐秘。起首，这几组数字都是偶逆序列，前一晚写的调解奇逆序列为偶逆序列的代码是没有题目标，那题目出在哪了。抓脑抠鼻，抖脚摇头，那一组图片往返翻阅，灵光一闪，水哥附身，原来是如许:空格项都涌如今第三行，哦，不，应当是奇数行。为何呢？又去百度，又看到了上面知乎和豆瓣的正派说瞎话的大神（今生最讨此类人，害死个神仙），看到这，我最早疑心，这句话的正确性。奇数阶，格子高低左右挪动确切不会转变数列的逆序奇偶性。但偶数阶，格子的高低挪动是会转变序列的奇偶性的，简朴总结一下：

奇数阶(3×3,5×5)：上移或下移一个数字，其换取的位置是偶数，所以不转变数列逆序数的奇偶性，所以奇数阶，天生的初始随机数列的逆序数必需为偶数；

偶数阶(4×4,6×6)：上移或下移一个数字，其换取的位置是奇数，所以会转变数列逆序数的奇偶性，高低交流一次转变一次奇偶性，交流两次就回到初始状况。所以能够大抵如许明白，偶数的平方依然为偶数，其有数字的滑块个数为奇数个，所以有一个数字必然会和空滑块发生位置交流，假如空滑块位于奇数行（空滑块是不参于数字序列的逆序数盘算的），就会发生2n-1次交流，其会转变数列逆序数的奇偶性；而位于偶数行，就会发生2n次交流，不会转变数列逆序数的奇偶性，所以用一个公式总结就是：（数列初始状况是不是为偶数） === （空行是不是为偶数），简朴来说就是求这两个数的异或。末了的代码流程的完成
clipboard.png

讲一讲内里算法的完成

天生一个乱序不反复的1~n数组数列

要领有许多，但我晓得的两种，这里分享一下，有晓得其他的，请留言做个批评，让人人一同提高。
递次数组随机性换取
思绪基础就是，先天生一个递次的1~n的递次数组，然后再经由过程一个1~n的轮回来打乱这个数组，其时候复杂度是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;
    };

随机数天生乱序数组
天生一个随机数，并推断其是不是在目标数组中已存在，当数组个数为n时，目标到达。其时候复杂度我不知，代码以下：

    export const randomArr = (length) => {
        const arr = [];
        let temp;
        while(arr.length<(length-1)){
            let random = 1+Math.round(Math.random() * (length - 2));
            if(random<length && arr.indexOf(random)===-1){
                arr.push(random);
            }
        }
        return arr;
    };

虽然代码看起比上面的简朴，但其时候复杂度最由是O(f(n)，最差状况未知，所以，要领一更引荐，假如说的有什么缺点，还请实时指出。

数列逆序性的奇偶性推断

最早想到的就是冒泡排序，由于冒泡排序历程就是推断两个数是不是逆序，是，就交流，不是，继续下一组推断。所以，我们直接将交流的次数，记为数列逆序数个数，就到达了想要的结果。固然这个题用其他排序要领也能到达目标，明白了其排序的道理，就很轻易盘算数列的逆序性，我这里是直接用的之前冒泡排序的算法。

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;i<arr.length;i++){
        for(j=arr.length-1;j>i;j--){
            (arr[j]<arr[j-1])&&swap(arr,j-1,j);
        }
    }
    return count;
}

JS写一个秒表

秒表是啥，start-pause-stop-reset，中心的步骤不是必需的，但前后两步必需。固然要领有许多，但都离不开setTimeout或则setInterval两个要领，requestAnimation应当也能够。这里供应一个本身写的，固然思绪来源于网上，只是用本身的思绪表达出来。基于setInterval和Date对象。源码以下:

const timer=(offsetTime)=>{  //offsetTime为0时，示意从0最早计,不为0，示意是停息后继续计时
    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 是组件下面建的一个坚持定时器值的,用于停息和住手
        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){  //这是游戏页面一个react组件中的一个用于更新显现dom的触发器
    this.setState({
        timePass:tPass,
        time:timeStr
    })
}

React的运用感觉及易错点(大神停步)

用Vue与用React的区分，抱头痛哭，Vue半年没上项目了，忘得差不多了，个人观点（非喜勿喷）。

直接感觉就是，Vue确切比React轻易上手,其模板，js，css的组件式的开辟方式，更靠近我们之前工作中经常使用的template ＋ requireJs的开辟形式。
React更强调js的编程和项目标团体架构，state放在哪一级，哪一级经由过程props来掌握,固然route 4.0的组件化设想更强调这一点；
React在国内照样不像Vue那末群众，比方说，出了题目，许多只要在stackOverflow有相干答案；
不过，不论是Vue照样React，熟习ES6和面向对象的编程，二者上手都是很快的(装个逼,别打我)。

在全部进修历程当中，将许多教程中敲黑板指出来的坑，又严严实实踩了一遍，如今能够说影响深入。本身整理了一下，做个小分享，愿和我一样刚入门的，碰见下面的毛病，不会那末渺茫
不要在

Cannot read property ‘setState’ of undefined’

诠释：这个题目，主如果组件对象的组织constructor中，未在constructor绑定事宜处置惩罚函数的this指向。这个在教程中是有明白申明的，解决办法就是constructor()中增加：this.resetClick = this.resetClick.bind(this);
clipboard.png

Cannot read property ‘size’ of undefined’

诠释：这个题目，主如果组件对象的组织constructor中，未传入props对象，致使全部组件对象无props属性;实在除了明白继续，明白React组件的生命周期也很主要。

clipboard.png

you are adding a new property in the Synthetic event Object

诠释：能够简朴明白为SyntheticEvent是react为浏览器兼容写的一个dom事宜代办，除了她原有的那些属性，你不能私自为其增加属性。
clipboard.png
clipboard.png

iphone，元素滑动，页面会追随滑动

这个真的是一个让人头疼的东西，太影响交互体验了。假如做过h5都晓得加滑动阻挠.而react有他本身的一套事宜机制封装，所以在跟元素直接增加touchmove的preventDefault是不可的。得用最原始的事宜写法写一个阻挠滑动的触摸事宜，以下所示。

  componentDidMount() {
    document.addEventListener('touchmove', (e) => {
      e.preventDefault();
    }, { passive: false });
  }```
### 其他，背面延续补充 ###
## 一个疑问 ##
一最早我的游戏盒子是用的flex规划，但一斟酌，盒子内里的方块要滑动结果，我要做滑动的缓动结果，因而又改用了相对定位规划，每一个
方块盘算其定位点。但事实证明，我当时确切太菜，我用了state来治理每一个方块在盒子的位置，但我调解state时，React的virtualDom
会自动盘算，并更新dom节点，那我坚持全部项目，怎样才本身做出缓动结果呢？纯CSS不可，请列位大神给点发起。

## 结束语 ##
在放假的前几个小时，把拖了几天的文章写完，有点赶，有不足的处所还请实时指出。关于这个项目，后期本身想继续优化，做一些功用拓展，比方接入数据纪录,NxM阶如许的弄法，有思绪的，还请能分享给我，邮箱：closertb@163.com。在末了，送给2017不曾摒弃勤奋的本身一些勉励，愿2018年能用更好的生长。也祝列位战友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

    原文作者：Denzel
    原文地址: https://segmentfault.com/a/1190000013284274
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。