reinitialize grid on window resize

This commit is contained in:
xenofem 2020-06-22 00:26:40 -04:00
parent 239457b02c
commit e6f1f6c4ef

View file

@ -1,8 +1,6 @@
var grid = document.getElementById("grid");
var cellsize = 60;
var width = Math.ceil(window.innerWidth / cellsize) + 1;
var height = Math.ceil(window.innerHeight / (cellsize*Math.sqrt(3)/2));
function xCoord(i, j) {
var x = i + j/2;
@ -16,28 +14,53 @@ function yCoord(i, j) {
return Math.sqrt(3)*j/2;
}
var cells = new Array(width);
for (var i = 0; i < width; ++i) {
cells[i] = new Array(height);
for (var j = 0; j < height; ++j) {
cells[i][j] = document.createElement("div");
cells[i][j].classList.add("cell");
cells[i][j].classList.add("alive");
var width;
var height;
var cells;
spiral = document.createElement("img");
spiral.classList.add("spiral");
spiral.src = "spiral.svg";
cells[i][j].appendChild(spiral);
function initialize() {
width = Math.ceil(window.innerWidth / cellsize) + 1;
height = Math.ceil(window.innerHeight / (cellsize*Math.sqrt(3)/2)) + 1;
hex = document.createElement("img");
hex.classList.add("hex");
hex.src = "hex.svg";
cells[i][j].appendChild(hex);
cells = new Array(width);
for (var i = 0; i < width; ++i) {
cells[i] = new Array(height);
for (var j = 0; j < height; ++j) {
cells[i][j] = document.createElement("div");
cells[i][j].classList.add("cell");
cells[i][j].classList.add("alive");
cells[i][j].style.position = "absolute";
cells[i][j].style.left = xCoord(i, j)*cellsize + "px";
cells[i][j].style.bottom = yCoord(i, j)*cellsize + "px";
grid.appendChild(cells[i][j]);
spiral = document.createElement("img");
spiral.classList.add("spiral");
spiral.src = "spiral.svg";
cells[i][j].appendChild(spiral);
hex = document.createElement("img");
hex.classList.add("hex");
hex.src = "hex.svg";
cells[i][j].appendChild(hex);
cells[i][j].style.position = "absolute";
cells[i][j].style.left = xCoord(i, j)*cellsize + "px";
cells[i][j].style.bottom = yCoord(i, j)*cellsize + "px";
grid.appendChild(cells[i][j]);
}
}
for (var i = 0; i < width; ++i) {
for (var j = 0; j < height; ++j) {
if (Math.floor(Math.random()*2) === 0) {
kill(i, j);
}
}
}
}
function cleanup() {
for (var i = width - 1; i >= 0; --i) {
for (var j = height - 1; j >= 0; --j) {
grid.removeChild(cells[i][j]);
}
}
}
@ -197,13 +220,7 @@ function prestonStep() {
}
}
for (var i = 0; i < width; ++i) {
for (var j = 0; j < height; ++j) {
if (Math.floor(Math.random()*2) === 0) {
kill(i, j);
}
}
}
initialize();
setInterval(prestonStep, 1000);
@ -213,3 +230,8 @@ window.onclick = function () {
document.getElementById("controls").style.display = showControls ? "none" : "block";
showControls = !showControls;
}
window.addEventListener('resize', function(event){
cleanup();
initialize();
});