Unable to move a shape in processing - processing

Question

I am attempting to create a movable entity who can move left and right on a map. I have a map that sets the initial location of the entity but once the 'a' or 'd' keys are pushed, the character moves only slightly then resets to its initial location once the key is released. I have a Boolean variable "playerIsSpawned" to ensure that the character's location is only set in that location once, however this didn't seem to fix anything. What is causing this and how can I fix it?
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);
}

Answer 1

You declared playerIsSpawned inside drawMap. That'll get reset to false every time through there.
Also, consider defining the keyPressed() at the top level (same as draw and setup, and getting rid of that call to keyPressed() inside your draw loop.