數獨遊戲前端學習筆記及後續解數獨方法

學習於默課網學習視頻的整理筆記
視頻老師分享代碼庫

基於我本地已經安裝了nmp/node所以只添加了yarn
安裝yarn: npm install -g yarn
安裝成功後，查看版本號yarn --version

項目裏



到這一步我遇到了問題

本地安裝babel-loader和bable-preset-es2015報錯
後經度娘是版本問題我把package.json文件裏"gulp": "^4.0.0",改成了"gulp": "^3.9.1",運行npm install
到這一步又遇到了問題
寫成這樣報錯

後改爲

要點:
1:module裏loader改爲rules
2:exclude裏"node_modules"改爲[ path.resolve(__dirname, "node_modules")],
3:添加註冊const path = require("path");

中間還有babel-loader和babel-core版本問題
babel-loader 8.x對應babel-core 7.x
babel-loader 7.x對應babel-core 6.x

index.js文件

//span樣式
    layout(){
        const width = $("span:first",this._$container).width();
        $("span",this._$container)
            .height(width)
            .css({
                "line-height": `${width}px`,// `${width}px` 這裏不是用的單引號，而是反引號（1 左邊那個）
                "font-size": width < 32 ? `${width / 2}px` : ""
            });
    }

項目裏運行gulp

D:\wampp\htdocs\test\sudoku\src>.\node_modules\.bin\gulp && .\node_modules\.bin\
gulp watch

數獨遊戲解鎖
在完成數獨遊戲後想做一個解數獨遊戲的頁面,參考講解內容和百度找到的解法(參考鏈接)
主體樣式用的慕課老師,解法用的參考鏈接

主邏輯

internalGenerate(board){
        this.b = board;
        this.t = 0;
    }


    //得到下一個未填項
    get_next(x,y){
        for (let n=y+1;n<9;n++){
            if (this.b[x][n] == 0){
                return [x,n];
            }
        }
        for (let r =x+1;r<9;r++){
            for (let c =0;c<9;c++){
                if (this.b[r][c] == 0){
                    return [r,c];
                }
            }
        }
        return [-1,-1];  //若無下一個未填項，返回-1
    }
    //主循環
    try_it(x,y){
        //
        if(this.b[x][y] == 0){

            for (let i =1;i<=9;i++){
                //從1到9嘗試
                this.t += 1;
                if(Toolkit.matrix.checkFillable(this.b,i,x,y)){
                    //檢查指定位置是否可以填數字n,可以進來,不可以循環嘗試下個數字
                    this.b[x][y]=i;//將符合條件的填入[x][y]格替換0

                    const [next_x,next_y]=this.get_next(x,y);//得到下一個0格
                    if(next_x==-1){
                        return true;//如果無下一個0格,返回True
                    }else{
                        //如果有下一個0格，遞歸判斷下一個0格直到填滿數獨
                        const end=this.try_it(next_x,next_y);
                        if(!end){
                            //在遞歸過程中存在不符合條件的，即 使try_it函數返回None的項
                            this.b[x][y] = 0
                        }else{
                            return true;
                        }
                    }
                }
            }
        }
    }

    //主調用
    start(){

        if(this.b[0][0]==0){
            this.try_it(0,0);
        }else{
            const [x,y]= this.get_next(0,0);
            this.try_it(x,y);
        }
        return this.b;
        /*for(var a in this.b){
            return a;
        }*/
    }

個人github Demo地址