rotelstift/magicSquareEx.html

## magicSquareEx.html
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <style>
    td{
      width: 3em;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="printMSs" class="container">
  </div>
  <script>


    ///////////////////////////////////////////////////////////
    //// https://techplay.jp/column/298?utm_source=column_298&utm_medium=social&utm_campaign=feed&utm_content=tw0
    //// に載っている問題を解くためのプログラム
    //// 【今月の問題】
    //// 3×3の魔方陣は1〜9までを一つずつ配置したものですが、
    //// n〜n+8を配置したものを求めるプログラムを作成してください。
    //// ここで、nは1以上10以下の整数とします。
    ///////////////////////////////////////////////////////////

    // nを幾つにするのかの設定
    // 1以上で設定する
    let limit = 100;

    // 表示用のHTMLのテンプレートを作る
    printTemplate(limit);

    // 魔方陣を作るロジック
    // まず[n,n+1,n+2,n+3,n+4,n+5,n+6,n+7,n+8]の配列を作る。
    // 次両端からn+4を中心にして数を取っていき、下記の配列を作る
    // pursed = [[n, n+4, n+8],[n+1, n+4, n+7],[n+2, n+4, n+6],[n+3, n+4, n+5]]
    // そして、sumMagic = n + (n+4) + (n+8)を計算する
    // sumMagicが奇数の時、3つの奇数か2個の偶数＋1個の奇数の組み合わせで作ること
    // sumMagicが偶数の時、3つの偶数か2個の奇数＋1個の偶数の組み合わせで作ることに着目すると、
    // 常にpursed[1]とpursed[3]は斜めに配置される
    // 残りの4箇所の値は計算で算出される
    // あとはこれを90度回転を3回して、裏に返して、さらにそれを3回90度回転させる。
    // そうすると8つの魔方陣ができる。

    for(var n = 1; n <= limit; n++){
      var origin = [];
      var pursed = [];
      var resultOrigin = [[0,0,0],[0,0,0],[0,0,0]];

      for(var i = n; i <= n + 8; i++){
        origin.push(i);
      }

      purseArray(origin, pursed);

      // 一行の合計を求める
      var sumMagic = 0;
      for (var i in pursed[0]) {
        sumMagic += pursed[0][i];
      };

      // pursed[1]とpursed[3]を斜めに配置
      // 右下がりの斜め
      rightToBottom(resultOrigin, pursed[1]);
      // 右上がりの斜め
      rightToTop(resultOrigin, pursed[3]);


      // 残りの4箇所の値を算出する
      for (var i in resultOrigin) {
        if(i % 2 == 0){
          resultOrigin[i][1] = sumMagic - sumWidth(resultOrigin, i);
        }
      }
      for(var j in resultOrigin){
        if(j % 2 == 0){
          resultOrigin[1][j] = sumMagic - sumHeight(resultOrigin, j);
        }
      }

      //// ここまでで、他の答えの元になる魔方陣resultOriginが出来上がる。


      // resultOriginの回転と裏を入れる配列
      var results = [];

      results.push(resultOrigin);

      for(var i = 0; i < 3; i++){
        results.push(rotate(results[results.length - 1]));
      }

      results.push(revarse(resultOrigin));

      for(var i = 0; i < 3; i++){
        results.push(rotate(results[results.length - 1]));
      }

      for (result of results) {
        printMS(result, n)
      }

    }


    ////////////////////// ここから下、必要な関数 //////////////////////////////

    // originから5を中心にして両端から数を取る関数
    function purseArray(origin, pursed) {
      while(origin.length > 1){
        var ary = [];
        ary.push(origin.shift());
        ary.push(origin[origin.length / 2 - 1]);
        ary.push(origin.pop());
        pursed.push(ary);
      };
    }

    // 右下がりの斜めに配置する
    function rightToBottom(result, ary) {
      for (var i = 0; i < result.length; i++) {
        for (var j = 0; j < result[i].length; j++) {
          if(i == j) result[i][j] = ary[j]
        }
      }
    }

    // 右上がりの斜めに配置する
    function rightToTop(result, ary) {
      for (var i = 0; i < result.length; i++) {
        for (var j = 0; j < result[i].length; j++) {
          if((i + j) == (result.length - 1)) result[i][j] = ary[j]
        }
      }
    }

    // r行目の横の合計を求める
    function sumWidth(result, r) {
      var sum = 0;
      for (var i = 0; i < result[r].length; i++) {
        sum += result[r][i];
      }
      return sum
    }

    // d列目の縦の合計を求める
    function sumHeight(result, d) {
      var sum = 0;
      for (var i = 0; i < result.length; i++) {
        sum += result[i][d];
      }
      return sum
    }

    // 結果を反転させる
    function revarse(matrix) {
      var tmp = [["","",""],["","",""],["","",""]];
      for (var i in matrix) {
        for (var j in matrix[i]) {
          tmp[i][j] = matrix[j][i];
        }
      }
      return tmp;
    }

    // 結果を90度回転させる
    function rotate(matrix) {
      var tmp = [["","",""],["","",""],["","",""]];
      for (var i in matrix) {
        for (var j in matrix[i]) {
         tmp[i][j] = matrix[matrix[i].length -1 - j][i]
        }
      }
      return tmp;
    }

    // 結果にn足す
    function msPlus(matrix, n) {
      var tmp = [["","",""],["","",""],["","",""]];
      for (var i in matrix) {
        for (var j in matrix[i]) {
         tmp[i][j] = matrix[i][j] + n
        }
      }
      return tmp;
    }

    function printTemplate(limit){
      var printMSs = document.getElementById("printMSs");

      for(var i = 1; i <= limit; i++){
        var h1 = document.createElement("h1");
        printMSs.appendChild(h1);
        h1.textContent = "n = " + i + "の時の魔方陣";

        var divForPrint = document.createElement("div");
        divForPrint.classList.add("row");
        divForPrint.setAttribute("id", "printMS" + i);
        printMSs.appendChild(divForPrint);
      }
    }

    function printMS(ms2DArray, n) {
      var printMS = document.getElementById("printMS" + n);
      var divMS = document.createElement("div");
      var formMS = document.createElement("form");

      for (var ary of ms2DArray) {
        // console.log(ary);
        var tr = document.createElement("tr");
        for (var i in ary) {
          // console.log(ary[i]);
          var td = document.createElement("td");
          tr.appendChild(td);
          td.textContent = ary[i];
        };
        formMS.appendChild(tr);
      };

      divMS.classList.add('col-3');
      divMS.appendChild(formMS);
      printMS.appendChild(divMS);
    };
  </script>
</body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

	<style>
	td{
	width: 3em;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div id="printMSs" class="container">
	</div>
	<script>



	///////////////////////////////////////////////////////////
	//// https://techplay.jp/column/298?utm_source=column_298&utm_medium=social&utm_campaign=feed&utm_content=tw0
	//// に載っている問題を解くためのプログラム
	//// 【今月の問題】
	//// 3×3の魔方陣は1〜9までを一つずつ配置したものですが、
	//// n〜n+8を配置したものを求めるプログラムを作成してください。
	//// ここで、nは1以上10以下の整数とします。
	///////////////////////////////////////////////////////////

	// nを幾つにするのかの設定
	// 1以上で設定する
	let limit = 100;

	// 表示用のHTMLのテンプレートを作る
	printTemplate(limit);

	// 魔方陣を作るロジック
	// まず[n,n+1,n+2,n+3,n+4,n+5,n+6,n+7,n+8]の配列を作る。
	// 次両端からn+4を中心にして数を取っていき、下記の配列を作る
	// pursed = [[n, n+4, n+8],[n+1, n+4, n+7],[n+2, n+4, n+6],[n+3, n+4, n+5]]
	// そして、sumMagic = n + (n+4) + (n+8)を計算する
	// sumMagicが奇数の時、3つの奇数か2個の偶数＋1個の奇数の組み合わせで作ること
	// sumMagicが偶数の時、3つの偶数か2個の奇数＋1個の偶数の組み合わせで作ることに着目すると、
	// 常にpursed[1]とpursed[3]は斜めに配置される
	// 残りの4箇所の値は計算で算出される
	// あとはこれを90度回転を3回して、裏に返して、さらにそれを3回90度回転させる。
	// そうすると8つの魔方陣ができる。

	for(var n = 1; n <= limit; n++){
	var origin = [];
	var pursed = [];
	var resultOrigin = [[0,0,0],[0,0,0],[0,0,0]];

	for(var i = n; i <= n + 8; i++){
	origin.push(i);
	}

	purseArray(origin, pursed);

	// 一行の合計を求める
	var sumMagic = 0;
	for (var i in pursed[0]) {
	sumMagic += pursed[0][i];
	};

	// pursed[1]とpursed[3]を斜めに配置
	// 右下がりの斜め
	rightToBottom(resultOrigin, pursed[1]);
	// 右上がりの斜め
	rightToTop(resultOrigin, pursed[3]);


	// 残りの4箇所の値を算出する
	for (var i in resultOrigin) {
	if(i % 2 == 0){
	resultOrigin[i][1] = sumMagic - sumWidth(resultOrigin, i);
	}
	}
	for(var j in resultOrigin){
	if(j % 2 == 0){
	resultOrigin[1][j] = sumMagic - sumHeight(resultOrigin, j);
	}
	}

	//// ここまでで、他の答えの元になる魔方陣resultOriginが出来上がる。


	// resultOriginの回転と裏を入れる配列
	var results = [];

	results.push(resultOrigin);

	for(var i = 0; i < 3; i++){
	results.push(rotate(results[results.length - 1]));
	}

	results.push(revarse(resultOrigin));

	for(var i = 0; i < 3; i++){
	results.push(rotate(results[results.length - 1]));
	}

	for (result of results) {
	printMS(result, n)
	}

	}


	////////////////////// ここから下、必要な関数 //////////////////////////////

	// originから5を中心にして両端から数を取る関数
	function purseArray(origin, pursed) {
	while(origin.length > 1){
	var ary = [];
	ary.push(origin.shift());
	ary.push(origin[origin.length / 2 - 1]);
	ary.push(origin.pop());
	pursed.push(ary);
	};
	}

	// 右下がりの斜めに配置する
	function rightToBottom(result, ary) {
	for (var i = 0; i < result.length; i++) {
	for (var j = 0; j < result[i].length; j++) {
	if(i == j) result[i][j] = ary[j]
	}
	}
	}

	// 右上がりの斜めに配置する
	function rightToTop(result, ary) {
	for (var i = 0; i < result.length; i++) {
	for (var j = 0; j < result[i].length; j++) {
	if((i + j) == (result.length - 1)) result[i][j] = ary[j]
	}
	}
	}

	// r行目の横の合計を求める
	function sumWidth(result, r) {
	var sum = 0;
	for (var i = 0; i < result[r].length; i++) {
	sum += result[r][i];
	}
	return sum
	}

	// d列目の縦の合計を求める
	function sumHeight(result, d) {
	var sum = 0;
	for (var i = 0; i < result.length; i++) {
	sum += result[i][d];
	}
	return sum
	}

	// 結果を反転させる
	function revarse(matrix) {
	var tmp = [["","",""],["","",""],["","",""]];
	for (var i in matrix) {
	for (var j in matrix[i]) {
	tmp[i][j] = matrix[j][i];
	}
	}
	return tmp;
	}

	// 結果を90度回転させる
	function rotate(matrix) {
	var tmp = [["","",""],["","",""],["","",""]];
	for (var i in matrix) {
	for (var j in matrix[i]) {
	tmp[i][j] = matrix[matrix[i].length -1 - j][i]
	}
	}
	return tmp;
	}

	// 結果にn足す
	function msPlus(matrix, n) {
	var tmp = [["","",""],["","",""],["","",""]];
	for (var i in matrix) {
	for (var j in matrix[i]) {
	tmp[i][j] = matrix[i][j] + n
	}
	}
	return tmp;
	}

	function printTemplate(limit){
	var printMSs = document.getElementById("printMSs");

	for(var i = 1; i <= limit; i++){
	var h1 = document.createElement("h1");
	printMSs.appendChild(h1);
	h1.textContent = "n = " + i + "の時の魔方陣";

	var divForPrint = document.createElement("div");
	divForPrint.classList.add("row");
	divForPrint.setAttribute("id", "printMS" + i);
	printMSs.appendChild(divForPrint);
	}
	}

	function printMS(ms2DArray, n) {
	var printMS = document.getElementById("printMS" + n);
	var divMS = document.createElement("div");
	var formMS = document.createElement("form");

	for (var ary of ms2DArray) {
	// console.log(ary);
	var tr = document.createElement("tr");
	for (var i in ary) {
	// console.log(ary[i]);
	var td = document.createElement("td");
	tr.appendChild(td);
	td.textContent = ary[i];
	};
	formMS.appendChild(tr);
	};

	divMS.classList.add('col-3');
	divMS.appendChild(formMS);
	printMS.appendChild(divMS);
	};
	</script>
	</body>
	</html>