Загрузка...
Magic square (далее волшебный квадрат) — это матрица N x N, в которой сумма чисел во всех столбцах, строках и диагоналях одинаковая, а каждое число используется только один раз.
У волшебного квадрата одинаковое количество строк и столбцов. В обычной математической записи обозначается «N». Таким образом, в волшебный квадрат всегда содержит N2 чисел. Волшебный квадрат, который содержит целые числа от 1 до N2, называется нормальным.
Нормальные волшебные квадраты могут быть построены любого размера, кроме 2 × 2 (то есть, где N = 2). Магический квадрат 1 × 1, в котором только одна ячейка содержит число 1, тривиален. Наименьший (и уникальный до вращения и отражения) нетривиальный случай, 3 × 3, показан ниже.
Вот 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>