Graphic Only Moves 1 Pixel to the Right With KeyListener

Question

I'm fairly new to Java programming and I'm working on my first 2D game. I followed one of Oracle's tutorials on Key Listeners in order to figure out how to make my player move with the WASD keys. The example already had a mouse listener. I decided to remove the mouse listener and add a KeyListener. I added the a KeyListener for D which moves my graphic to the right. However, my graphic only moves 1 coordinate to the right rather than updating the new position of the square, and moving it in a continuous loop whenever the D key is pressed. I'm using paint component to draw my image.

Here is my class:

import javax.swing.SwingUtilities;
import java.awt.event.KeyListener;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.BorderFactory;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.event.KeyEvent;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseMotionListener;
import java.awt.event.MouseMotionAdapter;

public class PaintComponent {

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
            }
        });
    }

    private static void createAndShowGUI() {
        System.out.println("Created GUI on EDT? "
                + SwingUtilities.isEventDispatchThread());
        JFrame f = new JFrame("Swing Paint Demo");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.add(new MyPanel());
        f.pack();
        f.setVisible(true);
    }

}

class MyPanel extends JPanel {

    private int squareX = 50;
    private int squareY = 50;
    private int squareW = 20;
    private int squareH = 20;
    public int posX = squareX;
    public int posY = squareY;

    public MyPanel() {
        setFocusable(true);
        requestFocusInWindow();

        setBorder(BorderFactory.createLineBorder(Color.black));

        addKeyListener(new KeyListener() {
            @Override
            public void keyTyped(KeyEvent e) {
                // TODO Auto-generated method stub

            }

            @Override
            public void keyPressed(KeyEvent e) {
                // TODO Auto-generated method stub
                int keyCode = e.getKeyCode();

                if (keyCode == KeyEvent.VK_D) {

                    moveSquareRight(posX);

                } else {
                    e.consume();
                }
            }

            @Override
            public void keyReleased(KeyEvent e) {
                // TODO Auto-generated method stub
                int keyCode = e.getKeyCode();
                e.consume();

            }
        });
        /*
         * addMouseListener(new MouseAdapter() { public void
         * mousePressed(MouseEvent e) { moveSquare(e.getX(),e.getY()); } });
         * 
         * addMouseMotionListener(new MouseAdapter() { public void
         * mouseDragged(MouseEvent e) { moveSquare(e.getX(),e.getY()); } });
         */

    }

    private void moveSquareRight(int x) {
        int OFFSET = 1;

            if (squareX == x) {

                repaint(squareX, squareY, squareW + OFFSET, squareH + OFFSET);
                squareX = x + 1;
                repaint(squareX, squareY, squareW + OFFSET, squareH + OFFSET);
            }

        }



    public Dimension getPreferredSize() {
        return new Dimension(250, 200);
    }

    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawString("This is my custom Panel!", 10, 20);
        g.setColor(Color.RED);
        g.fillRect(squareX, squareY, squareW, squareH);
        g.setColor(Color.BLACK);
        g.drawRect(squareX, squareY, squareW, squareH);
    }

}

Answer 1

I'm thinking of turning posX into an array and adding a for loop to it,

No you don't need a loop.

moveSquareRight(posX);

There is no need to pass posX as a parameter since it is a class variable every method has access to it.

Although posX doesn't change and it therefore stays in the same spot.

So update posX.

if (squareX == x) {
    repaint(squareX, squareY, squareW + OFFSET, squareH + OFFSET);
    squareX = x + 1;
    repaint(squareX, squareY, squareW + OFFSET, squareH + OFFSET);
}

You are making the above code too complicated. Try something like:

posX++;
repaint();

You don't want to specify the rectangle to repaint() because the old painting will not be cleared before the rectangle is painted in its new position.

You should also check out Motion Using the Keyboard for an approach the moves a component.