JavaFx實現拼圖游戲

最近學習JavaFx,發現網上大概只有官方文檔可以查閱,學習資料較少,寫個拼圖游戲供記錄。。

大概說一下思路:

1.面板的構建:面板采用GridPane,方便3*3的圖片布局。

2.每個小格子中的圖片當然不是一張張手工切好的,利用imageview.setViewPort(Rectangle2D 2d)的方法進行切割。

3.再來說鼠標點擊時圖片的移動,這時候以里面的空格子為中心,不以鼠標點擊的那個事件源為中心,這樣可以避免走彎路(當時我是有一種柳暗花明的感覺。)。

4.鼠標點擊后空格子和其周圍帶圖片格子的交換就比較簡單了,重新設置位置即可。

5.每交換一次檢查是否拼圖成功。

關于界面初始化:定義一個ImageView的數組,長度為9,將其按順序分別為第1,2,3....個格子,然后再產生8個0-8的不重復并且逆序數為偶數的隨機數的數組,然后將此隨機數作為ImageView數組的下標,將ImageView順序排列在格子中。為什么必須要逆序數為偶數呢?這是因為這樣圖才能拼成功!

關于判斷拼圖成功:有了上面的初始化方法,判斷就很簡單了,只需要ImageView[0]對應第一個格子,,后面類似,,這樣就拼成功了。需要注意我們只產生了8個隨機數,而我們有9個格子,所以得把那個隨機數組中沒有的數字找出來,然后比較。有公式:n = 3 * r + c。其中n表示ImageView數組的下標,r表示此imageView的行號,c表示列號。

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import java.util.Random;
 
public class myJigsaw extends Application {
  public int m;     //m是不在隨機數組的那個數字
  ImageView[] imageViews = new ImageView[9];
  public static void main(String[] args) {
    Application.launch(args);
  }
 
 
  @Override
  public void start(Stage arg0) throws Exception {
    init(arg0);
  }
  public void init(Stage stage) {
    int[] n = random();       //自定義的函數,產生逆序數為偶數的不重復數組
 
    Image image = new Image("1.png");
 
 
    GridPane gridPane = new GridPane();
 
    for(int i = 0, k = 0; i <= 2; ++i) {
      for(int j = 0; j <= 2; ++j, ++k) {
        imageViews[k] = new ImageView(image);    //初始化數組
        imageViews[k].setOnMouseClicked(new myevent());   //設置點擊事件
        imageViews[k].setViewport(new Rectangle2D(100 * j, 100 * i, 100, 100));       //切割圖片
      }
    }
 
    gridPane.add(imageViews[n[0]], 0, 0);             //按照產生的隨機數將imageView數組加入面板
    gridPane.add(imageViews[n[1]], 1, 0);
    gridPane.add(imageViews[n[2]], 2, 0);
    gridPane.add(imageViews[n[3]], 0, 1);
    gridPane.add(imageViews[n[4]], 1, 1);
    gridPane.add(imageViews[n[5]], 2, 1);
    gridPane.add(imageViews[n[6]], 0, 2);
    gridPane.add(imageViews[n[7]], 1, 2);
    m = findnum(n);                         //找出那個不在隨機數組里面的數字
    ImageView incomp = new ImageView(imageViews[m].getImage());       //用于顯示空格子的圖片
    ImageView comp = new ImageView(image);                   //用于顯示完整的大圖
    incomp.setViewport(imageViews[m].getViewport());
    Image image2 = new Image("2.png");                 //2.png為一個透明圖,放在空格子中
    imageViews[m].setImage(image2);
    gridPane.add(imageViews[m], 2, 2);
    gridPane.setGridLinesVisible(true);
    BorderPane borderPane = new BorderPane(gridPane);
    VBox right = new VBox(20, incomp, comp);
    borderPane.setRight(right);
    Scene scene = new Scene(borderPane, 820, 420);
    stage.setScene(scene);
    stage.setResizable(false);
    stage.show();
 
  }
 
  public int[] random() {       //生成8個不重復的逆序數為偶數的數字
    int[] ran = new int[8];
    while(iso(ran) == false) {
      ran = random_num();
    }
    return ran;
 
  }
 
  public int[] random_num() {   //生成8個不重復數
    int r[] = new int[8];
    Random random = new Random();
    for(int i = 0; i < 8; ++i) {
      r[i] = random.nextInt(9);
      for(int j = 0;j < i; ++j) {
        while(r[i] == r[j]) {
          i--;
          break;
        }
      }
    }
    return r;
  }
 
  public boolean iso(int[] num) {     //判斷逆序數是否為偶數
    int sum = 0;
    for(int i = 0; i <= 6; ++i) {
      for(int j = i; j <= 7; j++) {
        if(num[i] > num[j]) {
          sum++;
        }
      }
    }
    if((sum % 2) == 0 && sum != 0) {
      return true;
    }
 
    return false;
 
  }
 
  class myevent implements EventHandler<MouseEvent> {        //點擊事件的實現
 
 
  @Override
    public void handle(MouseEvent arg0) {
    // TODO Auto-generated method stub
      ImageView img = (ImageView) arg0.getSource();
      double sx = img.getLayoutX();
      double sy = img.getLayoutY();
      double dispx = sx - imageViews[m].getLayoutX();
      double dispy = sy - imageViews[m].getLayoutY();
      if((dispx == -100) && (dispy == 0 )) {        //點擊的空格左邊的格子
        swapimg(img, imageViews[m]);       //交換imageView
        if(issucc(imageViews)) {             //判斷是否拼成功
          Alert alert = new Alert(AlertType.WARNING, "成功!");
          alert.show();
        }
      }
 
      else if ((dispx == 0) && (dispy == -100)) {    //上面的格子
        swapimg(img, imageViews[m]);
        if(issucc(imageViews)) {
          Alert alert = new Alert(AlertType.WARNING, "成功!");
          alert.show();
        }
      }
      else if((dispx == 100) && (dispy == 0)) {        //右邊的格子
        swapimg(img, imageViews[m]);
        if(issucc(imageViews)) {
          Alert alert = new Alert(AlertType.WARNING, "成功!");
          alert.show();
        }
      }
      else if((dispx == 0) && (dispy == 100)) {        //下面的格子
        swapimg(img, imageViews[m]);
        if(issucc(imageViews)) {
          Alert alert = new Alert(AlertType.WARNING, "成功!");
          alert.show();
        }
      }
    }
    public void swapimg(ImageView i1, ImageView i2) {       //交換兩個imageView的實現
      int row1 = GridPane.getRowIndex(i1);
      int colu1 = GridPane.getColumnIndex(i1);
      int row2 = GridPane.getRowIndex(i2);
      int colu2 = GridPane.getColumnIndex(i2);
 
      GridPane.setRowIndex(i1, row2);
      GridPane.setColumnIndex(i1, colu2);
      GridPane.setRowIndex(i2, row1);
      GridPane.setColumnIndex(i2, colu1);
    }
  }
  public boolean issucc(ImageView[] imageViews) {                //判斷是否拼成功
    for(int i = 0; i <= 8; ++i) {
      if(i != 3 * GridPane.getRowIndex(imageViews[i]) + GridPane.getColumnIndex(imageViews[i])) {
        return false;
      }
    }
      return true;
  }
 
  public int findnum(int[] n) {                       //找出m
    for(int j = 0; j <= 8; ++j) {
      if((j == n[0]) || (j == n[1]) || (j == n[2]) || (j == n[3]) || (j == n[4]) || (j == n[5]) || (j == n[6]) || (j == n[7])) {
      }
      else {
        return j;
      }
    }
    return -1;
  } 
 
}

截圖如下:

說明:各位看官如果有更好的思路,歡迎留言~~大家共同進步

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持龍方網絡。

鄭重聲明:本文版權包含圖片歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們([email protected])修改或刪除,多謝。

鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。

留言與評論(共有 0 條評論)
   
驗證碼:
彩票店