Create 2D game map with images

simple grid and movement

float playerPosX,playerPosY,x,y,rectWidth,rectHeight;
int rows,cols;
boolean keyDown;
void setup(){
  size(400,400);
  cols = 10;
  rows = 10;
  rectWidth = width / cols;
  rectHeight = height / rows;
};

void draw(){
  logic();
  for(int i=0;i<rows;i++){
    for(int j=0;j<cols;j++){
      stroke(0);
      fill(255,0,0);
      rect(x+rectWidth*i,y+rectHeight*j,rectWidth,rectHeight);
    }
  }
  
  fill(255);
  rect(playerPosX,playerPosY,rectWidth,rectHeight);
  
  fill(0);
  text(playerPosX/rectWidth + " ," + playerPosY/rectHeight,10,10);
};

void logic(){
  if(keyPressed&&keyCode == 39&&!keyDown){
    if(playerPosX<width - rectWidth)playerPosX += rectWidth;
    keyDown = true;
  }
  if(keyPressed&&keyCode == 37&&!keyDown){
    if(playerPosX>0)playerPosX -= rectWidth;
    keyDown = true;
  }
  if(keyPressed&&keyCode == 38&&!keyDown){
    if(playerPosY>0)playerPosY -= rectHeight;
    keyDown = true;
  }
  if(keyPressed&&keyCode == 40&&!keyDown){
    if(playerPosY<height - rectHeight)playerPosY += rectHeight;
    keyDown = true;
  }
  
  if(!keyPressed)keyDown = false;
};


You have to release the keys and press again to move;

take note of how the position of your character is calculated in the text function. This should give you a hint as to how to test if your character is moving to a legal tile.
this is the part that needs to be amended and you would need to test if tile at playerPosX+rectWidth is legal. Account for the direction you are heading in.

if(playerPosX<width - rectWidth)playerPosX += rectWidth;

if you are using a 2d array to store your tile config, then you could just call the calculation in the text on your predicted value and voila, if legal increment, else do nothing.