数独游戏前端学习笔记及后续解数独方法

学习于默课网学习视频的整理笔记
视频老师分享代码库

基于我本地已经安装了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地址