如何在8×8网格中移动图形对象？附网格实现代码

Hey there! Let's walk through how to add movement to your blue circle on that 8x8 grid you've already built. Here's a step-by-step breakdown with code examples tailored to your existing setup:

The core idea is to track the circle's position, update that position when a movement trigger occurs, and then redraw the scene to reflect the new position.

Step 1: Track the Circle's Position #

First, add class-level variables to store where your circle is on the grid. Using grid coordinates (0-7 for an 8x8 grid) makes it easier to manage boundaries:

// Grid coordinates (0-7 for 8x8 grid)
private int circleGridX = 0; // Starting X position
private int circleGridY = 0; // Starting Y position
private final int CELL_SIZE = 50; // Matches your grid's 50px cell size

Step 2: Create a Reusable Circle Drawing Method #

Extract the circle-drawing logic into a separate method so you can call it whenever you need to redraw:

private void drawBlueCircle(Graphics g) {
    // Convert grid coordinates to pixel coordinates (center the circle in the cell)
    int centerX = circleGridX * CELL_SIZE + CELL_SIZE / 2;
    int centerY = circleGridY * CELL_SIZE + CELL_SIZE / 2;
    int radius = CELL_SIZE / 2 - 5; // Leave a small gap from cell edges
    
    g.setColor(Color.BLUE);
    g.fillOval(centerX - radius, centerY - radius, radius * 2, radius * 2);
}

Step 3: Update Your Paint Logic #

Integrate the circle drawing into your existing grid-rendering code. This ensures the entire scene (grid + circle) redraws whenever you call repaint():

@Override
public void paint(Graphics gBoard) {
    // Draw your existing 8x8 grid
    gBoard.setColor(Color.LIGHT_GRAY);
    gBoard.fillRect(0, 0, 400, 400);
    
    for (int k = 0; k <= 300; k += 100) {
        for (int l = 0; l <= 300; l += 100) {
            gBoard.clearRect(k, l, 50, 50);
        }
    }
    
    for (int k = 50; k <= 350; k += 100) {
        for (int l = 50; l <= 350; l += 100) {
            gBoard.clearRect(k, l, 50, 50);
        }
    }
    
    // Draw the blue circle on top of the grid
    drawBlueCircle(gBoard);
}

Step 4: Add Movement Triggers (e.g., Keyboard Controls) #

Let's use keyboard arrow keys to move the circle. Add a key listener to your component to handle input:

// Add this in your component's constructor or initialization method
public YourComponentName() {
    setFocusable(true); // Allow the component to receive keyboard input
    addKeyListener(new KeyAdapter() {
        @Override
        public void keyPressed(KeyEvent e) {
            // Update position based on key press, with boundary checks to stay on the grid
            switch (e.getKeyCode()) {
                case KeyEvent.VK_UP:
                    if (circleGridY > 0) {
                        circleGridY--;
                        repaint(); // Redraw to show new position
                    }
                    break;
                case KeyEvent.VK_DOWN:
                    if (circleGridY < 7) {
                        circleGridY++;
                        repaint();
                    }
                    break;
                case KeyEvent.VK_LEFT:
                    if (circleGridX > 0) {
                        circleGridX--;
                        repaint();
                    }
                    break;
                case KeyEvent.VK_RIGHT:
                    if (circleGridX < 7) {
                        circleGridX++;
                        repaint();
                    }
                    break;
            }
        }
    });
}

Key Notes #

• Avoid Ghosting: Calling repaint() ensures the entire grid redraws, which covers up the old circle position so you don't get leftover graphics.
• Boundary Checks: The if statements make sure the circle never moves outside the 8x8 grid (0 ≤ X/Y ≤ 7).
• Coordinate Flexibility: If you prefer pixel coordinates instead of grid coordinates, you can adjust the variables and movement logic to add/subtract CELL_SIZE directly.

内容的提问来源于stack exchange，提问作者Kasey