menumenu_open <!— xhtml.ru —>

Что такое magic square? Алгоритм его генерации.

Wiki: Detail of Melencolia I
Magic square — Wikipedia

Magic square (далее волшебный квадрат) — это матрица N x N, в которой сумма чисел во всех столбцах, строках и диагоналях одинаковая, а каждое число используется только один раз.

У волшебного квадрата одинаковое количество строк и столбцов. В обычной математической записи обозначается «N». Таким образом, в волшебный квадрат всегда содержит N2 чисел. Волшебный квадрат, который содержит целые числа от 1 до N2, называется нормальным.

Нормальные волшебные квадраты могут быть построены любого размера, кроме 2 × 2 (то есть, где N = 2). Магический квадрат 1 × 1, в котором только одна ячейка содержит число 1, тривиален. Наименьший (и уникальный до вращения и отражения) нетривиальный случай, 3 × 3, показан ниже.

Magic square

Вот Wiki-ссылка про magic square.

Пример magic square:

HTML-разметка примера

<html>
<head>
  <title>
    Magic square demo
  </title>
  <style>
    .boundary {
      height: 100px;
      width: 100px;
      min-height: 100px;
      background: #258858;
      font-weight: bold;
      font-size: 200%;
      color: #fff;
    }
    .select {
      margin: auto;
    }
    .dropdown {
      margin: auto;
    }
  </style>
</head>

<center><select autofocus align="center" class="dropdown" id="dd" onchange='createTable()' onfocus='createTable()'>
    <option value="3x3 Magic Square">3x3 Magic Square</option>
    <option value="5x5 Magic Square">5x5 Magic Square</option>
    <option value="7x7 Magic Square">7x7 Magic Square</option>
    <option value="9x9 Magic Square">9x9 Magic Square</option>
  </select></center><br><br>
  <table id="tab" class="select" border="1" cellpadding="0" cellspacing="0">
  </table>
</html>

Javascript примера

<script>
  var gridSizes = [3, 5, 7, 9];
  window.onload = init;
  function init() {
    document.getElementById('dd').focus();
    createTable();
  }
  function createTable() {
    var gridSize = gridSizes[document.getElementById("dd").selectedIndex],
      table = document.getElementById('tab'),
      numCount = 1,
      x = '0',
      y = Math.floor(gridSize / 2).toString(),
      numRows = document.getElementById('tab').rows.length;
    initVal = 1;
    while (numRows !== 0) {
      table.deleteRow(0);
      numRows--;
    }
    table.height = table.width = gridSize * 100;
    for (var row = 0; row < gridSize; row++) {
      var tr = document.createElement('tr');
      for (var col = 0; col < gridSize; col++) {
        var td = document.createElement('td');
        td.align = 'center';
        td.className = 'boundary';
        //td.innerHTML = col;
        td.id = row.toString() + col.toString();
        tr.appendChild(td);
      }
      document.getElementById('tab').appendChild(tr);
    }
    // starting point of magic square
    document.getElementById(x + y).innerHTML = initVal;
    x_val = parseInt(x);
    y_val = parseInt(y);
    while (numCount < gridSize * gridSize) {
      y_offset = y_val - 1;
      x_offset = x_val - 1;
      if (y_offset < 0) {
        y_offset += gridSize;
      }
      if (x_offset < 0) {
        x_offset += gridSize;
      }
      gridId = x_offset.toString() + y_offset.toString();
      var grid = document.getElementById(gridId);
      if (grid.innerHTML === '') {
        grid.innerHTML = ++initVal;
        x_val = x_offset;
        y_val = y_offset;
        numCount++;
      } else {
        x_offset = x_val + 1;
        y_offset = y_val;
        gridId = x_offset.toString() + y_offset.toString();
        var grid = document.getElementById(gridId);
        grid.innerHTML = ++initVal;
        x_val = x_offset;
        y_val = y_offset;
        numCount++;
      }
    }
  }
</script>