“Pytteliten” på Java – hur man utvecklar ett fullt spel

«Femton», eller «Femtonspel» — ett utmärkt exempel på ett enkelt logiskt spel som är populärt över hela världen. För att lösa pusslet måste man ordna klossarna med siffror i rätt ordning, från lägst till högst. Det är inte lätt, men intressant.

I dagens handledning visar vi hur man utvecklar «Femton» i Java 8 med Eclipse. För att utveckla användargränssnittet kommer vi att använda Swing API.

Påminnelse: för alla läsare av "Habr" — 10 000 rubel rabatt vid registrering för vilken kurs som helst på Skillbox med rabattkoden "Habr".

Skillbox rekommenderar: Utbildningskurs online "Yrket Java-utvecklare".

Designa spelet

I detta steg måste vi definiera egenskaperna:

• Size — storleken på spelplanen;
• nbTiles — antalet pusselbitar på spelplanen. nbTiles = size*size — 1;
• Tiles — pusselbiten, som representeras av en endimensionell array av heltal. Varje pusselbit får ett unikt värde i intervallet [0, nbTiles]. Noll representerar den tomma rutan;
• blankPos — positionen för den tomma rutan.

Spel-logik

Vi måste definiera en metod för återställning (reset) som används för att initiera en ny spelposition. Så vi sätter värdet för varje element i arrayen av pusselbitar. Sedan placerar vi blankPos på den sista positionen i arrayen.

Vi behöver också en metod för att blanda (shuffle) arrayen av pusselbitar. Vi inkluderar inte den tomma pusselbiten i blandningsprocessen för att behålla dess position.

Eftersom endast hälften av de möjliga startpositionerna för pusslet har en lösning, måste vi kontrollera det resulterande blandandet för att se till att den aktuella uppställningen faktiskt är lösbar. För att göra detta definierar vi en metod isSolvable.

Om en specifik pusselbit föregås av en bit med ett högre värde betraktas det som en inversion. När den tomma pusselbiten är på sin position måste antalet inversioner vara jämnt för att pusslet ska vara lösbart. Så vi räknar antalet inversioner och returnerar true om antalet är jämnt.

Därefter är det viktigt att definiera metoden isSolved för att kontrollera om vår uppställning av Game Of Fifteen är löst. Först ser vi var den tomma pusselbiten är. Om den är på sin ursprungliga plats, är den aktuella uppställningen ny och har aldrig lösts tidigare. Sedan går vi igenom plattorna i omvänd ordning, och om värdet på pusselbiten avviker från motsvarande index +1 returnerar vi false. Annars, i slutet av metoden, är det dags att returnera true, för pusslet är redan löst.

En annan metod som behöver definieras är newGame. Den krävs för att skapa en ny instans av spelet. För detta återställer vi spelplanen, blandar den och fortsätter tills spelpositionen är lösbar.

Här är ett exempel på koden med nyckellogiken för femtiofem:

private void newGame() {
  do {
    reset(); // återställ i ursprungligt tillstånd
    shuffle(); // blanda
  } while(!isSolvable()); // gör detta tills rutnätet är 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;
  }
}
 
// Endast hälften av permutationerna av pusslet är lösbara/
// Varje gång en flis föregås av en flis med högre värde räknas
// det som en inversion. I vårt fall, med den tomma flisen i den lösta positionen,
// måste antalet inversioner vara jämnt för att pusslet ska vara 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) // om den tomma flisen inte är i den lösta positionen => inte löst
    return false;
 
  for (int i = nbTiles - 1; i >= 0; i--) {
    if (tiles[i] != i + 1)
      return false;
  }
 
  return true;
}

Slutligen måste vi programmera rörelsen av femtiofem i matrisen. Denna kod kommer att anropas senare via en callback för att reagera på markörens rörelse. Vårt spel kommer att stödja flera flisflyttningar samtidigt. Så efter att vi konverterat den tryckta positionen på skärmen till en femtiofem får vi positionen för den tomma flisen och letar efter rörelseriktningen för att stödja flera av sina rörelser samtidigt.

Här är ett exempel på koden:

// 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;

Vi utvecklar UI med Swing API

Det är dags att ta hand om gränssnittet. Först tar vi klassen Jpanel. Sedan ritar vi femtiofem på fältet - för att beräkna storleken på varje kommer vi att använda data som anges i spelkonstruktorns parameter:

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

Margin är också en parameter som anges i spelkonstruktorn.

Nu måste vi definiera metoden drawGrid för att rita nätet och femtiofem på skärmen. Vi analyserar matrisen av femtiofem och konverterar koordinaterna till användargränssnittets koordinater. Sedan ritar vi varje femtiofem med motsvarande nummer i mitten:

private void drawGrid(Graphics2D g) {
  for (int i = 0; i < tiles.length; i++) {
    // vi konverterar 1D-koordinater till 2D-koordinater med hjälp av storleken på den 2D-array
    int r = i / size;
    int c = i % size;
    // vi konverterar till koordinater på UI
    int x = margin + c * tileSize;
    int y = margin + r * tileSize;
 
    // kontrollera specialfall för tom ruta
    if(tiles[i] == 0) {
      if (gameOver) {
        g.setColor(FOREGROUND_COLOR);
        drawCenteredString(g, "u2713", x, y);
      }
 
      continue;
    }
 
    // för andra rutor
    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);
  }
}

Slutligen kommer vi att åsidosätta paintComponent-metoden, som är en härledd klass av JPane. Vi använder sedan metoden drawGrid, och efter det — metoden drawStartMessage för att visa meddelandet som uppmanar att klicka för att starta spelet:

private void drawStartMessage(Graphics2D g) {
  if (gameOver) {
    g.setFont(getFont().deriveFont(Font.BOLD, 18));
    g.setColor(FOREGROUND_COLOR);
    String s = "Klicka för att starta ett nytt spel";
    g.drawString(s, (getWidth() - g.getFontMetrics().stringWidth(s)) / 2,
        getHeight() - margin);
  }
}
 
private void drawCenteredString(Graphics2D g, String s, int x, int y) {
  // centrera strängen s för den givna rutan (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);
}

Reagera på användarens handlingar i UI

För att spelet ska fungera som det ska, behöver vi hantera användarens handlingar i UI. För detta lägger vi till implementeringen av MouseListener på Jpanel och koden för att flytta plattorna som redan visats ovan:

addMouseListener(new MouseAdapter() {
  @Override
  public void mousePressed(MouseEvent e) {
    // används för att låta användare interagera med rutan genom att klicka
    // nu är det dags att implementera interaktion med användare för att flytta plattor för att lösa spelet!
    if (gameOver) {
      newGame();
    } else {
      // hämta positionen för klicket
      int ex = e.getX() - margin;
      int ey = e.getY() - margin;
 
      // klick i rutnätet?
      if (ex  gridSize  || ey  gridSize)
        return;
 
      // hämta positionen i rutnätet
      int c1 = ex / tileSize;
      int r1 = ey / tileSize;
 
      // hämta positionen för den tomma cellen
      int c2 = blankPos % size;
      int r2 = blankPos / size;
 
      // vi konverterar till 1D-koordinat
      int clickPos = r1 * size + c1;
 
      int dir = 0;
 
      // vi söker riktning för flera plattflyttingar på en gång
      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 flyttar plattorna i riktningen
        do {
          int newBlankPos = blankPos + dir;
          tiles[blankPos] = tiles[newBlankPos];
          blankPos = newBlankPos;
        } while(blankPos != clickPos);
 
        tiles[blankPos] = 0;
      }
 
      // vi kontrollerar om spelet är löst
      gameOver = isSolved();
    }
 
    // vi målar om panelen
    repaint();
  }
});

Koden placeras i klasskonstruktorn GameOfFifteen. I slutet anropar vi metoden newGame för att påbörja ett nytt spel.

Fullständig kod för spelet

Sista steget innan vi ser spelet i aktion är att sammanställa alla kodkomponenter. Så här 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 kommer att skapa ett 15-pussel med Java 8 och Swing
// Om du har några frågor, tveka inte att läsa kommentarerna ;)
public class GameOfFifteen extends JPanel { // vår ruta kommer att ritas i en dedikerad panel
 
  // Storleken på vår Game of Fifteen-instans
  private int size;
  // Antal brickor
  private int nbTiles;
  // Grid UI-dimension
  private int dimension;
  // Förgrundsfärg
  private static final Color FOREGROUND_COLOR = new Color(239, 83, 80); // vi använder en godtycklig färg
  // Slumptalsobjekt för att blanda brickorna
  private static final Random RANDOM = new Random();
  // Lagring av brickorna i en 1D-array av heltal
  private int[] tiles;
  // Storleken på en bricka i UI
  private int tileSize;
  // Positionen för den tomma brickan
  private int blankPos;
  // Marginal för rutan på ramen
  private int margin;
  // Grid UI-storlek
  private int gridSize;
  private boolean gameOver; // true om spelet är slut, false annars
 
  public GameOfFifteen(int size, int dim, int mar) {
    this.size = size;
    dimension = dim;
    margin = mar;
    
    // initiera brickor
    nbTiles = size * size - 1; // -1 eftersom vi inte räknar med den tomma brickan
    tiles = new int[size * size];
    
    // beräkna rutans storlek och brickstorlek
    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) {
        // används för att låta användarna interagera med rutan genom att klicka
        // det är dags att implementera interaktion med användarna för att flytta brickor för att lösa spelet!
        if (gameOver) {
          newGame();
        } else {
          // hämta positionen för klicket
          int ex = e.getX() - margin;
          int ey = e.getY() - margin;
          
          // klick i rutan?
          if (ex  gridSize  || ey  gridSize)
            return;
          
          // hämta position i rutan
          int c1 = ex / tileSize;
          int r1 = ey / tileSize;
          
          // hämta positionen för den tomma cellen
          int c2 = blankPos % size;
          int r2 = blankPos / size;
          
          // vi omvandlar till 1D-koordinat
          int clickPos = r1 * size + c1;
          
          int dir = 0;
          
          // vi söker riktning för flera brickflyttningar på en gång
          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 flyttar brickor i riktningen
            do {
              int newBlankPos = blankPos + dir;
              tiles[blankPos] = tiles[newBlankPos];
              blankPos = newBlankPos;
            } while(blankPos != clickPos);
            
            tiles[blankPos] = 0;
          }
          
          // vi kontrollerar om spelet är löst
          gameOver = isSolved();
        }
        
        // vi ritar om panelen
        repaint();
      }
    });
    
    newGame();
  }
 
  private void newGame() {
    do {
      reset(); // återställ i ursprungligt tillstånd
      shuffle(); // blanda
    } while(!isSolvable()); // gör det tills rutan blir lösbar
    
    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;
    }
  }
 
  // Endast hälften av permutationerna av pusslet är lösbara.
  // När en bricka följs av en bricka med högre värde räknas det
  // som en inversion. I vårt fall, med den tomma brickan i den lösta positionen,
  // måste antalet inversioner vara jämnt för att pusslet ska vara 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) // om den tomma brickan inte är i den lösta positionen => inte 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();
      // centrera på skärmen
      frame.setLocationRelativeTo(null);
      frame.setVisible(true);
    });
  }
 
 
}

Äntligen spelar vi!

Det är dags att starta spelet och se hur det fungerar. Spelet ska se ut som följande:

Låt oss försöka lösa pusslet. Om allt går bra får vi detta:

Och så var det klart. Förväntade du dig mer? 🙂

Skillbox rekommenderar:

• Praktisk kurs «Mobilutvecklare PRO».
• Tillämplig onlinekurs «Dataanalytiker med Python».
• Tvåårig praktisk kurs «Jag är webbutvecklare PRO».

Källa: habr.com