華容道的關鍵點

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() 獲取當前的系統的時間戳作差，計時是準確的。