ソース
test.html
<div id="div1"></div>
<script>
var x = 0
var y = 0
var vec = 0//↑→↓←の順で0~3
var co = 0
var max = 1
var num = 100//ボタンの数
var margin = 40//ボタン間の距離
var div1 = document.getElementById("div1")
function next() {
if (co == max) {
co = 0
if (vec == 1 || vec == 3) { max++ }
vec++;
if (vec > 3) { vec = 0 }
}
co++
if (vec == 0) {
y++
} else if (vec == 1) {
x++
} else if (vec == 2) {
y--
} else if (vec == 3) {
x--
}
}
for (var i = 0; i < num; i++) {
var b = document.createElement("button")
b.innerText = "" + i
b.style.position = "absolute"
b.style.left = window.innerWidth / 2 + x * margin + "px"
b.style.top = window.innerHeight / 2 + y * margin + "px"
b.style.backgroundColor="rgb("+(250-i)+",250,100)"
div1.appendChild(b)
next()
}
</script>
何に使えるかはわかりません