Java | Buffered Image working But Not How I Want and Keybindings doing the same

Question

Background Stuff

---

So I have been working on a Java game for the past 3-4 weeks for a class final project. What it is supposed to do is generate a "map" that the player has to navigate through to get to the "exit" in the bottom right corner (shown as black dot for now). The "map" is randomly generated so that no two are the same and will cause the player to possibly need to use more "tools"(not added yet) than they would like.

Problem

---

1.)The first problem at hand is that I have attempted to make "keybindings" and they compile and don't break the game, when ever the key is pressed the player does not move in the indicated direction.

I know one part of the problem is I do not have boundaries on the "map" due to not knowing how to make them which is causing an out of bounds exception to my array.

The other that coincides with this is that when I repaint() it completely redoes the whole "map" when all I wanted was the player to be moved to the new location while removing any "terrain" that they encounter (not removing terrain till later).

2.) Trying to figure out problem 1 I looked back at one of my previous posts (Rows and columns with multidimensional array java) where this was said by MadProgrammer

Personally, in mapGen, I would create a BufferedImage which was 24*20 wide and 24*20 high, paint all the tiles to it and the in the paintComponent method, paint the image

So I read up on what a BufferedImage does and how it works and tried to implement it into my game. The results where catastrophic. It compiled and ran okay but the outcome was very far away from what I was trying to achieve

Result:

What I was Shooting For:

Code I Added That Did This/Not Working Code

---

The "keybinding":

//I have all imports neccessary
public class gamePanel extends JPanel implements ActionListener, KeyListener
{                                   //added^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    public gamePanel()
    {
        //left out my bounds for shortening reasons
        addKeyListener(this);//added
        setFocusable(true);//added
        setFocusTraversalKeysEnabled(false);//added

    }

    //................................

    public void actionPerformed(ActionEvent e){
        repaint();
    }   
        // below process is repeated for left, right, and down
        //for now just trying to get the player to move
        //not worried about removing terrain just yet
        public void up(){
            if(coords[playerX[pcX]][playerY[pcY-1]] == terrain[floor]){
                playerY[pcY] = playerY[pcY- 1] ;
            }

            if(coords[playerX[pcX]][playerY[pcY]-1] == terrain[dirt]){
                playerY[pcY] = playerY[pcY] - 1;
            }

            if(coords[playerX[pcX]][playerY[pcY]-1] == terrain[stone]){
                playerY[pcY] = playerY[pcY] - 1;
            }

            if(coords[playerX[pcX]][playerY[pcY]-1] == terrain[iron]){
                playerY[pcY] = playerY[pcY] - 1;
            }

            if(coords[playerX[pcX]][playerY[pcY]-1] == terrain[gold]){
                playerY[pcY] = playerY[pcY] - 1;
            }

            if(coords[playerX[pcX]][playerY[pcY]-1] == terrain[diamond]){
                playerY[pcY] = playerY[pcY] - 1;
            }

            if(coords[playerX[pcX]][playerY[pcY]-1] == terrain[emerald]){
                playerY[pcY] = playerY[pcY] - 1;
            }

            //................
            public void keyTyped(KeyEvent e){}//would not compile without these two lines
            public void keyReleased(KeyEvent e){}

        }

}

---

Code for Buffered Image:

    //player coords
    int pcY = 1;
    int pcX = 1;

    int[] playerX = new int[pcX + 1];
    int[] playerY = new int[pcY + 1]; // x,y for the player
    //^^^^pretty sure this is the wrong way to make array start at 1

        @Override
    public void paintComponent(Graphics g)//what will paint each 20x20 square on the grid what it is assigned
    {

        super.paintComponent(g);

        Image img = drawmap();//draw the below bufferedimage
        g.drawImage(img, 520, 520, this);

        g.setColor(Color.red);//creates the player "model"
        g.fillOval((pcX*20),(pcY*20),20,20);

        g.setColor(Color.black);
        g.fillOval((23*20),(23*20),20,20);

    }//end paintComponent

private Image drawmap(){

        BufferedImage map = new BufferedImage(width*20, height*20, BufferedImage.TYPE_INT_RGB);
        Graphics g = map.getGraphics();


    for(int x = 1; x < width; x++)
        {
            for(int y = 1; y < height; y++)
            {   
                if(coords[x][y] == terrain[floor])// paints floor color at marked coordinates
                {
                    g.setColor(new Color(249,249,249));
                    g.fillRect((x*20), (y*20), 20, 20); 

                }
                //^^^^same proccess for all the rest of the terrain

            }
        }

    return map; 
}

Notes

---

If all explanations could please be but into layman's terms that would be fantastic because engineer lingo confuses me.

Also if this needs to be two different posts please let me know without being rude about it.

Here is a link to code I have that compiles and generates what I want but keybinding does not work(if you want a look): https://www.dropbox.com/sh/78mj9aes2c0598a/AADZoJWlw79I5Z0Ub3uon6ZVa?dl=0

Here is a link to "working" code where I attempted the BufferedImage(if you want to look):https://www.dropbox.com/sh/hujm1ztrttkdq4f/AAB9j9P3PvPQpRNi_ckzTHOha?dl=0