Hello, I am a newcomer to Javascript, a hobbyist, and trying to write my first ant-nest program, as below.
I am getting the error: “Uncaught TypeError: Cannot set property ‘undefined’ of undefined
at moveAnt…” and it refers to lines 130 and 161. Line 130 is “grid[x][y] = “ANT” towards bottom of function **moveAnt()**draw_grid**update_grid
The graphic generates a 100×100 field with food square in the centre, and a randomly placed nest. That is as far as I have been able to get it. I was hoping to map out the ant’s progress towards the food, and then introduce an array of ants, etc., but that is in the future. Can anyone help me with the above problem? Sorry I wasn’t able to copy with the line numbers.
`<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>AntsNest01</title>
<datagrid></datagrid>
<script src=”
</head>
<body>
<script>
//____________
function draw_grid(data, colors) {
var width = 1200;
var height = 1200;
var grid_length = data.length;
var svg = d3.select(‘body’).append(‘svg’)
.attr(‘width’, width)
.attr(‘height’, height);
var rw = Math.floor(width / grid_length);
var rh = Math.floor(height / grid_length);
var g = svg.selectAll(‘g’)
.data(data)
.enter()
.append(‘g’)
.attr(‘transform’, function (d, i) {
return ‘translate(0, ‘ + (width / grid_length) * i + ‘)’;
});
g.selectAll(‘rect’)
.data(function (d) {
return d;
})
.enter()
.append(‘rect’)
.attr(‘x’, function (d, i) {
return (width / grid_length) * i;
})
.attr(‘width’, rw)
.attr(‘height’, rh)
.attr(‘class’, function (d) {
return d;
});
if (!colors) {
d3.selectAll(“FIELD”).style(“fill”, “LightGrey”);
d3.selectAll(“NEST”).style(“fill”, “Black”);
d3.selectAll(“ANT”).style(“fill”, “Brown”);
d3.selectAll(“FOOD”).style(“fill”, “Green”);
} else {
for (var i = 0; i < colors.length; i = i + 2) {
d3.selectAll(“.” + colors[i]).style(“fill”, colors[i + 1]);
}
}
}
//=============================================
function update_grid(data, colors) {
var grid_length = data.length;
d3.select(‘svg’).selectAll(‘g’)
.data(data)
.selectAll(‘rect’)
.data(function (d) {
return d;
})
.attr(‘class’, function (d) {
return d;
});
if (!colors) {
d3.selectAll(“FIELD”).style(“fill”, “LightGrey”);
d3.selectAll(“NEST”).style(“fill”, “Black”);
d3.selectAll(“ANT”).style(“fill”, “Brown”);
d3.selectAll(“FOOD”).style(“fill”, “Green”);
} else {
for (var i = 0; i < colors.length; i = i + 2) {
d3.selectAll(“.” + colors[i]).style(“fill”, colors[i + 1]);
}
}
}
//=======================================================================
function get_random_int(min, max) {
return Math.floor(Math.random() * (max – min + 1)) + min;
}
//____________
function init_grid() {
// assign all cells to FIELD
for (var i = 0; i < grid_length; i++) {
grid[i] = [];
for (var ii = 0; ii < grid_length; ii++) {
grid[i][ii] = “FIELD”;
}
}
// generate NEST overlays FIELD
xNest = get_random_int(0, grid_length – 1);
yNest = get_random_int(0, grid_length – 1);
grid[xNest][yNest] = “NEST”;
console.log(`${xNest} ${yNest}`);
// generate FOOD overlays FIELD
for (var i = bF; i <= dF; i++) {
for (var ii = aF; ii <= cF; ii++) {
grid[i][ii] = “FOOD”;
}
}
}
//________________
function moveAnt() {
switch (direction = Math.random()) {
case (direction < 0.25):
x = xP + Math.floor(Math.random() * 3 + 1);
break;
case (0.25 <= direction && direction < 0.50):
x = xP – Math.floor(Math.random() * 3 + 1);
break;
case (0.50 <= direction && direction < 0.75):
y = yP + Math.floor(Math.random() * 3 + 1);
break;
case (0.75 <= direction && direction < 1.00):
y = yP – Math.floor(Math.random() * 3 + 1);
break;
console.log(“moveAnt: x ” + x + ” y ” + y);
}
(x < 0) ? (x = 0) : (x > grid_length – 1) ? (x = grid_length – 1) : null;
(y < 0) ? (y = 0) : (y > grid_length – 1) ? (y = grid_length – 1) : null;
console.log(“moveAnt: x ” + x + ” y ” + y);
grid[x][y] = “ANT”;
}
//_______________
function get_random_int(min, max) {
return Math.floor(Math.random() * (max – min + 1)) + min;
}
// _________________
function contactWithFood(aF, bF, cF, dF, x, y) {
if ((aF <= x) && (x <= cF) && (bF <= y) && (y <= dF)) {
return true;
}
}
//++++++++++++++++++++++++++++++++++++++++++++++
var grid_length = 100;
var grid = [];
var temp_grid = [];
var nest = [];
var aF = 46;
var bF = 46;
var cF = 55;
var dF = 55;
var xP;
var yP;
var x, y;
var xNest, yNest;
var foodFount = false;
init_grid();
draw_grid(grid, [“FIELD”, “LightGrey”, “NEST”, “Black”, “ANT”, “Brown”, “FOOD”, “Green”]);
xP = xNest;
yP = yNest;
moveAnt();
draw_grid(grid, [“FIELD”, “LightGrey”, “NEST”, “Black”, “ANT”, “Brown”, “FOOD”, “Green”]);
//init_grid();
update_grid(data, colors);
// setInterval(moveAnt, 10);
</script>
</body>
</html>