"Tag" sa Java - kung paano bumuo ng isang ganap na laro

"Labinlima" o "Labinlima" ay isang mahusay na halimbawa ng isang simpleng laro ng lohika na sikat sa buong mundo. Upang malutas ang puzzle, kailangan mong ayusin ang mga parisukat na may mga numero sa pagkakasunud-sunod, mula sa pinakamaliit hanggang sa pinakamalaki. Ito ay hindi madali, ngunit ito ay kawili-wili.

Sa tutorial ngayon, ipapakita namin sa iyo kung paano bumuo ng Labinlimang sa Java 8 gamit ang Eclipse. Upang bumuo ng UI gagamitin namin ang Swing API.

Pinapaalala namin sa iyo: para sa lahat ng mga mambabasa ng "Habr" - isang diskwento na 10 rubles kapag nag-enroll sa anumang kurso sa Skillbox gamit ang code na pang-promosyon ng "Habr".

Inirerekomenda ng Skillbox ang: Online na kursong pang-edukasyon "Propesyon Java Developer".

Disenyo ng laro

Sa yugtong ito kailangan mong tukuyin ang mga katangian:

• Sukat - laki ng larangan ng paglalaro;
• nbTiles — bilang ng mga tag sa field. nbTiles = laki*laki - 1;
• Ang mga tile ay isang tag na isang one-dimensional na hanay ng mga integer. Ang bawat isa sa mga tag ay makakatanggap ng natatanging halaga sa hanay na [0, nbTiles]. Ang zero ay nagpapahiwatig ng isang walang laman na parisukat;
• blankPos — posisyon ng walang laman na parisukat.

Logic ng laro

Kailangan naming tukuyin ang isang paraan ng pag-reset na ginamit upang simulan ang isang bagong posisyon ng laro. Sa ganitong paraan nagtatakda kami ng halaga para sa bawat elemento ng hanay ng mga tag. Well, pagkatapos ay inilalagay namin ang blankPos sa huling posisyon ng array.

Kailangan din namin ng paraan ng shuffle para i-shuffle ang hanay ng mga tag. Hindi namin isinasama ang walang laman na tag sa proseso ng pag-shuffling upang iwanan ito sa parehong posisyon.

Dahil kalahati lamang ng mga posibleng panimulang posisyon ng puzzle ang may solusyon, kailangan mong suriin ang resultang shuffle na resulta upang matiyak na ang kasalukuyang layout ay nalulusaw. Upang gawin ito, tinukoy namin ang isSolvable na paraan.

Kung ang isang partikular na tag ay pinangungunahan ng isang tag na may mas mataas na halaga, ito ay itinuturing na isang pagbabaligtad. Kapag ang walang laman na lugar ay nasa lugar, ang bilang ng mga pagbabaligtad ay dapat na pantay para sa puzzle upang malutas. Kaya binibilang namin ang bilang ng mga inversion at ibinabalik ang true kung pantay ang bilang.

Pagkatapos ay mahalaga na tukuyin ang isSolved na paraan upang masuri kung nalutas ang aming layout ng Game Of Fifteen. Tumingin muna kami kung saan ang bakanteng lugar. Kung sa paunang posisyon, kung gayon ang kasalukuyang pagkakahanay ay bago, hindi napagpasyahan dati. Pagkatapos ay inuulit namin ang mga tile sa reverse order, at kung iba ang value ng tag sa katumbas na index +1, ibinabalik namin ang false. Kung hindi man, sa pagtatapos ng pamamaraan, oras na upang ibalik ang totoo dahil nalutas na ang palaisipan.

Ang isa pang paraan na kailangang tukuyin ay ang newGame. Kinakailangang lumikha ng bagong instance ng laro. Upang gawin ito, i-reset namin ang playing field, pagkatapos ay i-shuffle ito at magpatuloy hanggang sa malutas ang posisyon ng paglalaro.

Narito ang isang halimbawang code na may pangunahing lohika ng tag:

private void newGame() {
  do {
    reset(); // reset in initial state
    shuffle(); // shuffle
  } while(!isSolvable()); // make it until grid be solvable
 
  gameOver = false;
}
 
private void reset() {
  for (int i = 0; i < tiles.length; i++) {
    tiles[i] = (i + 1) % tiles.length;
  }
 
  // we set blank cell at the last
  blankPos = tiles.length - 1;
}
 
private void shuffle() {
  // don't include the blank tile in the shuffle, leave in the solved position
  int n = nbTiles;
 
  while (n > 1) {
    int r = RANDOM.nextInt(n--);
    int tmp = tiles[r];
    tiles[r] = tiles[n];
    tiles[n] = tmp;
  }
}
 
// Only half permutations of the puzzle are solvable/
// Whenever a tile is preceded by a tile with higher value it counts
// as an inversion. In our case, with the blank tile in the solved position,
// the number of inversions must be even for the puzzle to be solvable
private boolean isSolvable() {
  int countInversions = 0;
 
  for (int i = 0; i < nbTiles; i++) {
    for (int j = 0; j < i; j++) {
      if (tiles[j] > tiles[i])
        countInversions++;
    }
  }
 
  return countInversions % 2 == 0;
}
 
private boolean isSolved() {
  if (tiles[tiles.length - 1] != 0) // if blank tile is not in the solved position ==> not solved
    return false;
 
  for (int i = nbTiles - 1; i >= 0; i--) {
    if (tiles[i] != i + 1)
      return false;
  }
 
  return true;
}

Sa wakas, kailangan mong i-program ang paggalaw ng mga tag sa array. Ang code na ito ay tatawagin sa ibang pagkakataon sa pamamagitan ng isang callback upang tumugon sa paggalaw ng cursor. Susuportahan ng aming laro ang maraming paggalaw ng tile sa parehong oras. Kaya, pagkatapos naming ma-convert ang pinindot na posisyon sa screen sa isang tag, nakukuha namin ang posisyon ng walang laman na tag at naghahanap ng direksyon ng paggalaw upang suportahan ang ilan sa mga paggalaw nito nang sabay-sabay.

Narito ang isang halimbawang code:

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

Bumubuo kami ng UI gamit ang Swing API

Oras na para magtrabaho sa interface. Una naming kukunin ang klase ng Jpanel. Pagkatapos ay gumuhit kami ng mga tag sa field - upang kalkulahin ang mga sukat ng bawat isa, gagamitin namin ang data na tinukoy sa parameter ng tagabuo ng laro:

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

Ang margin ay isa ring parameter na itinakda sa tagabuo ng laro.

Ngayon kailangan nating tukuyin ang paraan ng drawGrid upang iguhit ang grid at mga spot sa screen. Sinusuri namin ang hanay ng mga tag at kino-convert ang mga coordinate sa mga coordinate ng user interface. Pagkatapos ay iguhit ang bawat lugar na may kaukulang numero sa gitna:

private void drawGrid(Graphics2D g) {
  for (int i = 0; i < tiles.length; i++) {
    // we convert 1D coords to 2D coords given the size of the 2D Array
    int r = i / size;
    int c = i % size;
    // we convert in coords on the UI
    int x = margin + c * tileSize;
    int y = margin + r * tileSize;
 
    // check special case for blank tile
    if(tiles[i] == 0) {
      if (gameOver) {
        g.setColor(FOREGROUND_COLOR);
        drawCenteredString(g, "u2713", x, y);
      }
 
      continue;
    }
 
    // for other tiles
    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);
  }
}

Sa wakas, i-override natin ang paraan ng paintComponent, na nagmula sa klase ng JPane. Pagkatapos ay ginagamit namin ang paraan ng drawGrid, na sinusundan ng paraan ng drawStartMessage upang magpakita ng mensahe na nag-uudyok sa amin na mag-click upang simulan ang laro:

private void drawStartMessage(Graphics2D g) {
  if (gameOver) {
    g.setFont(getFont().deriveFont(Font.BOLD, 18));
    g.setColor(FOREGROUND_COLOR);
    String s = "Click to start new game";
    g.drawString(s, (getWidth() - g.getFontMetrics().stringWidth(s)) / 2,
        getHeight() - margin);
  }
}
 
private void drawCenteredString(Graphics2D g, String s, int x, int y) {
  // center string s for the given tile (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);
}

Tumutugon sa mga pagkilos ng user sa UI

Upang tumakbo ang laro sa kurso nito, kinakailangan na iproseso ang mga aksyon ng user sa UI. Upang gawin ito, idagdag ang pagpapatupad ng MouseListener sa Jpanel at ang code para sa paglipat ng mga spot, na ipinakita na sa itaas:

addMouseListener(new MouseAdapter() {
  @Override
  public void mousePressed(MouseEvent e) {
    // used to let users to interact on the grid by clicking
    // it's time to implement interaction with users to move tiles to solve the game !
    if (gameOver) {
      newGame();
    } else {
      // 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;
      }
 
      // we check if game is solved
      gameOver = isSolved();
    }
 
    // we repaint panel
    repaint();
  }
});

Inilalagay namin ang code sa constructor ng klase ng GameOfFifteen. Sa pinakadulo, tinatawag namin ang newGame method para magsimula ng bagong laro.

Buong code ng laro

Ang huling hakbang bago makita ang laro sa aksyon ay pagsamahin ang lahat ng mga elemento ng code. Narito kung ano ang mangyayari:

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;
 
// We are going to create a Game of 15 Puzzle with Java 8 and Swing
// If you have some questions, feel free to read comments ;)
public class GameOfFifteen extends JPanel { // our grid will be drawn in a dedicated Panel
 
  // Size of our Game of Fifteen instance
  private int size;
  // Number of tiles
  private int nbTiles;
  // Grid UI Dimension
  private int dimension;
  // Foreground Color
  private static final Color FOREGROUND_COLOR = new Color(239, 83, 80); // we use arbitrary color
  // Random object to shuffle tiles
  private static final Random RANDOM = new Random();
  // Storing the tiles in a 1D Array of integers
  private int[] tiles;
  // Size of tile on UI
  private int tileSize;
  // Position of the blank tile
  private int blankPos;
  // Margin for the grid on the frame
  private int margin;
  // Grid UI Size
  private int gridSize;
  private boolean gameOver; // true if game over, false otherwise
 
  public GameOfFifteen(int size, int dim, int mar) {
    this.size = size;
    dimension = dim;
    margin = mar;
    
    // init tiles
    nbTiles = size * size - 1; // -1 because we don't count blank tile
    tiles = new int[size * size];
    
    // calculate grid size and tile 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) {
        // used to let users to interact on the grid by clicking
        // it's time to implement interaction with users to move tiles to solve the game !
        if (gameOver) {
          newGame();
        } else {
          // 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;
          }
          
          // we check if game is solved
          gameOver = isSolved();
        }
        
        // we repaint panel
        repaint();
      }
    });
    
    newGame();
  }
 
  private void newGame() {
    do {
      reset(); // reset in intial state
      shuffle(); // shuffle
    } while(!isSolvable()); // make it until grid be solvable
    
    gameOver = false;
  }
 
  private void reset() {
    for (int i = 0; i < tiles.length; i++) {
      tiles[i] = (i + 1) % tiles.length;
    }
    
    // we set blank cell at the last
    blankPos = tiles.length - 1;
  }
 
  private void shuffle() {
    // don't include the blank tile in the shuffle, leave in the solved position
    int n = nbTiles;
    
    while (n > 1) {
      int r = RANDOM.nextInt(n--);
      int tmp = tiles[r];
      tiles[r] = tiles[n];
      tiles[n] = tmp;
    }
  }
 
  // Only half permutations of the puzzle are solvable.
  // Whenever a tile is preceded by a tile with higher value it counts
  // as an inversion. In our case, with the blank tile in the solved position,
  // the number of inversions must be even for the puzzle to be solvable
  private boolean isSolvable() {
    int countInversions = 0;
    
    for (int i = 0; i < nbTiles; i++) {
      for (int j = 0; j < i; j++) {
        if (tiles[j] > tiles[i])
          countInversions++;
      }
    }
    
    return countInversions % 2 == 0;
  }
 
  private boolean isSolved() {
    if (tiles[tiles.length - 1] != 0) // if blank tile is not in the solved position ==> not solved
      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 < tiles.length; i++) {
      // we convert 1D coords to 2D coords given the size of the 2D Array
      int r = i / size;
      int c = i % size;
      // we convert in coords on the UI
      int x = margin + c * tileSize;
      int y = margin + r * tileSize;
      
      // check special case for blank tile
      if(tiles[i] == 0) {
        if (gameOver) {
          g.setColor(FOREGROUND_COLOR);
          drawCenteredString(g, "u2713", x, y);
        }
        
        continue;
      }
      
      // for other tiles
      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);
    }
  }
 
  private void drawStartMessage(Graphics2D g) {
    if (gameOver) {
      g.setFont(getFont().deriveFont(Font.BOLD, 18));
      g.setColor(FOREGROUND_COLOR);
      String s = "Click to start new game";
      g.drawString(s, (getWidth() - g.getFontMetrics().stringWidth(s)) / 2,
          getHeight() - margin);
    }
  }
 
  private void drawCenteredString(Graphics2D g, String s, int x, int y) {
    // center string s for the given tile (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);
  }
 
  public static void main(String[] args) {
    SwingUtilities.invokeLater(() -> {
      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();
      // center on the screen
      frame.setLocationRelativeTo(null);
      frame.setVisible(true);
    });
  }
 
 
}

Sa wakas, laro tayo!

Oras na para ilunsad ang laro at subukan ito sa aksyon. Ang patlang ay dapat magmukhang ganito:

Subukan nating lutasin ang puzzle. Kung naging maayos ang lahat, makukuha natin ito:

Iyon lang. Nag-expect ka pa ba? 🙂

Inirerekomenda ng Skillbox ang:

• Praktikal na kurso "Mobile Developer PRO".
• Nag-apply online na kurso "Python Data Analyst".
• Dalawang taong praktikal na kurso "Ako ay isang PRO web developer".

Pinagmulan: www.habr.com