小六教你用ReactNative做一个拼图游戏(四) 优化和细节处理

之前我们已经完成了一些基本的内容

打乱算法

之前的打乱算法其实是有些问题的~ 所以我们需要重写这部分

只有图片交换的次数为偶数次时，才是可以还原的拼图。

我们进行打乱算法的重写

 

 

 _upset(arr) {


        let result = arr;
        let indexList = [];
        for (let i = 0; i < arr.length; i++) {
            indexList.push(i);
        }
        //打乱顺序


        //这样打乱的方式不对   详情见https://baike.baidu.com/item/%E4%B8%8D%E5%8F%AF%E8%BF%98%E5%8E%9F%E7%9A%84%E6%8B%BC%E5%9B%BE
        // indexList = indexList.sort(function () {
        //     return (0.5 - Math.random());
        // });
        let shuffle = () => {
            //数字我们只能交换偶数次
            let count = parseInt(10 + Math.random() * 10) * 2;//20+40次交换
            for (let i = 0; i < 2; i++) {
                let hold = null;
                var change1 = parseInt(Math.random() * (arr.length - 1));
                var change2 = parseInt(Math.random() * (arr.length - 1));
                hold = indexList[change1];
                indexList[change1] = indexList[change2];
                indexList[change2] = hold;
            }
        };
        shuffle();
        for (let i = 0; i < arr.length; i++) {
            result[i].currentIndex = indexList[i];
            if (i == arr.length - 1) {
                result[i].isNull = true;

            }
        }

        return result;
    }

动画

因为我们是使用State保存样式，所以我们可以使用非常简单的方式去完成我们的动画

一行代码搞定

  LayoutAnimation.easeInEaseOut();

　　至此我们拼图游戏也就快完成了~ 

出口

最后我们给游戏加上一个出口

 _check() {
        let result = !this.state.imgList.some((item) => {
            return item.index !== item.currentIndex
        });
        console.log(this.state.imgList);
        console.log("check_" + result);
        if (result) {
            Alert.alert(
                '恭喜您',
                '完成了一个拼图！',
                [
                    {text: '重新来一局', onPress: () => this._start()},
                    {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}
                ],
                {cancelable: false}
            )

        }
    }