Can you tell me why this loop is going forever?-CodePudding

Hello I am trying to make path finding in js. I have a path finding algoritm, but it's in javascript and its going forever. Can you tell me what is wrong here?

While loop should stop at given point. But it's going forever.

1,6 is a point to search for. Starts at 10,7

Can you help me solving this issue? I think it's because of issue with reloading javascirpt code.

var example = document.getElementById('my_Canvas');
var context = example.getContext('2d');
var w = 570,
  h = 570;
var rect = 35;
var startx = 10,
  starty = 7;
var points = [
  [3, 7],
  [6, 2]
];
var xy = [];
var accessible = [];
var found = false;


for (var i = 0; i < h / rect; i  ) {
  let width = [];
  for (var j = 0; j < w / rect; j  ) {
    width[j] = 1;
  }
  xy[i] = width;
}


var que = [];
que.push([startx - 1, starty]);
que.push([startx, starty - 1]);
que.push([startx   1, starty]);
var loops = 0;

function asd() {
  if (found == false) {
    while (true) {
      var queEl = que.shift();
      if (queEl[0] == 1 && queEl[1] == 6) {
        found = true;
        break;
      }

      if (xy[queEl[1]][queEl[0]] == null) {
        continue;
      }

      accessible.push([queEl[0], queEl[1]]);
      points.push([queEl[0], queEl[1]]);

      if (queEl[0] - 1 > 0) {
        que.push([queEl[0] - 1, queEl[1]]);
      }
      if (queEl[1] - 1 > 0) {
        que.push([queEl[0], queEl[1] - 1]);
      }
      if (queEl[0]   1 < xy[0].length) {
        que.push([queEl[0]   1, queEl[1]]);
      }
      if (queEl[1]   1 < xy.length) {
        que.push([queEl[0], queEl[1]   1]);
      }
      if (que.length == 0) {
        found = true;
      }


    }
  }
}


for (var i = 0; i < h / rect; i  ) {

  for (var j = 0; j < w / rect; j  ) {
    context.fillStyle = "rgb(255,0,0)";
    context.fillRect(j * 30, i * 30, 50, 50);
    context.fillStyle = "rgb(0,0,0)";
    context.fillRect(j * 30   5, i * 30   5, 40, 40);

    for (var x = 0; x < points.length; x  ) {
      if (j == points[x][0] && i == points[x][1]) {
        context.fillStyle = "rgb(255,0,0)";
        context.fillRect(j * 30, i * 30, 50, 50);
        context.fillStyle = "rgb(150,0,0)";
        context.fillRect(j * 30   5, i * 30   5, 40, 40);
      }
    }

  }
}
asd();

<!doctype html>
<html>

<body>
  <canvas width="570" height="570" id="my_Canvas"></canvas>
</body>

</html>

CodePudding user response：

Answer is that I forget about checking if element is in queue so it won't overload and block. I post this so I won't do this again in javascript. I was 100% sure its because it's some kind of javascript bug.

CodePudding user response：

The problem is that a while loop with the boolean value true inside of it will keep running forever. You will need to add a condition inside the parenthesis of the while loop. When the condition returns false, your loop will stop executing, and your webpage will not stop working.