I have developed a height map editor that functions as a grid of numbers, allowing users to adjust any location by +/- 1. The editor enforces a rule where there can only be a difference of 1 between any of the adjacent 8 tiles.
To achieve this functionality, I have implemented a recursive function. The function examines its 8 neighbors and adjusts them accordingly. If any adjustments are made, the function is then called on all 8 neighboring tiles.
However, I am encountering "Uncaught RangeError: Maximum call stack size exceeded" errors after experimenting for a while, and I am struggling to identify the source of these errors. I have taken precautions to ensure I do not attempt to access nonexistent grid locations...
The function is as follows:
var moveDown = function (x, y) {
var updated = false;
if (x-1 >= 0 && Math.abs(grid[x][y] - grid[x-1][y]) > 1) {
grid[x-1][y] -= 1;
updated = true;
}
// More conditional statements for adjusting neighbors
// Recursive calls for all updated neighbors
}
I have created a demonstration on JSFiddle. Additionally, I have included an inline version for easy reference.
// JavaScript code for the editor
// CSS code for styling the editor
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="board"></div>
<div id="info"></div>
<p>
Interaction instructions and functionalities description
</p>
<button id="reset">Reset</button>