"Fifteen" en Java - comment développer un jeu à part entière

Fifteen, ou Fifteen, est un excellent exemple d'un jeu de logique simple populaire dans le monde entier. Afin de résoudre le puzzle, vous devez organiser les carrés avec des nombres dans l'ordre, du plus petit au plus grand. Ce n'est pas facile, mais intéressant.

Dans le tutoriel d'aujourd'hui, nous montrons comment développer Fifteen en Java 8 avec Eclipse. Pour développer l'interface utilisateur, nous utiliserons l'API Swing.

Nous vous rappelons: pour tous les lecteurs de «Habr» - une remise de 10 000 roubles lors de l'inscription à un cours Skillbox en utilisant le code promo «Habr».

Skillbox recommande: Le cours éducatif en ligne "Profession Java-developer" .

Conception du jeu

À ce stade, vous devez définir les propriétés:

• Taille - la taille du terrain de jeu;
• nbTiles - le nombre de spots sur le terrain. nbTiles = taille * taille - 1;
• Tiles est une balise, qui est un tableau unidimensionnel d'entiers. Chaque balise recevra une valeur unique dans la plage [0, nbTiles]. Zéro indique un carré vide;
• blankPos - position du carré vide.

Logique du jeu

Vous devez définir une méthode de réinitialisation utilisée pour initialiser une nouvelle position de jeu. Nous définissons donc la valeur de chaque élément du tableau de balises. Eh bien, nous mettons ensuite blankPos à la dernière position du tableau.

Vous avez également besoin de la méthode shuffle pour mélanger un tableau de balises. Nous n'incluons pas de balise vide dans le processus de mélange pour la laisser dans sa position précédente.

Étant donné que seulement la moitié des positions de départ possibles du puzzle ont une solution, vous devez vérifier le résultat de mélange résultant pour vous assurer que la disposition actuelle est généralement résolue. Pour ce faire, nous définissons la méthode isSolvable.

Si une balise spécifique est précédée d'une balise avec une valeur plus élevée, cela est considéré comme une inversion. Lorsque la balise vide est en place, le nombre d'inversions doit être égal pour que le puzzle soit résoluble. Donc, nous comptons le nombre d'inversions et retournons vrai si le nombre est pair.

Ensuite, il est important de définir la méthode isSolved pour vérifier si notre alignement Game Of Fifteen est résolu. Tout d'abord, nous regardons où se trouve la balise vide. Si dans la position initiale, l'alignement actuel est nouveau, ce qui n'a pas été décidé auparavant. Ensuite, nous itérons sur les tuiles dans l'ordre inverse, et si la valeur de la balise diffère de l'index +1 correspondant, retourne false. Sinon, il est temps de revenir vrai à la fin de la méthode, car le puzzle est déjà résolu.

Une autre méthode à définir est newGame. Il est nécessaire de créer une nouvelle instance du jeu. Pour ce faire, nous réinitialisons le terrain de jeu, puis le mélangeons et continuons jusqu'à ce que la position de jeu soit résoluble.

Voici un exemple de code avec une logique d'étiquette de clé:

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

Enfin, vous devez programmer le mouvement des taches dans le tableau. Ce code sera appelé ultérieurement via un rappel pour répondre au mouvement du curseur. Notre jeu prendra en charge plusieurs mouvements de tuiles simultanément. Ainsi, après avoir converti la position appuyée sur l'écran en une balise, nous obtenons la position de la balise vide et recherchons la direction du mouvement pour prendre en charge plusieurs de ses mouvements en même temps.

Voici un exemple de 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; 

Nous développons l'interface utilisateur sur Swing API

Il est temps de faire l'interface. Nous prenons d'abord la classe Jpanel. Ensuite, nous dessinons des taches sur le terrain - pour calculer les tailles de chacun, nous utiliserons les données spécifiées dans le paramètre constructeur du jeu:

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

La marge est également un paramètre spécifié dans le constructeur du jeu.

Vous devez maintenant définir la méthode drawGrid pour dessiner la grille et les points sur l'écran. Nous analysons le tableau de balises et convertissons les coordonnées en coordonnées de l'interface utilisateur. Dessinez ensuite chaque étiquette avec le numéro correspondant au centre:

 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); } } 

Enfin, nous redéfinissons la méthode paintComponent, qui est un dérivé de la classe JPane. Ensuite, nous utilisons la méthode drawGrid, puis nous utilisons la méthode drawStartMessage pour afficher un message nous invitant à cliquer pour démarrer le jeu:

 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); } 

Nous répondons aux actions des utilisateurs dans l'interface utilisateur

Pour que le jeu suive son cours, il est nécessaire de traiter les actions des utilisateurs dans l'interface utilisateur. Pour ce faire, ajoutez l'implémentation MouseListener sur le Jpanel et le code pour déplacer les spots déjà indiqués ci-dessus:

 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(); } }); 

Nous plaçons le code dans le constructeur de la classe GameOfFifteen. À la toute fin, nous appelons la méthode newGame pour démarrer une nouvelle partie.

Code de jeu complet

La dernière étape, avant de voir le jeu en action, consiste à collecter tous les éléments de code ensemble. Voici le résultat:

 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); }); } } 

Enfin, jouez!

Il est temps de démarrer le jeu et de le vérifier en action. Le champ doit ressembler à ceci:



Essayer de résoudre le puzzle. Si tout s'est bien passé, nous obtenons ceci:



C’est tout. Vous attendiez-vous à plus? :)

Skillbox recommande:

• Cours pratique "Mobile Developer PRO" .
• Cours en ligne Applied Python Data Analyst .
• Cours pratique de deux ans "Je suis un développeur web PRO . "