我在javafx上做了一个记忆卡游戏,你点击一张卡,它会翻转,你点击另一张卡,如果它们是一样的,它会翻转,如果它们是不同的,它会保持不变。我遵循了这个教程,但我想把它从字母改成图像,问题是当我点击一个磁贴时,会显示另一个磁贴上的图像
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
import java.util.*;
public class Main extends Application {
private int num_of_pairs = 8;
private int num_per_row = 4;
Tile selected = null;
private int clickCount=2;
@Override
public void start(Stage primaryStage) throws Exception {
// Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
primaryStage.setTitle("Hello World");
Pane root = new Pane();
ArrayList<Tile> tiles = new ArrayList<>();
ImageView[] puzz=new ImageView[num_of_pairs];
for(int i=0;i< puzz.length;i++){
puzz[i]= new ImageView("image.jpeg");
puzz[i].setFitHeight(110);
puzz[i].setFitWidth(110);
}
for (int i = 0; i < num_of_pairs; i++) {
tiles.add(new Tile(puzz[i]));
tiles.add(new Tile(puzz[i]));
}
Collections.shuffle(tiles);
for (int i = 0; i < tiles.size(); i++) {
Tile tile = tiles.get(i);
tile.setTranslateX(120 * (i % num_per_row));
tile.setTranslateY(120 * (i / num_per_row));
System.out.println(120*(i%num_per_row));
System.out.println(120*(i/num_per_row));
root.getChildren().add(tile);
}
primaryStage.setScene(new Scene(root, 800, 550));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
class Tile extends StackPane {
ImageView image;
Tile(ImageView image) {
this.image=image;
Rectangle border = new Rectangle(120, 120);
border.setFill(null);
border.setStroke(Color.BLACK);
getChildren().addAll(this.image,border);
setOnMouseClicked(this::handleMouseClick);
close();
}
public void handleMouseClick(MouseEvent event){
if (isOpen() || clickCount==0)
return;
clickCount--;
if (selected == null) {
selected = this;
open(() ->{});
}else{
open(() -> {
if(!hasSameValue(selected)){
selected.close();
this.close();
}
selected=null;
clickCount=2;
});
}
}
public boolean isOpen() {
return image.getOpacity() == 1;
}
public void close() {
FadeTransition ft = new FadeTransition(Duration.seconds(0.5), image);
ft.setToValue(0);
ft.play();
}
public void open(Runnable action) {
FadeTransition ft = new FadeTransition(Duration.seconds(0.5), image);
ft.setToValue(1);
ft.setOnFinished(e -> action.run());
ft.play();
}
public boolean hasSameValue(Tile other) {
return image.getImage().equals(other.image.getImage());
}
}
}
1条答案
按热度按时间ua4mk5z41#
节点(例如
ImageView
s) 在任何场景图中只能出现一次。您正在尝试使用每个ImageView
在根窗格中两次;基本上,这里发生的是第二次添加ImageView
到根(通过Tile
),它将从第一个磁贴中移除并放置在第二个磁贴中。如果你点击Tile
与第一次添加图像相对应,使用第二次添加图像时的坐标显示图像。相反,您可以创建
Image
s、 并使用每个Image
两次在两个不同的ImageView
s。这样的方法应该有用: