reinitialize grid on window resize

content/hypno/hex/hex.js

@@ -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);
+var width;
-for (var i = 0; i < width; ++i) {
+var height;
-    cells[i] = new Array(height);
+var cells;
-    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");
 
-        spiral = document.createElement("img");
+function initialize() {
-        spiral.classList.add("spiral");
+    width = Math.ceil(window.innerWidth / cellsize) + 1;
-        spiral.src = "spiral.svg";
+    height = Math.ceil(window.innerHeight / (cellsize*Math.sqrt(3)/2)) + 1;
-        cells[i][j].appendChild(spiral);
 
-        hex = document.createElement("img");
+    cells = new Array(width);
-        hex.classList.add("hex");
+    for (var i = 0; i < width; ++i) {
-        hex.src = "hex.svg";
+        cells[i] = new Array(height);
-        cells[i][j].appendChild(hex);
+        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";
+            spiral = document.createElement("img");
-        cells[i][j].style.left = xCoord(i, j)*cellsize + "px";
+            spiral.classList.add("spiral");
-        cells[i][j].style.bottom = yCoord(i, j)*cellsize + "px";
+            spiral.src = "spiral.svg";
-        grid.appendChild(cells[i][j]);
+            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) {
+initialize();
-    for (var j = 0; j < height; ++j) {
-        if (Math.floor(Math.random()*2) === 0) {
-            kill(i, j);
-        }
-    }
-}
 
 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();
+});