制作不同大小的幻方

Question

我正在制作不同大小的幻方，并希望得到 Javascript 中每列、行和对角线的总和相同的值.

这是我的代码：

var numsarray = [];
window.boxes = document.querySelectorAll(".box")
let time = document.getElementById('time')
let size = document.getElementById('select').value
var attempting = 0;
var output = {};
var arrays = [1,2,3,4,5,6,7,8,9];
var attempt = 0;
let boxparent = document.getElementById('boxParent')
let done = false;
var interval = setInterval(function() {
  attempting.textContent = attempt;
  time.textContent = parseFloat(time.textContent)+1
  if( time.textContent < 10 ) {
    return '00' + time.textContent;
  }
  if( time.textContent < 100 ) {
    return '0'+time.textContent
  }
},1)
// I could also use size**2
function createnums (){
  for( let i=1 ; i <= Math.pow(size,2) ; i++ ) {
    arrays.push(i);
  }
  return arrays;
}

let getnums = () => {
  arrays = createnums();
  numsarray = [];
  var len = arrays.length;
  while( len > 0 ) {
    attempt+=1
    var rans = Math.floor(Math.random() * len);
    numsarray.push(arrays[rans]);
    arrays.splice(rans, 1);
    len = len - 1;
  }
  return numsarray;
}

function creategrid(values) {
  // Get curent select value 
  boxparent.innerHTML = ''
  // Create grid from select value
  for( var i = 0 ; i < values.charAt(0) ; i++ ) {
    var rows = document.createElement('div');
    rows.className = 'row';
    for( var j = 0 ; j < values.charAt(0) ; j++ ) {
      var boxs = document.createElement('div');
      boxs.className = 'box';
      rows.appendChild(boxs);
    }
    boxparent.appendChild(rows);
  }
}

function size3x3(){
  while( ! done ) {
    output = getnums()
    if( output[0] + output[1] + output[2] == 15
     && output[1] + output[4] + output[7] == 15
     && output[2] + output[5] + output[8] == 15
     && output[0] + output[3] + output[6] == 15
     && output[2] + output[4] + output[6] == 15
     && output[3] + output[4] + output[5] == 15
     && output[6] + output[7] + output[8] == 15
     && output[0] + output[4] + output[8] == 15
    ) {
      window.clearInterval(interval)
      for( let i in output ) {
        boxes[i].textContent = output[i]
      }
      done = true;
    }
  }
}
function size4x4(){
  while( ! done ) {
    output = getnums();
    if( output[0] + output[1] + output[2] == 15
     && output[1] + output[4] + output[7] == 15
     && output[2] + output[5] + output[8] == 15
     && output[0] + output[3] + output[6] == 15
     && output[2] + output[4] + output[6] == 15
     && output[3] + output[4] + output[5] == 15
     && output[6] + output[7] + output[8] == 15
     && output[0] + output[4] + output[8] == 15
    ) {
      window.clearInterval(interval)
      for( let i in output ){
        boxes[i].textContent = output[i]
      }
      done = true;
    }
  }
}

   

.box {
   border: black 4px solid;
   background: white;
   opacity: 0.7;
   width: 175px;
   height: 150px;
   margin-top: 0px;
   cursor: pointer;
   float: left;
   display: inline-block;
}
.row {
   display: block;
   float: left;
   width: 100%;
}

<div id="boxParent"></div>
<form>
    <label>Choose a Size:</label>
    <select onchange='change()'>
        <option>3 X 3</option>
        <option>4 X 4</option>
        <option>5 X 5</option>
        <option>6 X 6</option>
        <option>7 X 7</option>
        <option>8 X 8</option>
        <option>9 X 9</option>
    </select>
</form>

我为此苦恼了很久

每次我重新加载页面时，它都会显示 Uncaught TypeError: Cannot set properties of undefined (setting 'textContent')。

我不太清楚为什么。有谁知道为什么会这样？

另外，我想做一个高级算法，可以检查每列，行和对角线的总和是否相同，我只需要使 1 function in all

目前，我必须对每种尺寸的网格进行每次检查 function，这很烦人。

对于 creategrid()，它仅适用于 3x3 和 4x4 尺寸。

我的代码有几个问题。有人有更好的版本吗？

非常感谢您的帮助和回复！

Answer 1

希望这就是您要找的。但我不建议使用 float 使用最新的 flexbox 或 grid 代替。

window.boxes = document.querySelectorAll(".box")
function creategrid(grid) {
  let values = grid;
  document.getElementById('boxParent').innerHTML=''
  for (var i = 0; i < values.charAt(0); i++) {
    var rows = document.createElement('div');
    rows.className = 'row';
    for (var j = 0; j < values.charAt(0); j++) {
      var box = document.createElement('div');
      box.className = 'box';
      rows.appendChild(box);
    }
    document.getElementById('boxParent').appendChild(rows);
  }
}
function change() {
  var x = document.getElementById("mySelect").value;
  creategrid(x)
}

.box {
      border: black 4px solid;
      background: white;
      opacity: 0.7;
      width: 50px;
      height: 50px;
      margin-top: 0px;
      cursor: pointer;
      float: left;
      display: inline-block;
    }
     .row {
          display: block;
          float: left;
          width: 100%;
        }

<form>
          <label>Choose a Size:</label>
          <select id="mySelect" onchange='change()'>
            <option value='3 X 3' selected>3 X 3</option>
            <option value='4 X 4'>4 X 4</option>
            <option value='5 X 5'>5 X 5</option>
            <option value='6 X 6'>6 X 6</option>
            <option value='7 X 7'>7 X 7</option>
            <option value='8 X 8'>8 X 8</option>
            <option value='9 X 9'>9 X 9</option>
          </select>
        </form>
        
        <div id="boxParent"></div>

制作不同大小的幻方

Making different sizes of magic square

html

javascript

css

magic-square