华容道的关键点

3x3 9宫格如图所示，用vue 实现

随机数的获取

• 采用js的Math.random()

var arr = [];
 for(var i=0;i<8;i++){
    arr.push(Math.ceil(Math.random() * 8));
 }
 arr.push(0);
复制代码

这个方式产生的随机数会出现以下的两种方式的组合，显然第二种方式是要过滤掉的。

1   2   3      1   2   3
4   5   6      4   5   6
7   8          8   7
复制代码

• 采用二维数组产生只会出现如上图第一种方式的随机数。

function getRandomNum(){
                    //利用二维数组获取随机数 - 待优化
                    var array = [[0,0,0],[0,0,0],[0,0,0]];
                    var a = 3;
                    var numi=1;
                    var index = 0;
                    for(var j=0;j<array.length;j++){
                        for(var k=0;k<array.length;k++){
                            array[j][k]= numi;
                            numi++;
                        }
                    }
                    array[a-1][a-1]=0;
                    for(var n=0;n<99999;n++) {
                        /*生成1-4的随机数*/
                        let resault = Math.ceil(Math.random() * 8)
                        /*更改数组数字位置*/
                        switch (resault) {
                            /*空（0）数字和左边数字交换*/
                            case 1:
                                left();
                                break;
                            /*空（0）数字和右边数字交换*/
                            case 2:
                                right();
                                break;
                            /*空（0）数字和上边数字交换*/
                            case 3:
                                top();
                                break;
                            /*空（0）数字和下边数字交换*/
                            case 4:
                                bottom();
                                break;
                            /*空（0）数字和左下边数字交换*/
                            case 5:
                                bottom();
                                left();
                                break;
                            /*空（0）数字和左上边数字交换*/
                            case 6:
                                left();
                                top();
                                break;
                            /*空（0）数字和右下边数字交换*/
                            case 7:
                                bottom();
                                right();
                                break;
                            /*空（0）数字和右上边数字交换*/
                            case 8:
                                top();
                                right();;
                                break;
                            default:
                                break;
                        }
                        if(index>10000 &&array[a-1][a-1]==0) {
                            console.log(array);
                            break
                        }
                    }
                    var shuju = [];
                    for(var j=0;j<array.length;j++){
                        for(var k=0;k<array.length;k++){
                            shuju.push(array[j][k]);
                        }
                    }
                    return shuju;
                    function left() {
                        for(var i=0;i<array.length;i++){
                            for(var j=0;j<array.length;j++){
                                while(array[i][j]==0&&(j-1)>=0){
                                    array[i][j]=array[i][j-1];
                                    array[i][j-1]=0;
                                    index++;
                                    break;
                                }
                            }
                        }
                    }
                    function right() {
                        for(var i=0;i<array.length;i++){
                            for(var j=0;j<array.length;j++){
                                while(array[i][j]==0&&(j+1)<a){
                                    array[i][j]=array[i][j+1];
                                    array[i][j+1]=0;
                                    index++;
                                    break;
                                }
                            }
                        }
                    }
                    function top() {
                        for(var i=0;i<array.length;i++){
                            for(var j=0;j<array.length;j++){
                                while(array[i][j]==0&&(i-1)>=0){
                                    array[i][j]=array[i-1][j];
                                    array[i-1][j]=0;
                                    index++;
                                    break;
                                }
                            }
                        }
                    }
                    function bottom() {
                        for(var i=0;i<array.length;i++){
                            for(var j=0;j<array.length;j++){
                                while(array[i][j]==0&&(i+1)<a){
                                    array[i][j]=array[i+1][j];
                                    array[i+1][j]=0;
                                    index++;
                                    break;
                                }
                            }
                        }
                    }
                }
复制代码

棋子的移动

moveTo(i) {
                let currentNum = this.numLists[i],
                    leftNum = this.numLists[i - 1],
                    rigthNum = this.numLists[i + 1],
                    topNum = this.numLists[i - 3],
                    buttonNum = this.numLists[i + 3];
                let that = this;
                if (this.win) return;
                if(!this.ifStart ){
                    if((rigthNum === "" || leftNum === "" || topNum === "" || buttonNum === "")){
                        
                        this.starAction();
                    }else{
                        return
                    };
                }
                if (rigthNum === "") {
                    if( i==2 || i==5){
                        return
                    }
                    Vue.set(this.numLists, i + 1, currentNum);
                    Vue.set(this.numLists, i, "");
                    this.stepNumber++;
                } else if (leftNum === "") {
                    if( i==3 || i==6){
                        return
                    }
                    Vue.set(this.numLists, i - 1, currentNum);
                    Vue.set(this.numLists, i, "");
                    this.stepNumber++;
                } else if (topNum === "") {
                    Vue.set(this.numLists, i - 3, currentNum);
                    Vue.set(this.numLists, i, "");
                    this.stepNumber++;
                } else if (buttonNum === "") {
                    Vue.set(this.numLists, i + 3, currentNum);
                    Vue.set(this.numLists, i, "");
                    this.stepNumber++;
                }
                if (this.endGame()) {
                    clearInterval(this.setInter);
                    
                    this.win = true;
                    this.win_tip = true;
                }
            },
复制代码

判断游戏结束

let i = 0,
                    l = this.numLists.length;
                if (this.testModel) {
                    if (this.numLists[0] === 1) {
                        return true
                    } else {
                        return false
                    }
                }
                for (i; i < l - 2; i++) {
                    if (this.numLists[l - 1] === "") {
                        if (this.numLists[i] < this.numLists[i + 1]) {

                        } else {
                            return false;
                        }
                    } else {
                        return false;
                    }
                }
                return true;
复制代码

计时器

let start = Date.now();
                this.tim = "00:00:00";
                clearInterval(this.setInter);
                this.setInter = setInterval(function () {
                    var seconds = parseInt((Date.now() - start) / 1000);//总秒数
                    var hours = Math.floor(seconds / 3600);
                    var min = Math.floor(seconds / 60) % 60;
                    var sec = seconds % 60;
                    that.tim = (hours > 9 ? hours : '0' + hours) + ':' + (min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec);
                }, 200);

复制代码

• 没有严格的要求使用了setInterval 其实使用setTimeout模拟setTimeout会更好一些
• 采用Date.now() 获取当前的系统的时间戳作差，计时是准确的。