Dynamic generate sudoku board table using javascript

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

MvG

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.

来源：https://stackoverflow.com/questions/39246124/dynamic-generate-sudoku-board-table-using-javascript

标签

javascript

arrays

validation

math

sudoku