javafx 中的河内塔游戏 - 在游戏完全解决之前不会显示任何内容

问题是您的solve()方法在不到一秒的时间内返回。它发生得如此之快，以至于没有什么可以动画化的。

你走在正确的轨道上。我们希望solve在不同的线程中运行该方法，并调用 Thread.sleep，因此它不会运行得太快。我们不能也绝对不能在JavaFX应用程序线程（调用的线程start和所有事件处理程序）中调用Thread.sleep，因为这将导致所有事件处理被延迟，包括窗口的绘制以及鼠标和键盘输入的处理。

首先，让我们添加 Thread.sleep、对 Platform.runLater 的一些调用来更新窗口，以及一个安全地完成这一切的 Thread：

private void solve(int n, Tower src, Tower aux, Tower dest)
throws InterruptedException {
    assert !Platform.isFxApplicationThread() : "Wrong thread!";

    if (n < 1) {
        return;
    }

    solve(n-1, src, dest, aux);
    dest.push(src.pop());
    Platform.runLater(() -> renderHanoi());
    System.out.println(n);
    Thread.sleep(100);

    solve(n-1, aux, src, dest);
    Platform.runLater(() -> renderHanoi());
}

public void solve() {
    renderHanoi();

    Thread solveThread = new Thread(() -> {
        try {
            solve(n, src, aux, dest);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    });
    solveThread.setDaemon(true);
    solveThread.start();
}

我们仍然有一个问题：在一个线程中对变量或字段进行的更改不能保证在其他线程中看到。 Java 语言规范的这一部分对此进行了简洁的解释：

例如，在以下（损坏的）代码片段中，假设this.done是非volatile布尔字段：

while (!this.done)
    Thread.sleep(1000);

编译器可以自由地读取该字段this.done一次，并在每次循环执行中重用缓存的值。这意味着循环永远不会终止，即使另一个线程更改了 的值this.done。

Java 有很多方法可以安全地处理多线程访问。synchronized在这种情况下，在Tower类和finalHanoi类中使用就足够了。

因此我们将 Tower 的方法声明更改为如下所示：

public synchronized void push(Rectangle entry) {

public synchronized Rectangle pop() {

public synchronized boolean hasEntry() {

@Override
public synchronized Tower clone() {

这保证了方法中对 Tower 字段所做的更改solve对于 JavaFX 应用程序线程是可见的。

Hanoi 类本身也在不同线程中引用 src、aux 和 dest。我们可以synchronized在这里使用，但将这些字段设为最终更简单：

final Tower src;
final Tower aux;
final Tower dest;
final int n;

当从多个线程访问字段时， Java 可以对字段做出很多安全的假设final，因为无需担心多个线程无法看到这些字段的更改。

[TLDR：这是一个不需要线程的解决方案]

正如@VGR 的优秀答案所指出的，问题的出现是因为解决塔问题几乎是立即发生的。因此，一旦你尝试渲染它，它就已经解决了。如果您尝试通过在每次移动之间设置暂停来减慢速度，那么您必须在单独的线程上运行求解代码。上面引用的答案展示了如何做到这一点。

我坚信在不必要的情况下不要使用多线程：最重要的是，因为它使代码更难以正确编写，而且（尽管这不太重要）因为它会消耗额外的系统资源。@VGR 的答案通过线程正确地实现了这一点，但是当您跨多个线程共享数据时，要知道代码是正确的，需要比单线程解决方案更高级的编程。

我还坚信将应用程序中的数据与数据的表示（视图）分开。

这是对分离数据的代码的轻微修改。首先，塔的表示，本质上是一个整数列表，表示塔上有哪些磁盘。还有一个枚举来确定它是哪座塔：

TowerID.java

package org.jamesd.examples.hanoi.model;

public enum TowerID {SRC, DEST, AUX}

塔楼.java

package org.jamesd.examples.hanoi.model;

import java.util.*;

public class Tower {

    private final TowerID id;
    private final LinkedList<Integer> disks;
    private final List<Integer> publicDisks;

    Tower(TowerID id, Set<Integer> disks) {
        this.id = id;
        this.disks = new LinkedList<>(disks);
        this.disks.sort(Integer::compare);
        this.publicDisks = Collections.unmodifiableList(this.disks);
    }

    Tower(TowerID id) {
        this(id, Collections.emptySet());
    }

    public int pop() {
        return disks.pop();
    }

    public void push(int i) {
        disks.push(i);
    }

    public List<Integer> getDisks() {
        return publicDisks;
    }

    public TowerID getId() {
        return id;
    }
}

谜题的表现只需要三座塔，以及从一个塔移动到另一个塔的方法。事实证明，将一个动作封装为一个单独的对象（这里只是一个简单的记录）会很有用：

移动.java

package org.jamesd.examples.hanoi.model;

public record Move(TowerID fromTower, TowerID toTower) {
    @Override
    public String toString() {
        return fromTower + " -> " + toTower;
    }
}

进而

河内.java

package org.jamesd.examples.hanoi.model;

import java.util.stream.Collectors;
import java.util.stream.IntStream;

public class Hanoi {

    private final int n;

    private final Tower src ;
    private final Tower dest ;
    private final Tower aux;

    public Hanoi(int numDisks) {
        this.n = numDisks;
        src = new Tower(TowerID.SRC, IntStream.range(1, n+1).boxed().collect(Collectors.toSet()));
        dest = new Tower(TowerID.DEST);
        aux = new Tower(TowerID.AUX);
    }

    public void makeMove(Move move) {
        Tower fromTower = getTower(move.fromTower());
        Tower toTower = getTower(move.toTower());
        toTower.push(fromTower.pop());
    }

    public Tower getTower(TowerID id) {
        return switch(id) {
            case SRC -> src;
            case DEST -> dest;
            case AUX -> aux;
        };
    }

    public int getNumDisks() {
        return n;
    }
}

请注意，这里没有解决这个难题的方法。解决这个谜题仅仅意味着在给定谜题中的圆盘数量的情况下提出一系列的动作。这是与 OP 中相同的算法，分解为一个单独的求解器类：

HanoiSolver.java

package org.jamesd.examples.hanoi.model;

import java.util.LinkedList;
import java.util.List;

public class HanoiSolver {
    private final int n ;

    public HanoiSolver(int nDisks) {
        this.n = nDisks;
    }

    public List<Move> solve() {
        List<Move> moves = new LinkedList<>();
        solve(moves, n, TowerID.SRC, TowerID.DEST, TowerID.AUX);
        return moves;
    }

    private void solve(List<Move> moves, int n, TowerID fromTower, TowerID destTower, TowerID auxTower) {
        if (n < 1) {
            return ;
        }
        solve(moves, n-1, fromTower, auxTower, destTower);
        moves.add(new Move(fromTower, destTower));
        solve(moves, n-1, auxTower, destTower, fromTower);
    }
}

请注意，我们现在可以在没有 UI 的情况下解决河内塔难题：

package org.jamesd.examples.hanoi.model;

public class Test {
    public static void main(String[] args) {
        HanoiSolver hanoi = new HanoiSolver(4);
        System.out.println(hanoi.solve());
    }
}

[SRC -> AUX, SRC -> DEST, AUX -> DEST, SRC -> AUX, DEST -> SRC, DEST -> AUX, SRC -> AUX, SRC -> DEST, AUX -> DEST, AUX -> SRC, DEST -> SRC, AUX -> DEST, SRC -> AUX, SRC -> DEST, AUX -> DEST]

我们编写的 API 还允许我们在解决方案中每次移动后检查状态：

package org.jamesd.examples.hanoi.model;

import java.util.List;
import java.util.stream.Stream;

public class Test {
    public static void main(String[] args) {
        HanoiSolver hanoiSolver = new HanoiSolver(4);
        List<Move> moves = hanoiSolver.solve();
        Hanoi hanoi = new Hanoi(4);
        outputHanoi(hanoi);
        for (Move move : moves) {
            hanoi.makeMove(move);
            System.out.println(move);
            outputHanoi(hanoi);
        }
    }

    private static void outputHanoi(Hanoi hanoi) {
        Stream.of(TowerID.values())
                .map(id -> id + " : " + hanoi.getTower(id).getDisks())
                .forEach(System.out::println);
        System.out.println("-----------------");
    }
}

SRC : [1, 2, 3, 4]
DEST : []
AUX : []
-----------------
SRC -> AUX
SRC : [2, 3, 4]
DEST : []
AUX : [1]
-----------------
SRC -> DEST
SRC : [3, 4]
DEST : [2]
AUX : [1]
-----------------
AUX -> DEST
SRC : [3, 4]
DEST : [1, 2]
AUX : []
-----------------
SRC -> AUX
SRC : [4]
DEST : [1, 2]
AUX : [3]
-----------------
DEST -> SRC
SRC : [1, 4]
DEST : [2]
AUX : [3]
-----------------
DEST -> AUX
SRC : [1, 4]
DEST : []
AUX : [2, 3]
-----------------
SRC -> AUX
SRC : [4]
DEST : []
AUX : [1, 2, 3]
-----------------
SRC -> DEST
SRC : []
DEST : [4]
AUX : [1, 2, 3]
-----------------
AUX -> DEST
SRC : []
DEST : [1, 4]
AUX : [2, 3]
-----------------
AUX -> SRC
SRC : [2]
DEST : [1, 4]
AUX : [3]
-----------------
DEST -> SRC
SRC : [1, 2]
DEST : [4]
AUX : [3]
-----------------
AUX -> DEST
SRC : [1, 2]
DEST : [3, 4]
AUX : []
-----------------
SRC -> AUX
SRC : [2]
DEST : [3, 4]
AUX : [1]
-----------------
SRC -> DEST
SRC : []
DEST : [2, 3, 4]
AUX : [1]
-----------------
AUX -> DEST
SRC : []
DEST : [1, 2, 3, 4]
AUX : []
-----------------

要为谜题制作 UI，我们需要一些 UI 类来可视化塔：

TowerView.java：

package org.jamesd.examples.hanoi.ui;

import javafx.scene.layout.Region;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import org.jamesd.examples.hanoi.model.Tower;

import java.util.ArrayList;
import java.util.List;

public class TowerView extends Region {

    private final int totalNumDisks;
    private final Rectangle stem = new Rectangle();
    private final List<Integer> diskIndexes = new ArrayList<>();
    private final List<Rectangle> disks = new ArrayList<>();

    private static final double STEM_WIDTH = 10 ;

    public TowerView(int totalNumDisks) {
        this.totalNumDisks = totalNumDisks;
        stem.setFill(Color.SADDLEBROWN);
        getChildren().add(stem);
    }

    @Override
    protected void layoutChildren() {
        double leftEdge = snappedLeftInset();
        double availableWidth = getWidth() - leftEdge - snappedRightInset();
        double topEdge = snappedTopInset();
        double availableHeight = getHeight() - topEdge - snappedBottomInset();
        stem.setWidth(STEM_WIDTH);
        stem.setX(leftEdge + availableWidth / 2 - STEM_WIDTH / 2);
        stem.setY(topEdge);
        stem.setHeight(availableHeight);

        int nDisks = diskIndexes.size();
        for (int i = 0; i < nDisks; i++)  {
            int relWidth = diskIndexes.get(i);
            Rectangle disk = disks.get(i);
            double diskWidth = availableWidth * relWidth / totalNumDisks;
            disk.setWidth(diskWidth);
            disk.setHeight(availableHeight / totalNumDisks);
            disk.setX(leftEdge + availableWidth / 2 - diskWidth / 2);
            disk.setY(topEdge + availableHeight - (availableHeight * (nDisks - i)) / totalNumDisks);
        }
    }

    public void renderTower(Tower tower) {
        diskIndexes.clear();
        diskIndexes.addAll(tower.getDisks());
        getChildren().setAll(stem);
        disks.clear();
        for (Integer index : diskIndexes) {
            Rectangle disk = new Rectangle();
            disk.setFill(getColor(index));
            double arc = 25.0;
            disk.setArcWidth(arc);
            disk.setArcHeight(arc);
            disks.add(disk);
            getChildren().add(disk);
        }
    }

    private Color getColor(int index) {
        return Color.gray(1.0 - 1.0 * index / totalNumDisks);
    }
}

对于整个事情：

河内视图.java：

package org.jamesd.examples.hanoi.ui;

import javafx.scene.layout.Background;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.paint.Color;
import org.jamesd.examples.hanoi.model.Hanoi;
import org.jamesd.examples.hanoi.model.TowerID;

public class HanoiView extends HBox {

    public HanoiView() {
        setSpacing(10);
        setFillHeight(true);
        setBackground(Background.fill(Color.SKYBLUE));
    }

    public void renderHanoi(Hanoi hanoi) {
        int n = hanoi.getNumDisks();
        TowerView src = createTowerView(n);
        TowerView dest = createTowerView(n);
        TowerView aux = createTowerView(n);
        src.renderTower(hanoi.getTower(TowerID.SRC));
        dest.renderTower(hanoi.getTower(TowerID.DEST));
        aux.renderTower(hanoi.getTower(TowerID.AUX));
        getChildren().setAll(src, dest, aux);
    }

    private TowerView createTowerView(int ndisks) {
        TowerView view = new TowerView(ndisks);
        setHgrow(view, Priority.ALWAYS);
        return view;
    }
}

To visualize a solution in an animation, we can get a list of the moves from the solver, create a timeline with a keyframe for each move, and in each keyframe update the model with each move and rerender the view:

            HanoiSolver solver = new HanoiSolver(hanoi.getNumDisks());
            List<Move> moves = solver.solve();
            Duration frameTime = Duration.seconds(0.5);
            Duration current = Duration.ZERO;
            Timeline timeline = new Timeline();
            for (Move move : moves) {
                current = current.add(frameTime);
                KeyFrame keyFrame = new KeyFrame(current, evt -> {
                    hanoi.makeMove(move);
                    hanoiview.renderHanoi(hanoi);
                });
                timeline.getKeyFrames().add(keyFrame);
            }
            timeline.play();

Here is this animation assembled into an application, with a few controls added:

package org.jamesd.examples.hanoi.ui;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Spinner;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.util.Duration;
import org.jamesd.examples.hanoi.model.Hanoi;
import org.jamesd.examples.hanoi.model.HanoiSolver;
import org.jamesd.examples.hanoi.model.Move;

import java.util.List;

public class App extends Application {

    private Hanoi hanoi ;

    @Override
    public void start(Stage stage) throws Exception {
        HBox controls = new HBox(5);
        controls.getChildren().add(new Label("Number of disks:"));
        Spinner<Integer> numDisksSpinner = new Spinner<>(2, 15, 5);
        Button solve = new Button("Solve");
        controls.getChildren().addAll(numDisksSpinner, solve);

        HanoiView hanoiview = new HanoiView();
        hanoi = new Hanoi(numDisksSpinner.getValue());
        hanoiview.renderHanoi(hanoi);

        numDisksSpinner.valueProperty().addListener((obs, oldValue, newValue) -> {
            hanoi = new Hanoi(newValue);
            hanoiview.renderHanoi(hanoi);
        });

        solve.setOnAction(e -> {
            controls.setDisable(true);
            hanoi = new Hanoi(numDisksSpinner.getValue());
            hanoiview.renderHanoi(hanoi);
            HanoiSolver solver = new HanoiSolver(hanoi.getNumDisks());
            List<Move> moves = solver.solve();
            Duration frameTime = Duration.seconds(0.5);
            Duration current = Duration.ZERO;
            Timeline timeline = new Timeline();
            for (Move move : moves) {
                current = current.add(frameTime);
                KeyFrame keyFrame = new KeyFrame(current, evt -> {
                    hanoi.makeMove(move);
                    hanoiview.renderHanoi(hanoi);
                });
                timeline.getKeyFrames().add(keyFrame);
            }
            timeline.setOnFinished(evt -> controls.setDisable(false));
            timeline.play();
        });

        BorderPane root = new BorderPane();
        root.setTop(controls);
        root.setCenter(hanoiview);
        Scene scene = new Scene(root, 800, 500);
        stage.setScene(scene);
        stage.show();
    }

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

Note we don't use any built-in observability here. We could create the Tower implementation with an ObservableList for the disks and have the view class observe the list, in order to avoid re-rendering the views "by hand" in each frame.