Height Editor

Raising and lowering a height map. No two tiles should be more than 1 apart

by jzaun

HTML

<div id="board"></div>
<div id="info"></div>
<p>
    Click on the board once to set focus. This lets the keyboard work. Press <strong>S</strong> to make a tile go down, press <strong>W</strong> to make a tile go up.
</p>
<button id="reset">Reset</button>

CSS

#board {
    padding: 20px;
    z-index: -1;
}

.row {
    height: 25px;
}

.cell {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 1px solid black;
    text-align: center;
    line-height: 25px;
    cursor: default;
}

JavaScript

var size = 15
var grid;
var active = {x: -1, y: -1};

var moveDown = function (x, y) {
    if (x-1 >= 0 && Math.abs(grid[x][y] - grid[x-1][y]) > 1) {
        grid[x-1][y] -= 1;
        moveDown(x-1, y);
    }
    if (x+1 < size && Math.abs(grid[x][y] - grid[x+1][y]) > 1) {
        grid[x+1][y] -= 1;
        moveDown(x+1, y);
    }
    if (y-1 >= 0 && Math.abs(grid[x][y] - grid[x][y-1]) > 1) {
        grid[x][y-1] -= 1;
        moveDown(x, y-1);
    }
    if (y+1 < size && Math.abs(grid[x][y] - grid[x][y+1]) > 1) {
        grid[x][y+1] -= 1;
        moveDown(x, y+1);
    }
    if (x-1 >= 0 && y-1 >= 0 && Math.abs(grid[x][y] - grid[x-1][y-1]) > 1) {
        grid[x-1][y-1] -= 1;
        moveDown(x-1, y-1);
    }
    if (x-1 >= 0 && y+1 < size && Math.abs(grid[x][y] - grid[x-1][y+1]) > 1) {
        grid[x-1][y+1] -= 1;
        moveDown(x-1, y+1);
    }
    if (x+1 < size && y-1 >= 0 && Math.abs(grid[x][y] - grid[x+1][y-1]) > 1) {
        grid[x+1][y-1] -= 1;
        moveDown(x+1, y-1);
    }
    if (x+1 < size && y+1 < size && Math.abs(grid[x][y] - grid[x+1][y+1]) > 1) {
        grid[x+1][y+1] -= 1;
        moveDown(x+1, y+1);
    }
}



var moveUp = function (x, y) {
    if (x-1 >= 0 && Math.abs(grid[x][y] - grid[x-1][y]) > 1) {
        grid[x-1][y] += 1;
        moveUp(x-1, y);
    }
    if (x+1 < size && Math.abs(grid[x][y] - grid[x+1][y]) > 1) {
        grid[x+1][y] += 1;
        moveUp(x+1, y);
    }
    if (y-1 >= 0 && Math.abs(grid[x][y] - grid[x][y-1]) > 1) {
        grid[x][y-1] += 1;
        moveUp(x, y-1);
    }
    if (y+1 < size && Math.abs(grid[x][y] - grid[x][y+1]) > 1) {
        grid[x][y+1] += 1;
        moveUp(x, y+1);
    }
    if (x-1 >= 0 && y-1 >= 0 && Math.abs(grid[x][y] - grid[x-1][y-1]) > 1) {
        grid[x-1][y-1] += 1;
        moveUp(x-1, y-1);
    }
    if (x-1 >= 0 && y+1 < size && Math.abs(grid[x][y] - grid[x-1][y+1]) > 1) {
        grid[x-1][y+1] += 1;
        moveUp(x-1, y+1);
    }
    if (x+1 < size && y-1 >= 0 &&...