JavaFX贪吃蛇游戏：解决Timeline运行时历史绘制痕迹未清除问题

核心原因 #

痕迹残留是因为每次绘制新蛇身时未清除画布上的旧内容，导致图像持续叠加；同时原代码执行顺序有误——先绘制蛇再移动位置，进一步加重了叠加问题。

解决步骤 #

1. 调整执行顺序：先更新蛇的位置，再清空画布，最后绘制新蛇身
2. 清空画布：每次绘制前用背景色填充整个画布，覆盖旧内容
3. 优化蛇身初始化：让初始蛇身节点依次排列，避免重叠

修改后的完整代码 #

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.util.Duration;
import java.awt.Point;

public class Main extends Application {

    int sceneX = 600;
    int sceneY = 400;
    ArrayList<Point> snake = new ArrayList<>();
    private GraphicsContext gc;

    private void run(GraphicsContext gc) {  
        // 更新蛇的位置
        for (int i = snake.size()-1; i >= 1; i--) {
            snake.get(i).x = snake.get(i - 1).x;
            snake.get(i).y = snake.get(i - 1).y;
        }
        snake.get(0).x++;
        
        // 用白色背景清空画布
        gc.setFill(Color.WHITE);
        gc.fillRect(0, 0, sceneX, sceneY);
        
        // 绘制新蛇身
        drawSnake(gc);
    }

    private void drawSnake(GraphicsContext gc) {
        gc.setFill(Color.GREEN);
        // 遍历整个蛇身列表，适配后续蛇变长的需求
        for (Point segment : snake) {
            gc.fillRoundRect(segment.getX(), segment.getY(), 5, 5, 3, 3);
        }
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("SNAKE");
        Group root = new Group();
        Canvas canvas = new Canvas(sceneX, sceneY);
        root.getChildren().add(canvas);
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
        gc = canvas.getGraphicsContext2D();

        // 初始化蛇身：让三个节点依次左移排列，避免重叠
        for (int i = 0; i < 3; i++) {
            snake.add(new Point(300 - i*5, 300));
        }
        
        Timeline timeline = new Timeline(new KeyFrame(Duration.millis(130), e -> run(gc)));
        timeline.setCycleCount(Animation.INDEFINITE);
        timeline.play();   
    }

    public static void main(String[] args) {
        launch(args);
    }
}

关键修改说明 #

• 画布清空：用背景色填充替代透明清空，更符合游戏视觉逻辑
• 顺序调整：先更新位置再绘制，确保每次显示的是最新状态的蛇
• 绘制逻辑优化：遍历整个蛇身列表，方便后续实现蛇变长功能
• 初始蛇身优化：让蛇段依次排列，避免初始状态重叠

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