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