«Femten» på Java – hvordan utvikle et fullt spill

«Femten», eller «Femten-spillet» — et utmerket eksempel på et enkelt logikkspill som er populært over hele verden. For å løse puslespillet må kvadratene med tall ordnes i rekkefølge, fra laveste til høyeste. Dette er ikke enkelt, men interessant.

I dagens tutorial viser vi hvordan man kan utvikle «Femten» på Java 8 med Eclipse. For å utvikle brukergrensesnittet vil vi bruke Swing API.

Vi minner om: for alle lesere av «Habr» — 10 000 rubler rabatt ved påmelding til hvilket som helst Skillbox-kurs med kampanjekoden «Habr».

Skillbox anbefaler: Nettbasert utdanningskurs «Yrkesfag Java-utvikler».

Design av spillet

I dette trinnet må vi bestemme egenskapene:

• Size — størrelsen på spillefeltet;
• nbTiles — antall brikker i feltet. nbTiles = size*size — 1;
• Tiles — brikker som representerer et endimensjonalt array av heltall. Hver brikke vil få en unik verdi innenfor intervallet [0, nbTiles]. Null representerer et tomt kvadrat;
• blankPos — posisjonen til det tomme kvadratet.

Logikken til spillet

Vi må definere en reset-metode som brukes til å initialisere en ny spillposisjon. Vi setter verdien for hvert element i brikkearrayet. Deretter plasserer vi blankPos i den siste posisjonen i arrayet.

Vi trenger også en shuffle-metode for å stokke brikkene. Vi inkluderer ikke den tomme brikken i stokkingprosessen for å la den være på sin opprinnelige plass.

Siden bare halvparten av de mulige startposisjonene for puslespillet har en løsning, må vi sjekke det resulterende blandingsresultatet for å forsikre oss om at den nåværende oppstillingen faktisk er løselig. For å gjøre dette definerer vi en isSolvable-metode.

Hvis en bestemt brikke er foran en brikke med høyere verdi, regnes dette som en inversjon. Når den tomme brikken er på sin plass, må antallet inversjoner være partall for at puslespillet skal være løselig. Så vi teller antall inversjoner og returnerer true hvis tallet er partall.

Deretter er det viktig å definere en isSolved-metode for å sjekke om vår oppstilling av Game Of Fifteen er løst. Først ser vi hvor den tomme brikken er. Hvis den er i startposisjonen, er den nåværende oppstillingen ny og har ikke vært løst tidligere. Deretter går vi gjennom brikkene i omvendt rekkefølge, og hvis verdien av brikken er forskjellig fra den tilsvarende indeksen +1, returnerer vi false. Ellers, på slutten av metoden, er det på tide å returnere true, fordi puslespillet allerede er løst.

En annen metode som må defineres, er newGame. Denne er nødvendig for å opprette en ny instans av spillet. For dette tilbakestiller vi spillefeltet, deretter stokker vi det og fortsetter til spillposisjonen er løselig.

Her er et eksempel på kode med nøkkellogikken for en 15-brikker:

private void newGame() {
  do {
    reset(); // tilbakestill til opprinnelig tilstand
    shuffle(); // stokke
  } while(!isSolvable()); // fortsett til rutenettet er løselig
 
  gameOver = false;
}
 
private void reset() {
  for (int i = 0; i  1) {
    int r = RANDOM.nextInt(n--);
    int tmp = tiles[r];
    tiles[r] = tiles[n];
    tiles[n] = tmp;
  }
}
 
// Bare halvparten av permutasjonene av puslespillet er løselige/
// Hver gang en brikke forekommer foran en brikke med høyere verdi, teller det
// som en inversjon. I vårt tilfelle, med den blanke brikken i løst posisjon,
// må antallet inversjoner være jevnt for at puslespillet skal være løselig
private boolean isSolvable() {
  int countInversions = 0;
 
  for (int i = 0; i < nbTiles; i++) {
    for (int j = 0; j  tiles[i])
        countInversions++;
    }
  }
 
  return countInversions % 2 == 0;
}
 
private boolean isSolved() {
  if (tiles[tiles.length - 1] != 0) // hvis den blanke brikken ikke er i løst posisjon ==> ikke løst
    return false;
 
  for (int i = nbTiles - 1; i >= 0; i--) {
    if (tiles[i] != i + 1)
      return false;
  }
 
  return true;
}

Til slutt må vi programmere bevegelsen av brikkene i matrisen. Denne koden vil bli kalt senere via en callback, for å reagere på musepekeren. Spillet vårt vil støtte flere brikker som flyttes samtidig. Dermed, etter at vi har konvertert den trykkte posisjonen på skjermen til en brikke, får vi posisjonen til den blanke brikken og ser etter bevegelseretning for å støtte flere flyttinger samtidig.

Her er et eksempel på kode:

// get position of the click
int ex = e.getX() - margin;
int ey = e.getY() - margin;
 
// click in the grid ?
if (ex < 0 || ex > gridSize  || ey < 0  || ey > gridSize)
  return;
 
// get position in the grid
int c1 = ex / tileSize;
int r1 = ey / tileSize;
 
// get position of the blank cell
int c2 = blankPos % size;
int r2 = blankPos / size;
 
// we convert in the 1D coord
int clickPos = r1 * size + c1;
 
int dir = 0;
 
// we search direction for multiple tile moves at once
if (c1 == c2  &&  Math.abs(r1 - r2) > 0)
  dir = (r1 - r2) > 0 ? size : -size;
else if (r1 == r2 && Math.abs(c1 - c2) > 0)
  dir = (c1 - c2) > 0 ? 1 : -1;
 
if (dir != 0) {
  // we move tiles in the direction
  do {
    int newBlankPos = blankPos + dir;
    tiles[blankPos] = tiles[newBlankPos];
    blankPos = newBlankPos;
  } while(blankPos != clickPos);
 
tiles[blankPos] = 0;

Utvikler UI med Swing API

Det er på tide å ta fatt på grensesnittet. Først tar vi klassen Jpanel. Så tegner vi brikkene på feltet — for å beregne størrelsen på hver vil vi bruke dataene angitt i parameterne til spillets konstruktør:

gridSize = (dim - 2 * margin);
tileSize = gridSize / size;

Margin er også en parameter gitt i konstruktøren til spillet.

Nå må vi definere metoden drawGrid for å tegne rutenettet og brikkene på skjermen. Vi analyserer matrisen av brikker og konverterer koordinatene til brukergrensesnittkoordinater. Deretter tegner vi hver brikke med det tilsvarende tallet i midten:

private void drawGrid(Graphics2D g) {
  for (int i = 0; i < tiles.length; i++) {
    // vi konverterer 1D-koordinater til 2D-koordinater givet størrelsen af 2D-arrayet
    int r = i / size;
    int c = i % size;
    // vi konverterer til koordinater i UI
    int x = margin + c * tileSize;
    int y = margin + r * tileSize;
 
    // tjekker for speciale tilfælde for tom flise
    if(tiles[i] == 0) {
      if (gameOver) {
        g.setColor(FOREGROUND_COLOR);
        drawCenteredString(g, "u2713", x, y);
      }
 
      continue;
    }
 
    // for andre fliser
    g.setColor(getForeground());
    g.fillRoundRect(x, y, tileSize, tileSize, 25, 25);
    g.setColor(Color.BLACK);
    g.drawRoundRect(x, y, tileSize, tileSize, 25, 25);
    g.setColor(Color.WHITE);
 
    drawCenteredString(g, String.valueOf(tiles[i]), x , y);
  }
}

Til sidst vil vi overskrive metoden paintComponent, som er afledt af klassen JPane. Derefter bruger vi metoden drawGrid, og til sidst metoden drawStartMessage for at vise en besked, der beder om at klikke for at starte spillet:

private void drawStartMessage(Graphics2D g) {
  if (gameOver) {
    g.setFont(getFont().deriveFont(Font.BOLD, 18));
    g.setColor(FOREGROUND_COLOR);
    String s = "Klik for at starte nyt spil";
    g.drawString(s, (getWidth() - g.getFontMetrics().stringWidth(s)) / 2,
        getHeight() - margin);
  }
}
 
private void drawCenteredString(Graphics2D g, String s, int x, int y) {
  // centrerer strengen s for den givne flise (x,y)
  FontMetrics fm = g.getFontMetrics();
  int asc = fm.getAscent();
  int desc = fm.getDescent();
  g.drawString(s,  x + (tileSize - fm.stringWidth(s)) / 2,
      y + (asc + (tileSize - (asc + desc)) / 2));
}
 
@Override
protected void paintComponent(Graphics g) {
  super.paintComponent(g);
  Graphics2D g2D = (Graphics2D) g;
  g2D.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
  drawGrid(g2D);
  drawStartMessage(g2D);
}

Vi reagerer på brugerhandlinger i UI

For at sikre, at spillet forløber som det skal, er det nødvendigt at håndtere brugerhandlinger i UI. Derfor tilføjer vi implementeringen af MouseListener til Jpanel og koden til at flytte fliserne, som allerede er vist ovenfor:

addMouseListener(new MouseAdapter() {
  @Override
  public void mousePressed(MouseEvent e) {
    // bruges til at lade brugerne interagere på nettet ved at klikke
    // det er tid til at implementere interaktion med brugerne for at flytte fliserne for at løse spillet!
    if (gameOver) {
      newGame();
    } else {
      // få positionen af klikket
      int ex = e.getX() - margin;
      int ey = e.getY() - margin;
 
      // klikker i nettet?
      if (ex  gridSize  || ey  gridSize)
        return;
 
      // få positionen i nettet
      int c1 = ex / tileSize;
      int r1 = ey / tileSize;
 
      // få positionen af den tomme celle
      int c2 = blankPos % size;
      int r2 = blankPos / size;
 
      // vi konverterer til den 1D koordinat
      int clickPos = r1 * size + c1;
 
      int dir = 0;
 
      // vi søger retning for flere flisebevægelser ad gangen
      if (c1 == c2  &&  Math.abs(r1 - r2) > 0)
        dir = (r1 - r2) > 0 ? size : -size;
      else if (r1 == r2 && Math.abs(c1 - c2) > 0)
        dir = (c1 - c2) > 0 ? 1 : -1;
 
      if (dir != 0) {
        // vi flytter fliserne i den retning
        do {
          int newBlankPos = blankPos + dir;
          tiles[blankPos] = tiles[newBlankPos];
          blankPos = newBlankPos;
        } while(blankPos != clickPos);
 
        tiles[blankPos] = 0;
      }
 
      // vi tjekker om spillet er løst
      gameOver = isSolved();
    }
 
    // vi tegner panelet igen
    repaint();
  }
});

Koden plasseres i klassebyggeren GameOfFifteen. Til slutt kaller vi metoden newGame for å starte et nytt spill.

Den fullstendige koden for spillet

Det siste steget før du ser spillet i aksjon, er å samle alle kodeelementene sammen. Slik blir det:

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.util.Random;
 
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
 
// Vi skal lage et 15 puslespill med Java 8 og Swing
// Hvis du har spørsmål, kan du gjerne lese kommentarene ;)
public class GameOfFifteen extends JPanel { // vår grid vil bli tegnet i et dedikert panel
 
  // Størrelse på vår Game of Fifteen-instans
  private int size;
  // Antall brikker
  private int nbTiles;
  // Grid UI-dimensjon
  private int dimension;
  // Forgrunnsfarge
  private static final Color FOREGROUND_COLOR = new Color(239, 83, 80); // vi bruker en vilkårlig farge
  // Tilfeldig objekt for å stokke brikkene
  private static final Random RANDOM = new Random();
  // Lagrer brikkene i et 1D-array av heltall
  private int[] tiles;
  // Størrelse på brikken på UI
  private int tileSize;
  // Posisjon for den tomme brikken
  private int blankPos;
  // Margin for grid på rammen
  private int margin;
  // Grid UI-størrelse
  private int gridSize;
  private boolean gameOver; // true hvis spillet er over, false ellers
 
  public GameOfFifteen(int size, int dim, int mar) {
    this.size = size;
    dimension = dim;
    margin = mar;
    
    // init brikker
    nbTiles = size * size - 1; // -1 fordi vi ikke teller den tomme brikken
    tiles = new int[size * size];
    
    // kalkuler grid-størrelse og brikkestørrelse
    gridSize = (dim - 2 * margin);
    tileSize = gridSize / size;
    
    setPreferredSize(new Dimension(dimension, dimension + margin));
    setBackground(Color.WHITE);
    setForeground(FOREGROUND_COLOR);
    setFont(new Font("SansSerif", Font.BOLD, 60));
    
    gameOver = true;
    
    addMouseListener(new MouseAdapter() {
      @Override
      public void mousePressed(MouseEvent e) {
        // brukt for å la brukerne samhandle med grid ved å klikke
        // det er på tide å implementere interaksjon med brukerne for å flytte brikkene for å løse spillet!
        if (gameOver) {
          newGame();
        } else {
          // få posisjonen til klikket
          int ex = e.getX() - margin;
          int ey = e.getY() - margin;
          
          // klikk i grid?
          if (ex  gridSize  || ey  gridSize)
            return;
          
          // få posisjonen i grid
          int c1 = ex / tileSize;
          int r1 = ey / tileSize;
          
          // få posisjonen til den tomme cellen
          int c2 = blankPos % size;
          int r2 = blankPos / size;
          
          // vi konverterer til 1D koordinat
          int clickPos = r1 * size + c1;
          
          int dir = 0;
          
          // vi søker retningen for flere brikketransporter på en gang
          if (c1 == c2  &&  Math.abs(r1 - r2) > 0)
            dir = (r1 - r2) > 0 ? size : -size;
          else if (r1 == r2 && Math.abs(c1 - c2) > 0)
            dir = (c1 - c2) > 0 ? 1 : -1;
            
          if (dir != 0) {
            // vi flytter brikkene i retning
            do {
              int newBlankPos = blankPos + dir;
              tiles[blankPos] = tiles[newBlankPos];
              blankPos = newBlankPos;
            } while(blankPos != clickPos);
            
            tiles[blankPos] = 0;
          }
          
          // vi sjekker om spillet er løst
          gameOver = isSolved();
        }
        
        // vi tegner panelet på nytt
        repaint();
      }
    });
    
    newGame();
  }
 
  private void newGame() {
    do {
      reset(); // tilbakestill til opprinnelig tilstand
      shuffle(); // stokke
    } while(!isSolvable()); // gjør det til grid er løsbart
    
    gameOver = false;
  }
 
  private void reset() {
    for (int i = 0; i  1) {
      int r = RANDOM.nextInt(n--);
      int tmp = tiles[r];
      tiles[r] = tiles[n];
      tiles[n] = tmp;
    }
  }
 
  // Bare halvparten av permutasjonene av puslespillet er løsbart.
  // Hver gang en brikke er forutgående av en brikke med høyere verdi, telles det
  // som en inversjon. I vårt tilfelle, med den tomme brikken i løst posisjon,
  // må antallet inversjoner være jevnt for at puslespillet skal være løsbart
  private boolean isSolvable() {
    int countInversions = 0;
    
    for (int i = 0; i < nbTiles; i++) {
      for (int j = 0; j  tiles[i])
          countInversions++;
      }
    }
    
    return countInversions % 2 == 0;
  }
 
  private boolean isSolved() {
    if (tiles[tiles.length - 1] != 0) // hvis den tomme brikken ikke er i den løste posisjonen == ikke løst
      return false;
    
    for (int i = nbTiles - 1; i >= 0; i--) {
      if (tiles[i] != i + 1)
        return false;      
    }
    
    return true;
  }
 
  private void drawGrid(Graphics2D g) {
    for (int i = 0; i  {
      JFrame frame = new JFrame();
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.setTitle("Game of Fifteen");
      frame.setResizable(false);
      frame.add(new GameOfFifteen(4, 550, 30), BorderLayout.CENTER);
      frame.pack();
      // sentrer på skjermen
      frame.setLocationRelativeTo(null);
      frame.setVisible(true);
    });
  }
 
 
}

Endelig, la oss spille!

Det er på tide å starte spillet og teste det i aksjon. Feltet skal se slik ut:

La oss prøve å løse puslespillet. Hvis alt gikk bra, får vi dette:

Og der har vi det. Forventet du mer? 🙂

Skillbox anbefaler:

• Praktisk kursus «Mobiludvikler PRO».
• Praktisk nettbasert kurs «Python Data Analyst».
• Toårig praktisk kurs «Jeg er WEB-utvikler PRO».

Kilde: habr.com