«Пятнашка» на Java — как да разработим пълноценна игра

«Петнадесет», или «Пятнашка» — отличен пример за проста логическа игра, популярна в целия свят. За да се реши пъзелът, е необходимо да се подредят квадратите с числа по ред, от по-малкото към по-голямото. Това не е лесно, но е интересно.

В днешния урок показваме как да разработим «Пятнашка» на Java 8 с Eclipse. За разработка на UI ще използваме Swing API.

Напомняме: за всички читатели на «Хабра» — отстъпка от 10 000 рубли при записване на всеки курс Skillbox с промокод «Хабр».

Skillbox препоръчва: Образователен онлайн курс «Професия Java-разработчик».

Дизайн на играта

На този етап е нужно да определим свойствата:

• Size — размер на игралното поле;
• nbTiles — брой на петнашките на полето. nbTiles = size*size — 1;
• Tiles — петнашкa, представляваща едномерен масив от цели числа. Всяка от петнашките ще получи уникална стойност в диапазона [0, nbTiles]. Нулата обозначава празен квадрат;
• blankPos — позиция на празния квадрат.

Логика на играта

Нужно е да определим метод за нулиране (reset), използван за инициализиране на нова игрова позиция. Така задаваме стойност за всеки елемент от масива на петнашките. След това поставяме blankPos в последната позиция на масива.

Също така е нужен метод shuffle за разбъркване на масива на петнашките. Не включваме празната петнашка в процеса на разбъркване, за да я оставим на предишната ѝ позиция.

Тъй като само половината от възможните стартови позиции на пъзела имат решение, е нужно да проверим получения резултат от разбъркването, за да сме сигурни, че текущото разположение изобщо е разрешимо. За това определяме метода isSolvable.

Ако конкретна петнашка е предшествана от петнашка с по-висока стойност, това се счита за инверсия. Когато празната петнашка е на своето място, бройката на инверсиите трябва да е четна, за да бъде пъзелът разрешим. Така че, броим инверсиите и връщаме true, ако числото е четно.

След това е важно да определим метода isSolved, за да проверим дали нашето разположение Game Of Fifteen е решено. Първо гледаме къде се намира празната петнашка. Ако е в началната позиция, текущото разположение е ново, което не е разрешавано преди. След това обикаляме плочките в обратен ред и, ако стойността на петнашката се различава от съответния индекс +1, връщаме false. В противен случай, в края на метода е време да върнем true, тъй като пъзелът вече е решен.

Още един метод, който трябва да определи, е newGame. Той е необходим за създаване на нова инстанция на играта. За целта ние нулираме игровото поле, след което го разбъркваме и продължаваме, докато игровата позиция не стане разрешима.

Ето пример за код с ключовата логика на петанките:

private void newGame() {
  do {
    reset(); // нулиране в начално състояние
    shuffle(); // разбъркване
  } while(!isSolvable()); // правим го, докато мрежата стане разрешима
 
  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;
  }
}
 
// Само половината от пермутациите на пъзела са разрешими/
// Всяка пътка, която е предшествана от пътка с по-висока стойност, се брои
// като инверсия. В нашия случай, с празната плочка в разрешената позиция,
// броят на инверсиите трябва да е четен, за да е пъзелът разрешим
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) // ако празната плочка не е в разрешената позиция ==> не е решен
    return false;
 
  for (int i = nbTiles - 1; i >= 0; i--) {
    if (tiles[i] != i + 1)
      return false;
  }
 
  return true;
}

Накрая трябва да програмираме движението на петанките в масива. Този код ще бъде извикан по-късно чрез обратен повик (callback), за да реагира на движението на курсора. Нашата игра ще поддържа многобройни движения на плочки едновременно. Следователно, след като конвертираме натиснатата позиция на екрана в петанка, получаваме позицията на празната петанка и търсим посоката на движение, за да поддържаме множество нейни движения едновременно.

Ето пример за код:

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

Разработваме интерфейс на Swing API

Сега е време да се занимаем с интерфейса. Първо вземаме класа Jpanel. След това рисуваме петанките на полето - за да изчислим размерите на всяка, ще използваме данните, зададени в параметъра на конструктора на играта:

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

Margin също е параметър, зададен в конструктора на играта.

Сега трябва да определим метода drawGrid за рисуване на мрежата и петанките на екрана. Анализираме масива на петанките и конвертираме координатите в координати на потребителския интерфейс. След това ще нарисуваме всяка петанка със съответния номер в центъра:

private void drawGrid(Graphics2D g) {
  for (int i = 0; i < tiles.length; i++) {
    // конвертираме 1D координати в 2D координати на базата на размера на 2D масива
    int r = i / size;
    int c = i % size;
    // конвертираме в координати на интерфейса
    int x = margin + c * tileSize;
    int y = margin + r * tileSize;
 
    // проверка за специален случай с празна плочка
    if(tiles[i] == 0) {
      if (gameOver) {
        g.setColor(FOREGROUND_COLOR);
        drawCenteredString(g, "u2713", x, y);
      }
 
      continue;
    }
 
    // за другите плочки
    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);
  }
}

Накрая, ще преопределим метода paintComponent, който произлиза от класа JPane. След това използваме метода drawGrid и след него — метода drawStartMessage, за да покажем съобщение, което предлага кликване за стартиране на играта:

private void drawStartMessage(Graphics2D g) {
  if (gameOver) {
    g.setFont(getFont().deriveFont(Font.BOLD, 18));
    g.setColor(FOREGROUND_COLOR);
    String s = "Кликнете, за да стартирате нова игра";
    g.drawString(s, (getWidth() - g.getFontMetrics().stringWidth(s)) / 2,
        getHeight() - margin);
  }
}
 
private void drawCenteredString(Graphics2D g, String s, int x, int y) {
  // центрираме низ s за дадената плочка (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);
}

Реагираме на действията на потребителя в интерфейса

За да играта протича нормално, е необходимо да обработваме действията на потребителя в интерфейса. За тази цел добавяме имплементация на MouseListener в Jpanel и код за движение на плочките, който вече е показан по-горе:

addMouseListener(new MouseAdapter() {
  @Override
  public void mousePressed(MouseEvent e) {
    // използва се, за да позволи на потребителите да взаимодействат с мрежата чрез кликване
    // време е да реализираме взаимодействие с потребителите за движение на плочките за решаване на играта!
    if (gameOver) {
      newGame();
    } else {
      // получаваме позицията на клика
      int ex = e.getX() - margin;
      int ey = e.getY() - margin;
 
      // клик в мрежата?
      if (ex  gridSize  || ey  gridSize)
        return;
 
      // получаваме позицията в мрежата
      int c1 = ex / tileSize;
      int r1 = ey / tileSize;
 
      // получаваме позицията на празната клетка
      int c2 = blankPos % size;
      int r2 = blankPos / size;
 
      // конвертираме в 1D координати
      int clickPos = r1 * size + c1;
 
      int dir = 0;
 
      // търсим посока за многократни движения на плочки наведнъж
      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) {
        // движим плочките в посоката
        do {
          int newBlankPos = blankPos + dir;
          tiles[blankPos] = tiles[newBlankPos];
          blankPos = newBlankPos;
        } while(blankPos != clickPos);
 
        tiles[blankPos] = 0;
      }
 
      // проверяваме дали играта е решена
      gameOver = isSolved();
    }
 
    // прерисуваме панела
    repaint();
  }
});

Кодът се поставя в конструктора на класа GameOfFifteen. В края накрая извикваме метода newGame, за да започнем нова игра.

Пълен код на играта

Последната стъпка, преди да видите играта в действие, е да съберете всички елементи на кода заедно. Ето какво ще получите:

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;
 
// Ще създадем игра на 15 с Java 8 и Swing
// Ако имате въпроси, не се колебайте да прочетете коментарите ;)
public class GameOfFifteen extends JPanel { // нашата мрежа ще бъде нарисувана в специализиран панел
 
  // Размер на инстанцията на играта Голяма осем
  private int size;
  // Брой плочки
  private int nbTiles;
  // UI Размер на матрицата
  private int dimension;
  // Основен цвят
  private static final Color FOREGROUND_COLOR = new Color(239, 83, 80); // използваме произволен цвят
  // Случаен обект за разбъркване на плочките
  private static final Random RANDOM = new Random();
  // Съхраняване на плочките в 1D масив от цели числа
  private int[] tiles;
  // Размер на плочката в UI
  private int tileSize;
  // Позиция на празната плочка
  private int blankPos;
  // Margin за матрицата на рамката
  private int margin;
  // Размер на UI матрицата
  private int gridSize;
  private boolean gameOver; // true ако играта е завършила, false в противен случай
 
  public GameOfFifteen(int size, int dim, int mar) {
    this.size = size;
    dimension = dim;
    margin = mar;
    
    // инициализиране на плочките
    nbTiles = size * size - 1; // -1, защото не броим празната плочка
    tiles = new int[size * size];
    
    // изчислете размера на матрицата и размера на плочките
    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) {
        // използва се за позволяване на потребителите да взаимодействат с матрицата чрез кликване
        // време е да реализираме взаимодействие с потребителите за придвижване на плочките, за да решим играта !
        if (gameOver) {
          newGame();
        } else {
          // получаване на позицията на клика
          int ex = e.getX() - margin;
          int ey = e.getY() - margin;
          
          // кликнете в мрежата ?
          if (ex  gridSize  || ey  gridSize)
            return;
          
          // получаване на позицията в матрицата
          int c1 = ex / tileSize;
          int r1 = ey / tileSize;
          
          // получаване на позицията на празната клетка
          int c2 = blankPos % size;
          int r2 = blankPos / size;
          
          // превръщаме в 1D координати
          int clickPos = r1 * size + c1;
          
          int dir = 0;
          
          // търсим посока за множество движения на плочки наведнъж
          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) {
            // движим плочките в посоката
            do {
              int newBlankPos = blankPos + dir;
              tiles[blankPos] = tiles[newBlankPos];
              blankPos = newBlankPos;
            } while(blankPos != clickPos);
            
            tiles[blankPos] = 0;
          }
          
          // проверяваме дали играта е решена
          gameOver = isSolved();
        }
        
        // освежаваме панела
        repaint();
      }
    });
    
    newGame();
  }
 
  private void newGame() {
    do {
      reset(); // нулиране в начално състояние
      shuffle(); // разбъркване
    } while(!isSolvable()); // да го направим, докато матрицата не стане решима
    
    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;
    }
  }
 
  // Само половината от перестановките на пъзела са решими.
  // Всякога, когато плочка е предшествана от друга с по-висока стойност, това се брои
  // като инверсия. В нашия случай, с празната плочка в решената позиция,
  // броят на инверсиите трябва да бъде четен за пъзела да бъде решим
  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) // ако празната плочка не е в решената позиция ==> не е решена
      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("Игра на Петнадесет");
      frame.setResizable(false);
      frame.add(new GameOfFifteen(4, 550, 30), BorderLayout.CENTER);
      frame.pack();
      // центрирайте на екрана
      frame.setLocationRelativeTo(null);
      frame.setVisible(true);
    });
  }
 
 
}

Накрая, играем!

Време е да стартираме играта и да я проверим в действие. Полето трябва да изглежда по следния начин:

Опитваме се да решим головоломка. Ако всичко е минало успешно, получаваме това:

И това е всичко. Очаквахте ли повече? 🙂

Skillbox препоръчва:

• Практически курс «Мобилен разработчик ПРО».
• Прикладен онлайн курс «Аналитик на данни с Python».
• Двугодишен практически курс «Аз съм уеб разработчик PRO».

Източник: habr.com