I am new to JS so this is fairly obvious to experts.
The attached is an excerpt from a longer file I am writing, to help isolate my problem. I have an ant nest 100 x 100 square, with 4 blue square obstacles roughly in the centre, on a white background. Coordinates given by array ob.
Function initialize() runs the initialization, sets obstacles, draws grid.
First Problem: setObstacle() is supposed to confirm the relevant cells setting to "true" but this does not happen. Instead I get the output from the console.log on line 148, following initialize(), stating every cell is "false". Also the range is x: 90-99 and y: 1-99 instead of both being 0-99. I know there is a reason for this but it eludes me. Can someone explain please?
Second problem, the square comes out all blue (obstacle color) instead of showing 4 squares (blue) and the rest in white. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ant11</title>
</head>
<body>
<script>
let _data; // data from previous update
let gridLength = 100;
let grid = [];
let tempGrid = [];
let sq;
//obstacles
let ob = [
[30, 30, 50, 50], // xmin
[41, 41, 61, 61], // xmax
[32, 52, 32, 52], // ymin
[43, 63, 43, 63], // ymax
];
function drawGrid(data) {
let width = 600;
let height = 600;
let gridLength = data.length;
let widthCell = width / gridLength;
let heightCell = height / gridLength;
let canvas = document.getElementById("grid");
if (canvas == null) {
canvas = document.createElement("canvas");
canvas.id = "grid";
canvas.width = width;
canvas.height = height;
document.getElementsByTagName("body")[0].appendChild(canvas);
}
let context = canvas.getContext("2d");
function drawCells() {
for (let i = 0; i < gridLength; i++) {
for (let j = 0; j < gridLength; j++) {
if (_data && _data[i][j] === cellColor(data[i][j])) {
continue;
}
context.clearRect(
i * widthCell,
j * heightCell,
widthCell,
heightCell
);
context.fillStyle = cellColor(data[i][j]);
context.fillRect(
i * widthCell,
j * heightCell,
widthCell,
heightCell
);
}
}
}
drawCells();
if (!_data) {
_data = [];
}
for (let i = 0; i < gridLength; i++) {
_data[i] = [];
for (let j = 0; j < gridLength; j++) {
_data[i][j] = cellColor(data[i][j]);
}
}
}
function updateGrid(data) {
drawGrid(data);
}
let cellColor = function (cell) {
if ((cell.obstacle = true)) {
return "rgb(0, 0, 250)"; //blue
}
if (cell.hasAnt()) {
return;
cell.ant.hasFood ? "rgb(159,248,101)" : "rgb(0,0,0)"; //
green;
black;
} else if (cell.food > 0) {
return "rgba(86,169,46," + Math.pow(cell.food / 10, 0.5) + ")";
} else {
if (cell.pheromone > 0) {
let pheromone = cell.pheromone > 1 ? 1 : cell.pheromone;
return "rgba(17,103,189," + cell.pheromone + ")";
} else return "rgb(250,250,250)"; //white
}
};
function Cell(i, j) {
this.i = i;
this.j = j;
this.ant = null;
this.food = 0;
this.pheromone = 0;
this.obstacle = false;
this.hasAnt = function () {
return this.ant ? true : false;
};
}
function Ant() {
this.hasFood = false;
this.lastSignal = 0;
this.orientation = Math.random() * 90;
}
function initGrids() {
for (let i = 0; i < gridLength; i = i + 1) {
grid[i] = [];
tempGrid[i] = [];
for (let j = 0; j < gridLength; j = j + 1) {
grid[i][j] = new Cell(i, j);
tempGrid[i][j] = new Cell(i, j);
}
}
}
function initialize() {
initGrids();
setObstacle();
drawGrid(
grid.map(function (row) {
return row.map(function (cell) {
return cell;
});
})
);
}
//___________________________________________________________________________
initialize();
// set up whole grid to obstacle = false
for (let i = 0; i < gridLength; i++) {
for (let j = 0; j < gridLength; j++) {
grid[i][j].obstacle = false;
console.log(i, j, grid[i][j].obstacle);
}
}
//____________________________________________________________________________
function setObstacle() {
for (let sq = 0; sq < 4; sq++) {
xmin = ob[0][sq];
xmax = ob[1][sq];
ymin = ob[2][sq];
ymax = ob[3][sq];
console.log(sq, xmin, xmax, ymin, ymax);
for (let i = xmin; i <= xmax; i++) {
for (let j = ymin; j <= ymax; j++) {
grid[i][j].obstacle = true;
console.log(i, j, grid[i][j].obstacle);
}
}
}
}
</script>
</body>
</html>
