var start_map = [
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 9, 0, 0, 0, 0, 0, 0],
  [1, 1, 1, 1, 1, 1, 1, 1]
];
var playerX;
var playerY;

function drawPlayer() {
  fill(0);
  rect(playerX, playerY, 50, 50);
}

function drawMap(map) {
  // The x and y do not represent the x and y axis
  // Keep in mind a 2d array is an array of an array
  noStroke();
  var playerIsSpawned = false;

  for (var x = 0; x < map.length; x++) {
    for (var y = 0; y < map.length; y++) {
      // Background
      if (map[y][x] == 0) {
        fill(184, 236, 255);
        rect((10 + 50*x), (10 + 50*y), 50, 50);
      }
      // Ground
      else if (map[y][x] == 1) {
        fill(51, 153, 51);
        rect((10 + 50*x), (10 + 50*y), 50, 50);
      }
      // Player
      else if (map[y][x] == 9) {
        if (playerIsSpawned == false) {
          playerX = (10 + 50*x);
          playerY = (10 + 50*y);
          playerIsSpawned = true;
        }
        fill(184, 236, 255);
        rect((10 + 50*x), (10 + 50*y), 50, 50);
      }
    }
  }
  drawPlayer();
  function keyPressed() {
    if (key == "d") {
      playerX += 5;
    }
    else if (key == "a") {
      playerX -= 5;
    }
  }
  keyPressed();
}

function setup() {
  background(0);
  createCanvas(800, 800);
}

function draw() {
  drawMap(start_map);
}