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,8 +14,16 @@ 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;
+var cells;
+
+function initialize() {
+    width = Math.ceil(window.innerWidth / cellsize) + 1;
+    height = Math.ceil(window.innerHeight / (cellsize*Math.sqrt(3)/2)) + 1;
+
+    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");
@@ -39,6 +45,23 @@ for (var i = 0; i < width; ++i) {
             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]);
+        }
+    }
 }
 
 function prebirth(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();
+});