Recently, I embarked on a coding adventure to recreate Conway's Game of Life using JavaScript. While my code logic appears sound and each function operates correctly on its own, the final outcome I desire remains elusive. My implementation involves an array named grid which holds data on cell values (alive or dead) within the game. To determine the number of live neighbors for each cell, I check all 8 surrounding cells iteratively. However, at a certain point in my program execution, the values stored in the grid seem to reset unexpectedly. This unexpected behavior has led me to wonder if the issue lies in the JavaScript environment itself.
<body>
<style>
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
}
canvas {
background: #FFFFFF;
display: block;
margin: 0 auto;
}
</style>
<canvas id="canvas" style="border:1px solid #000000;"></canvas>
</body>
<!-- The script content goes here -->