Good afternoon, ladies and gentlemen! I wrote here the implementation of Convey's "Life" curve to match his skill, everything looks working, but in fact, when you press the button, the browser hangs and no longer comes to life. How many did not look, did not find why this happens. Thank you in advance for the tip and advice! God bless you!)

<div id="grid"></div> <button id="next">Следующее поколение</button> <script type="text/javascript"> //Parameter of the Game var height = 9, width = 9; //Utilities function elt(name, type) { var elt = document.createElement(name); if (type) elt.type = type; return elt; } function boolFromElt(elt) { return elt.checked; } function gridFromTable(element) { var grid =[]; var children = element.childNodes; if(!children) return for(var i = 0; i < children.length; i++){ var row = []; for(var j = 0; j < children[i].childNodes.length; j++) { var bool = boolFromElt(children[i].childNodes[j]); row.push(bool); } grid.push(row); } return grid; } //MAIN LOGIC //Start population function startGrid(width, height) { if (!grid) var grid = elt("table"); for (var i = 0; i < height; i++) { var row = elt("tr"); for (var j = 0; j < width; j++) { var point = elt("input", "checkbox"); if (Math.random() < 0.5) { point.checked = true; } else point.checked = false; row.appendChild(point); } grid.appendChild(row); } document.body.appendChild(grid); } //Checking the neighboors function countNeighboors(grid, y, x) { var count = 0; var pointY = y; var pointX = x; for (y = y - 1; y <= y + 2; y++){ for (x = x - 1; x <= x + 2; x ++){ if (y != pointY && x != pointX && y >= 0 && x >= 0 && y <= grid.length && x <= grid[y].length){ counter(y,x); } } } function counter(y, x) { if (grid[y][x] == true) { count += 1; } } return count; } //Massive of neighbors function neighboorsGrid(grid) { var total = []; for (var i = 0; i < grid.length; i ++) { var row = []; for (var j = 0; j < grid[i].length; j++) { row.push(countNeighboors(grid, i, j)); } total.push(row); } return total; } //Update table function updateTable(table, neighboorsGrid) { var children = table.childNodes; for (var i = 0; i < children.length ; i ++) { for (var j = 0; j < children[i].length; j++) { if (children[i][j].checked == false) { if (neighboorsGrid[i][j] == 3) { children[i][j].checked = true; } } else { if (neighboorsGrid[i][j] < 2 || neighboorsGrid[i][j] > 3) { children[i][j].checked = false; } } } } } // MAIN TURN FUNCTION function turn(table) { var grid = gridFromTable(table); var neighboors = neighboorsGrid(grid); updateTable(table, neighboorsGrid); } // Event Listener startGrid(width, height); document.querySelector("#next").addEventListener("click", function() { turn(document.querySelector("table")); }) </script>
  • And what does the debugger say? Well, along the way, if neighboorsGrid is a function, then why are you trying to refer to it as an array? - Yaant

1 answer 1

If you still need an answer:

The problem lies in the countNeighboors function, and specifically in the for loops.

For example, in the first of them you use the following condition: (y <= y + 2), but by definition it is always true and the program cannot get out of the cycle in any way.

That is, you need to replace the names of the counters so that they do not coincide with other names and are not modified unintentionally.