Navigating 2D grid with arrows

kimelbert

I have a 2D grid with each cell being a Spot object. Is it possible to navigate the cells with arrows?

`

 var openSet = [];
 var closedSet = [];
 var start;
 var end;
 var w;
 var h;

 var cols = 5; 
 var rows = 5;
 var grid = new Array(cols);

 function Spot(i, j) {
     this.x = i;
     this.y = j;
     this.f = 0;
     this.g = 0;
     this.h = 0;

  this.show = function() {
      fill(255);
      stroke(0);
      rect(this.x * w, this.y * h, w - 1, h - 1);
  }

}

 function setup() {
     createCanvas(400, 400);

w = width / cols;
h = height / rows;

for (var i = 0; i < cols; i++) {
    grid[i] = new Array(rows);
}

for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
        grid[i][j] = new Spot(i, j);
    }
}


start = grid[0][0];
end = grid[cols - 1][rows - 1];

openSet.push(start);

}

 function draw() {
     background(0);

     for (var i = 0; i < cols; i++) {
         for (var j = 0; j < rows; j++) {
             grid[i][j].show();
         }
     }

}`

I'm sorry for the bad format. Also I attached an image grid. I'd appreciate any guidance, please. Thank you.

kfrajer

What code do you have? The question is not if it is possible but more like how to do it using your current code :-B

Kf

kfrajer

Is this homework? Each cell is a spot. If you want to navigate, you need to create a spot that is unique, for example, it has different color, so you can differentiate it from your current array of spots. Then you need to become familiar with keyPressed. Lastly, you need to check for boundaries, so the position is updated only if you are inside the grid.

Kf

var openSet = [];
var closedSet = [];
var start;
var end;
var w;
var h;

var cols = 5; 
var rows = 5;
var grid = new Array(cols);
var sp;

function Spot(i, j, c) {
  this.x = i;
  this.y = j;
  this.f = 0;
  this.g = 0;
  this.h = 0;
  this.c=c;

  this.show = function() {
    fill(this.c);
    stroke(0);
    rect(this.x * w, this.y * h, w - 1, h - 1);
  }
}



function setup() {
  createCanvas(400, 400);

  w = width / cols;
  h = height / rows;

  for (var i = 0; i < cols; i++) {
    grid[i] = new Array(rows);
  }

  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      grid[i][j] = new Spot(i, j,255);
    }
  }
  sp=new Spot(0,0,150);


  start = grid[0][0];
  end = grid[cols - 1][rows - 1];

  openSet.push(start);
}


function draw() {
  background(0);

  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      grid[i][j].show();
    }
  }
  sp.show();
}

function keyPressed() {
  if (keyCode === LEFT_ARROW ) {
    if(sp.x>0) sp.x=sp.x-1;
  } else if (keyCode === RIGHT_ARROW) {
    if(sp.x<cols-1) sp.x=sp.x+1;
  }
}

kimelbert

Thanks so much!