最终效果

鼠标点击对应的按键能够控制小球的移动，通过键盘的方向键也能控制小球的移动。

实现代码

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        // 这里我使用了3个面板，最顶层的面板borderPane，pane用来存放圆，vbox用来存放按键
        BorderPane borderPane = new BorderPane();
        Pane pane = new Pane();
        VBox vbox = new VBox();
        vbox.setSpacing(30);  // 设置垂直方向上节点之间相邻的距离
        vbox.setAlignment(Pos.CENTER);  // 设置节点的布局，让其居中

        // 四个按键
        Button bt1 = new Button("向左");
        Button bt2 = new Button("向右");
        Button bt3 = new Button("向上");
        Button bt4 = new Button("向下");

        // 画一个半径为50的圆，设置外边颜色和填充的颜色
        Circle circle = new Circle();
        circle.setCenterX(200);
        circle.setCenterY(200);
        circle.setRadius(50);
        circle.setStroke(Color.BLACK);
        circle.setFill(Color.GREEN);

        // 将按键加入vbox面板中，圆加入pane面板中，最后再将这两个面板加入borderPane面板中
        // 使用vbox保证按键的布局，使用pane确保圆能够移动，直接加入borderPane面板只能居中，不会移动
        vbox.getChildren().addAll(bt1, bt2, bt3, bt4);
        pane.getChildren().add(circle);
        borderPane.setCenter(pane);
        borderPane.setRight(vbox);

        // 各个按键对鼠标点击事件的响应
        bt1.setOnMouseClicked(e -> {
            circle.setCenterX(circle.getCenterX() - 5);
        });
        bt2.setOnMouseClicked(e -> {
            circle.setCenterX(circle.getCenterX() + 5);
        });
        bt3.setOnMouseClicked(e -> {
            circle.setCenterY(circle.getCenterY() - 5);
        });
        bt4.setOnMouseClicked(e -> {
            circle.setCenterY(circle.getCenterY() + 5);
        });

        // 按下按键对应的事件响应，这里按键响应对应到最外层面板
        borderPane.setOnKeyReleased(e -> {
            switch (e.getCode()) {
                case DOWN: circle.setCenterY(circle.getCenterY() + 5); break;
                case UP: circle.setCenterY(circle.getCenterY() - 5); break;
                case LEFT: circle.setCenterX(circle.getCenterX() - 5); break;
                case RIGHT: circle.setCenterX(circle.getCenterX() + 5); break;
            }
        });

        Scene scene = new Scene(borderPane, 400, 400);
        primaryStage.setTitle("byack");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

感想

初学JavaFx，还是遇见不少的问题，这里做一个简单的记录，方便以后复习。