使用javascript动态生成数独板表 [英] Dynamic generate sudoku board table using javascript

查看：75
本文介绍了使用javascript动态生成数独板表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用此脚本生成数独板：



问题是我不知道如何验证以在列上生成唯一数字正方形。



实际上只是在行上验证和生成唯一数字。



这是代码：

< pre class =snippet-code-js lang-js prettyprint-override> function generate（count，values）{return Array.apply（null，{length：count}）。map（function（） {var r = []，array = values.slice（）; while（array.length）{r.push（array.splice（Math.floor（Math.random（）* array.length），1）[0] ）;} return r;}）;}; var myStringArray = generate（9，[1,2,3,4,5,6,7,8,9]）; Array.from（document.getElementsByClassName（'cell'） ））。forEach（function（e，i）{var y = Math.floor（i / myStringArray.length）; var x = i％myStringArray.length; e.textConte nt = myStringArray [y] [x];}）; 

  .container {min-height：100vh;宽度：100％;显示：flex; align-items：center;辩解内容：中心; margin-bottom：0;}。table {display：table;边框：2px solid＃444;边界崩溃：崩溃; position：relative;}。row {display：table-row;位置：相对; z-index：-1;}。cell {display：table-cell;填充：8像素; border：1px solid＃ff0000; text-align：center;}。cell：nth-​​child（3），。cell：nth-​​child（6）{border-right：5px solid＃555; } /*vertical*/.row:nth-child(3）.cell，.row：nth-​​child（6）.cell {border-bottom：5px solid＃555;} /*horizo​​ntal*/.header {text-居中对齐; position：relative;}。header {counter-increment：colno; } .header :: before {content：counter（colno）;位置：绝对;上：-30px;字体重量：粗体; color：＃777;}。row：nth-​​child（n + 1）{counter-increment：rowno; }。：nth-​​child（n + 1）:: before {content：counter（rowno）;位置：绝对;左：-30px;顶部：10px的;字体重量：粗体;颜色：＃777;}  

 < div class =容器>< div class =table> < div id =mytab1class =row> < span class =cell header> ***< / span> < span class =cell header> ***< / span> < span class =cell header> ***< / span> < span class =cell header> ***< / span> < span class =cell header> ***< / span> < span class =cell header> ***< / span> < span class =cell header> ***< / span> < span class =cell header> ***< / span> < span class =cell header> ***< / span> < / DIV> < div class =row> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < / DIV> < div class =row> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < / DIV> < div class =row> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < / DIV> < div class =row> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < / DIV> < div class =row> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < / DIV> < div class =row> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < / DIV> < div class =row> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < / DIV> < div class =row> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < span class =cell> ***< / span> < / DIV> < / div>< / div>



请访问小提琴 此处



感谢您的帮助，
谢谢

解决方案

您需要回溯，因为可以添加数字到数独板不立即违反任何规则，但后来会导致矛盾。如果您采取任何独特解决方案Sudoku问题并随意在任何地方放置任何数字，您一定会体验到这一点。



我建议您调查 Dancing Links 算法。您可以轻松地将Sudoku制定为集合覆盖问题，并且该算法可以找到解决方案（如果存在）。对于完全空的板，必须有一个解决方案。如果您想获得随机结果，请随机化矩阵。



同时调查所有其他数独标记的问题，因为你不是第一个尝试生成这样的电路板，并且从一种语言翻译到另一种语言并没有真正改变游戏那么多。


I am trying to to generate a Sudoku board using this script:

The problem is that I don't know how to validate to generate unique numbers on columns and squares.

Actually is just validating and generating unique numbers only on rows.

Here is that code : 

function generate(count, values) {
return Array.apply(null, { length: count }).map(function () {
    var r = [],
        array = values.slice();
    while (array.length) {
        r.push(array.splice(Math.floor(Math.random() * array.length), 1)[0]);
    }
    return r;
});
};

var myStringArray = generate(9, [1, 2, 3, 4, 5, 6, 7, 8, 9]);

Array.from(document.getElementsByClassName('cell')).forEach(function(e, i){
  var y = Math.floor(i/myStringArray.length);
  var x = i % myStringArray.length;
  e.textContent = myStringArray[y][x];

});

.container{
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items : center;
    justify-content : center;
    margin-bottom: 0;
}

.table {
    display:table;
    border: 2px solid #444;
    border-collapse: collapse;
    position: relative;
}
.row {
    display:table-row;
    position: relative;
    z-index:-1;
}
.cell {
    display:table-cell;
    padding:8px;
    border: 1px solid #ff0000;
    text-align: center;
}
.cell:nth-child(3), .cell:nth-child(6){border-right: 5px solid #555; } /*vertical*/
.row:nth-child(3) .cell, .row:nth-child(6) .cell{border-bottom: 5px solid #555;}  /*horizontal*/

.header {
text-align:center;
  position: relative;
}

.header {
 counter-increment: colno;                
}
.header::before {
  content: counter(colno); 
  position: absolute;
  top: -30px;
  font-weight:bold;
    color: #777;
}
.row:nth-child(n+1) {
    counter-increment: rowno;                
}
.row:nth-child(n+1)::before{
  content: counter(rowno); 
  position: absolute;
  left: -30px;
  top:10px;
  font-weight:bold;
  color: #777;
}

<div class="container">
<div class="table">
  <div id="mytab1" class="row">
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  </div>
</div>

Please visit fiddle here

Appreciate your help, Thanks

解决方案

You will need backtracking, because it is possible to add numbers to the Sudoku board which don't violate any rules immediately, but which will lead to a contradiction later on. If you take any unique-solution Sudoku problem and arbitrarily place any number anywhere, you are bound to experience just this.

I suggest you investigate the Dancing Links algorithm. You can easily formulate Sudoku as a set cover problem, and that algorithm can find a solution if there exists one. For the completely empty board, there has to be a solution. Randomize the matrix if you want to obtain a random result.

Also investigate all the other sudoku-tagged questions, since you are not the first trying to generate such boards, and translating from one language to another doesn't really change the game that much.

这篇关于使用javascript动态生成数独板表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆