今天我们来讲讲数独吧!失败率几乎为零,不会卡顿的方法,而且万能(指的是对于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>
当然我这只是最普通的一种办法,相信你们一定可以写的更加简介,更加的有效率 😊