60行代码教你解决9*9数独游戏

最新推荐文章于 2024-07-26 14:24:59 发布

名字长就叫小林好了

最新推荐文章于 2024-07-26 14:24:59 发布

阅读量4.4k

点赞数 5

文章标签： html css js javascript

本文链接：https://blog.csdn.net/w_xiaolin/article/details/104393127

版权

今天我们来讲讲数独吧！失败率几乎为零，不会卡顿的方法，而且万能(指的是对于7 * 7，8 * 8 ， 9 * 9， 10 * 10 等等)

先看效果！
在这里插入图片描述

一、思路

数独的规则行和列不能有相同的数字，然后把方格填满就完了。游戏格子大概就是这个样子。
在这里插入图片描述
首先我们先来讲一下思路，每一个格子都可以输入数字，在没有数字的格子里随机生成数字，但又不可和当前格子的列与行相同。

那么核心的就是如何不与同列同行的相同了。先看图

在这里插入图片描述
仔细想一想，计算机生成是由规例的，每一个数字都是有四个方向的，前后左右，但是计算机是依次生成的，所以这个数字，的下方，和右方是没有数字的，所以就无须和他们做对比。见下图

在这里插入图片描述
那么我们只需要得到，需要判断的这个数值的上放的左方的所有值,然后产生一个随机数，在他们中查找，如果查找的到，就然随机数再次随机，如果查找不到，就把值写入。思路有了，那么写起来就简单了。

二、html准备代码

我们可以输入值那么就少不了输入框

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <style>
            *{
                margin:0;padding:0;
            }
            div{
                width: 50px;
                height: 50px;
                float: left;

            }
            input{
                width: 100%;
                height: 100%;
                text-align: center;
                font-size: 1.5em;
                font-weight: bold;
            }
            header::after{
                content:"";
                clear: both;
                display: block;
            }
        </style>
    </head>
    <body>
        <header>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
        </header>
        <header>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
        </header>
        <header>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
        </header>
        <header>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
        </header>
        <header>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
        </header>
        <header>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
        </header>
        <header>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
        </header>
        <header>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
        </header>
        <header>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
            <div><input type="text" value=""></div>
        </header> 
        <button>提交</button>  
    </body>
</html>

html代码比较简单就没有可讲的了。

目前效果

在这里插入图片描述

三、js代码

我们先获取所有的div

window.onload=function(){
    var headers=document.querySelectorAll('header');///获取列
    var hx=0,dx=0;
    var divlist=[];
    while(hx<headers.length){
        let  divs=headers[hx].children;	//获取列里的div
        divlist.push(new Array());		//自动添加数组
        while(dx<divs.length){
                divlist[hx].push(divs[dx])	//往数组传值
            dx++;
        }
        dx=0;
        hx++;
    }
    console.log(divlist)
}

在这里插入图片描述
接下里我们只需要获取当前需要计算并填值的div,和它上面的div,左边的div。

....
    getdiv(headers.length,hx,dx+1)	//因为值0不执行所以加1
....
    function getdiv(length,hx1,dx1){
        let newdiv=[];
            while(dx1){
                newdiv.push(divlist[hx1][dx1-1]);	//获取前面的div
                while(length){  //从最大的列开始获取
                    if((length-1)<hx1){	//获取需要计算上面的div
                        newdiv.push(divlist[length-1][dx1-1])
                    }
                    length--
                }
                dx1--
            }
    }

在这里插入图片描述
可见我们行列已经获取好了，最后只用作比较往里面写入值就好了

核心代码

....       
        calcnum(newdiv,values)
....
function calcnum(nubs,vallist){
    let idx=0;
    nubs.forEach((val)=>{	 //得到不为空的数值
            if(val.children[0].value){
                vallist.push(val.children[0].value)
            }
        })
    while(idx<nubs.length){
        if(!nubs[idx].children[0].value){
           for(var i=0;i<100;i++){		//这个循环写入值就退出了不浪费资源
                let rad=Math.ceil(Math.random()*9) //产生随机数
                if(!~vallist.indexOf(String(rad))){	 
                //没有查找到写入值并且记录
                    vallist.unshift(String(rad))
                    nubs[idx].children[0].value=rad;
                    break;
                }
            }
        }
        idx++;
    }

}

我们已经可以看见结果了，空的地方是因为，电脑把自己给玩死了，这个位置已经不可写入任何值了，那么我们怎么解决了

1、这就要依靠电脑的计算能力了，只要电脑死了就重新刷数值。这招比较万能

2、先写入一部分数值，减少死亡概率
在这里插入图片描述

var input=document.querySelectorAll('input');
input.forEach((val)=>{
    if(!val.value){
        input.forEach((val)=>{
            val.value="";
        })
        window.onload();
    }
})

好了几句话解决

在这里插入图片描述
保证你每次出现的数字都不一样

哦对了忘记了，用户还可自己输入值，那就把数值加到记录字符串就好了，我就一起加到完整代码里了

四、完整代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title></title>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 50px;
            height: 50px;
            float: left;

        }

        input {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 1.5em;
            font-weight: bold;
        }

        header::after {
            content: "";
            clear: both;
            display: block;
        }
    </style>
    <script>
        window.onload = function () {
          var but=document.querySelector('button').onclick=function(){
                var headers = document.querySelectorAll('header');
                var hx = 0, dx = 0;
                var divlist = [];
                var count=[]
                while (hx < headers.length) {
                    let divs = headers[hx].children;
                    divlist.push(new Array());
                    while (dx < divs.length) {
                        divlist[hx].push(divs[dx]);
                        if(divs[dx].children[0].value){
                            count.unshift((hx*9)+dx)
                            count.unshift(divs[dx].children[0].value)
                        }
                        getdiv(headers.length, hx, dx + 1)
                        dx++;
                    }
                    dx = 0;
                    hx++;
                }
                function getdiv(length, hx1, dx1) {
                    let newdiv = [], values = [];

                    while (dx1) {
                        newdiv.push(divlist[hx1][dx1 - 1]);
                        while (length) {
                            if ((length - 1) < hx1) {
                                newdiv.push(divlist[length - 1][dx1 - 1])
                            }
                            length--
                        }
                        dx1--
                    }

                    calcnum(newdiv, values)
                }
                function calcnum(nubs, vallist) {
                    let idx = 0;
                    nubs.forEach((val) => {
                        if (val.children[0].value) {
                            vallist.push(val.children[0].value)
                        }
                    })
                    while (idx < nubs.length) {
                        if (!nubs[idx].children[0].value) {
                            for (var i = 0; i < 100; i++) {
                                let rad = Math.ceil(Math.random() * 9)
                                if (!~vallist.indexOf(String(rad))) {
                                    vallist.unshift(String(rad))
                                    nubs[idx].children[0].value = rad;
                                    break;
                                }
                            }
                        }
                        idx++;
                    }
                }
            var input=document.querySelectorAll('input');
            input.forEach((val)=>{
                if(!val.value){
                    input.forEach((val)=>{	//从新运算
                        val.value=""
                    })
                    for(var i=0;i<count.length;i+=2){	//填入已有的数值
                        input[count[i]].value=count[i+1]
                    }
                    but()	//从新运算
                }
            })

         }
        }
    </script>
</head>

<body>
    <header>
        <div><input type="text" value="1"></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
    </header>
    <header>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
    </header>
    <header>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
    </header>
    <header>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
    </header>
    <header>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
    </header>
    <header>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
    </header>
    <header>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
    </header>
    <header>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
    </header>
    <header>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
        <div><input type="text" value=""></div>
    </header>
    <button>提交</button>
</body>

</html>

当然我这只是最普通的一种办法，相信你们一定可以写的更加简介，更加的有效率 😊

名字长就叫小林好了

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
60行代码教你解决9*9数独游戏

今天我们来讲讲数独吧！先看效果！一、思路数独的规则行和列不能有相同的数字，然后把方格填满就完了。游戏格子大概就是这个样子。首先我们先来讲一下思路，每一个格子都可以输入数字，在没有数字的格子里随机生成数字，但又不可和当前格子的列与行相同。那么核心的就是如何不与同列同行的相同了。先看图仔细想一想，计算机生成是由规例的，每一个数字都是有四个方向的，前后左右，但是计算机是依次生成的，所...
复制链接

扫一扫