I have been playing around with a map building tool. I started separating out some of the higher functions (e.g. draw, grow, seed) into separate buttons. All the buttons work except clear. The clear button is supposed to fire an event to the clear function, but it doesn't. The button click is caught by a breakpoint, but the clear function won't work. I tried calling different functions from the clear button and they all worked. I can write sequences of javascript like "grow(); draw();" and it works. I even created a new function "other" just to redirect to the clear function. Unbelievably that worked. I have no idea why my code will not let me call the clear function from the clear button.
<html>
<head>
<style>
canvas {background-color:black;}
</style>
<script>
var dim = 400;
var pixel = 1;
var heights;
var colors;
var ctx;
function loadAll()
{
var can = document.getElementById("map");
ctx = can.getContext("2d");
can.style.width = (dim*pixel)+"px";
can.style.height = (dim*pixel)+"px";
can.width=dim*pixel;
can.height=dim*pixel;
colors = new Object();
for(let i=0;i<5;i++)
{
colors[i]="rgb("+(25+i*25)+","+(25+i*25)+",255)"
}
for(let i=0;i<5;i++)
{
colors[i+5]="rgb("+(255-(i*5))+","+(255-(i*12))+","+(170-(i*20))+")"
}
for(let i=0;i<5;i++)
{
colors[i+10]="rgb("+(185-(i*24))+","+(218-(i*11))+","+(69-(i*6))+")"
}
for(let i=0;i<5;i++)
{
colors[i+15]="rgb("+(153+(i*20))+","+125+","+45+")"
}
for(let i=0;i<5;i++)
{
colors[i+20]="rgb("+(153+(i*4))+","+(125-(i*18))+","+(45+(i*4))+")"
}
for(let i=0;i<5;i++)
{
colors[i+20]="rgb("+(171+(i*4))+","+(34+(i*32))+","+(27+(i*33))+")"
}
colors[5]="rgb(150,150,250)";
clear();
draw();
}
function other()
{
clear();
}
function clear()
{
heights = new Array(dim);
for(let i=0;i<dim;i++)
{
heights[i]=new Array(dim);
for(let y=0;y<dim;y++)
{
heights[i][y]=0;
}
}
draw();
}
function seed()
{
clear();
var fill=.01;
for(let x=0;x<dim;x++)
{
for(let y=0;y<dim;y++)
{
var r = Math.random();
if(r>(1-fill))
{
heights[x][y]=1;
}
else if(r<fill)
{
heights[x][y]=-1;
}
else
{
heights[x][y]=0;
}
}
}
draw();
}
function grow(variability)
{
next = new Array(dim);
for(let x=0;x<dim;x++)
{
next[x]=new Array(dim);
for(let y=0;y<dim;y++)
{
next[x][y]=0;
}
}
for(let x=0;x<dim;x++)
{
for(let y=0;y<dim;y++)
{
if(heights[x][y]==0)
{
continue;
}
next[x][y]+=heights[x][y];
var dir=0;
if(next[x][y]>0)
{
next[x][y]+=1;
dir=1;
}
if(next[x][y]<0)
{
next[x][y]-=1;
dir=-.5;
}
if(x>0)
{
if(y>0 && heights[x-1][y-1]==0 && Math.random()<variability)
{
next[x-1][y-1]+=dir;
}
if(y<dim-1 && heights[x-1][y+1]==0 && Math.random()<variability)
{
next[x-1][y+1]+=dir;
}
if(heights[x-1][y]==0 && Math.random()>variability)
{
next[x-1][y]+=dir;
}
}
if(x<dim-1)
{
if(y>0 && heights[x+1][y-1]==0 && Math.random()<variability)
{
next[x+1][y-1]+=dir;
}
if(y<dim-1 && heights[x+1][y+1]==0 && Math.random()<variability)
{
next[x+1][y+1]+=dir;
}
if(heights[x+1][y]==0 && Math.random()>variability)
{
next[x+1][y]+=dir;
}
}
if(y>0 && heights[x][y-1]==0 && Math.random()>variability)
{
next[x][y-1]+=dir;
}
if(y<dim-1 && heights[x][y+1]==0 && Math.random()>variability)
{
next[x][y+1]+=dir;
}
//maximums
if(next[x][y]<-5)
{
next[x][y]=-5;
}
if(next[x][y]>20)
{
next[x][y]=20;
}
if(next[x][y]!=heights[x][y])
{
var a=0;
}
}
}
heights=next;
}
function draw()
{
for(let x=0;x<dim;x++)
{
for(let y=0;y<dim;y++)
{
ctx.fillStyle = colors[heights[x][y]+5];
ctx.fillRect(x*pixel,y*pixel, pixel, pixel);
}
}
}
var dragType = 0;
function drag(e)
{
x=e.layerX;
y=e.layerY;
output.innerHTML="(x,y): ("+x+", "+y+") Type: "+dragType+" @ "+heights[x][y];
if(dragType==0)
{
return;
}
heights[x][y]+=dragType;
}
function down(e)
{
if(e.button==0)
{
dragType=1;
}
else
{
dragType=-1;
}
x=e.layerX;
y=e.layerY;
output.innerHTML="(x,y): ("+x+", "+y+") Type: "+dragType+" @ "+heights[x][y];
}
function up(e)
{
dragType=0;
x=e.layerX;
y=e.layerY;
output.innerHTML="(x,y): ("+x+", "+y+") Type: "+dragType+" @ "+heights[x][y];
draw();
}
</script>
</head>
<body onload="loadAll()">
<button onclick="other()">Clear</button>
<button onclick="seed()">Seed</button>
<button onclick="grow(.85); draw();">Grow</button>
<button onclick="grow(.85)">Grow ONLY</button>
<button onclick="draw()">Draw</button><br>
<canvas id="map" onmousemove="drag(event)" onmousedown="down(event)" onmouseup="up(event)"></canvas><br>
<p id="output"></p>
</body>
</html>
