reinitialize grid on window resize
This commit is contained in:
		
							parent
							
								
									239457b02c
								
							
						
					
					
						commit
						e6f1f6c4ef
					
				
					 1 changed files with 50 additions and 28 deletions
				
			
		|  | @ -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(); | ||||
| }); | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue