java - 如何在 Java 的纸牌游戏中显示纸牌并使其可点击进行选择？

Question

我正在用 Java 编写纸牌游戏，一切都很顺利，但我遇到了一个关于用户界面的问题。有 4 名玩家(1 人 3 AI)和 54 张牌。我想让每个玩家的牌在屏幕上绘制成 4 个方向(从左上到右)，并且基本上只有一个用于人类牌的 MouseListener ，以便在玩移动之前选择一张牌(让牌移动)向上一点，这样您就知道它已被选中)，而其他玩家的牌已绘制其背面，并且不需要任何监听器。我正在进行绝对定位，卡片应显示如下: Image

目前，我正在扩展 JComponent 并在其 PaintComponent 方法中测试绘图。由于卡片被放置并绘制在另一张卡片的顶部，因此我无法想象使用坐标，而且由于我有一个用于卡片的类 Card ，因此无法拥有 Card实例和绘制的图像相连。一个想法是为每个人类卡片使用 JLabel ，向其添加一个 ImageIcon 作为卡片表示，并为每个标签添加一个 MouseListener ，以便鼠标点击很容易确定。但问题是如何在每个玩家移动时绘制和更新它们，因为它会自动为仅在 paintComponent 中绘制为图像的其他玩家卡完成。我确实尝试在 paintComponent 方法内创建 JLabels 并将其添加到组件中，但我发现完全不建议这样做。您对我应该遵循什么想法有什么建议吗？

谢谢您并致以问候

Answer 1

can't have the Card instance and the drawn image connected

为什么不呢？基本上， Card 是一种数据状态。 Hand 只是 Card 的集合。这些基本上建立了模型的概念。数据本身与显示它的 View 分开。

这意味着，在大多数情况下， View 变得愚蠢。它只是获取模型并以某种方式呈现它，允许用户与其交互。

就您而言，您可以使用矩形来表示物理卡的边界。单击时，您将遍历手并使用 Rectangle 测试是否在每个 Rectangle(映射回 Card)的边界内单击了鼠标#包含

现在，以下示例是“非常”基本的。它只关注单个玩家的手牌，但它应该为您提供可以驱动概念的想法。

import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.util.ArrayList;
import java.util.Collections;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class SimpleCards {

    public static void main(String[] args) {
        new SimpleCards();
    }

    public SimpleCards() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                Deck.INSTANCE.shuffle();
                List<Hand> players = new ArrayList<>(5);
                for (int index = 0; index < 5; index++) {
                    players.add(new Hand());
                }

                for (int index = 0; index < 5; index++) {
                    for (Hand hand : players) {
                        hand.add(Deck.INSTANCE.pop());
                    }
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new GamePane(players));
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class Hand {

        private List<Card> cards;

        public Hand() {
            cards = new ArrayList<>(25);
        }

        public void add(Card card) {
            cards.add(card);
        }

        public int size() {
            return cards.size();
        }

        public Iterable<Card> cards() {
            return cards;
        }

        public Iterable<Card> reveresed() {
            List<Card> reversed = new ArrayList<>(cards);
            Collections.reverse(reversed);
            return reversed;
        }
    }

    public static class Card {

        private Suit suit;
        private Face face;

        public Card(Suit suit, Face face) {
            this.suit = suit;
            this.face = face;
        }

        public Suit getSuit() {
            return suit;
        }

        public Face getFace() {
            return face;
        }

    }

    public enum Deck {

        INSTANCE;

        private List<Card> cards;
        private List<Card> playDeck;

        private Deck() {
            cards = new ArrayList<>(52);
            for (Suit suit : Suit.items) {
                for (Face face : Face.items) {
                    cards.add(new Card(suit, face));
                }
            }
            playDeck = new ArrayList<>(cards);
        }

        public void shuffle() {
            playDeck.clear();
            playDeck.addAll(cards);
            Collections.shuffle(playDeck);
        }

        public Card pop() {
            if (playDeck.isEmpty()) {
                return null;
            }
            return playDeck.remove(0);
        }

        public void push(Card card) {
            playDeck.add(card);
        }

    }

    enum Face {
        ONE("1"), TWO("2"), THREE("3"), FOUR("4"), FIVE("5"), SIX("6"), SEVEN("7"), EIGHT("8"), NINE("9"), JACK("J"), QUEEN("Q"), KING("K");

        private String value;

        private Face(String value) {
            this.value = value;
        }

        public String getValue() {
            return value;
        }

        private static Face[] items = new Face[]{
            ONE, TWO, THREE, FOUR, FIVE, SIX, SEVEN, EIGHT, NINE, JACK, QUEEN, KING
        };
    }

    enum Suit {
        CLUBS("♣"), DIAMONDS("♦"), HEARTS("♥"), SPADES("♠");

        private String value;

        private Suit(String value) {
            this.value = value;
        }

        public String getValue() {
            return value;
        }

        public static Suit[] items = new Suit[]{
            CLUBS, DIAMONDS, HEARTS, SPADES
        };
    }

    public class GamePane extends JPanel {

        private List<Hand> players;

        private Map<Card, Rectangle> mapCards;

        private Card selected;

        public GamePane(List<Hand> players) {
            this.players = players;
            mapCards = new HashMap<>(players.size() * 5);

            addMouseListener(new MouseAdapter() {
                @Override
                public void mouseClicked(MouseEvent e) {
                    if (selected != null) {
                        Rectangle bounds = mapCards.get(selected);
                        bounds.y += 20;
                        repaint();
                    }
                    selected = null;
                    // This is done backwards, as the last card is on
                    // top.  Of course you could render the cards
                    // in reverse order, but you get the idea
                    for (Card card : players.get(0).reveresed()) {
                        Rectangle bounds = mapCards.get(card);
                        if (bounds.contains(e.getPoint())) {
                            selected = card;
                            bounds.y -= 20;
                            repaint();
                            break;
                        }
                    }
                }
            });
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(400, 400);
        }

        @Override
        public void invalidate() {
            super.invalidate();
            mapCards.clear();
            Hand hand = players.get(0);
            int cardHeight = (getHeight() - 20) / 3;
            int cardWidth = (int) (cardHeight * 0.6);
            int xDelta = cardWidth / 2;
            int xPos = (int) ((getWidth() / 2) - (cardWidth * (hand.size() / 4.0)));
            int yPos = (getHeight() - 20) - cardHeight;
            for (Card card : hand.cards()) {
                Rectangle bounds = new Rectangle(xPos, yPos, cardWidth, cardHeight);
                mapCards.put(card, bounds);
                xPos += xDelta;
            }
        }

        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2d = (Graphics2D) g.create();
            Hand hand = players.get(0);
            for (Card card : hand.cards) {
                Rectangle bounds = mapCards.get(card);
                System.out.println(bounds);
                if (bounds != null) {
                    g2d.setColor(Color.WHITE);
                    g2d.fill(bounds);
                    g2d.setColor(Color.BLACK);
                    g2d.draw(bounds);
                    Graphics2D copy = (Graphics2D) g2d.create();
                    paintCard(copy, card, bounds);
                    copy.dispose();
                }
            }
            g2d.dispose();
        }

        protected void paintCard(Graphics2D g2d, Card card, Rectangle bounds) {
            g2d.translate(bounds.x + 5, bounds.y + 5);
            g2d.setClip(0, 0, bounds.width - 5, bounds.height - 5);

            String text = card.getFace().getValue() + card.getSuit().getValue();
            FontMetrics fm = g2d.getFontMetrics();

            g2d.drawString(text, 0, fm.getAscent());
        }
    }

}

Although I can't seem to understand the part inside invalidate() method, more especially the coordinates. Could you put an explanation on why you have done such formulas and how can I come up with my own? Thanks in advance

首先拿一张纸，画一个代表屏幕的矩形，然后按照您想要的方式绘制卡片 - 认真地说，对于任何适当复杂的 UI，我总是从一张纸开始，您可以乱写乱画想法、执行计算、执行演练，基本上，集中你的意图 - 并丢弃许多不起作用的东西。我什至知道我会使用 Papercut

当组件的大小或位置发生变化时，

invalidate 就会被调用。你也可以使用ComponentListener，我只是采取了最简单的路线(请注意，我也很懒，invalidate可以快速连续调用多次)

首先，我们需要知道卡片的高度，由此我们可以计算宽度与高度的比率

int cardHeight = (getHeight() - 20) / 3;
int cardWidth = (int) (cardHeight * 0.6);

您可以花一些时间制定一种算法，以确保卡片始终显示(即根据最小的组件高度/宽度计算卡片的高度/宽度，但我很简单) - 这意味着，如果组件的宽度减小得足够多，卡片将溢出可用空间。

接下来，我们需要确定每张卡与前一张卡的偏移量...

int xDelta = cardWidth / 2;

在这种情况下，每张卡片都会与第二张卡片重叠一半

接下来，我们需要计算第一张牌的起始位置...

int xPos = (int) ((getWidth() / 2) - (cardWidth * (hand.size() / 4.0)));

(getWidth()/2) 计算组件的水平中心位置，这将确保卡片围绕组件的水平中心布局。

(cardWidth * (hand.size()/4.0) 基本上计算布局所有卡片所需的总宽度并将其分成两半，因为一半将出现在卡片的左侧水平中心，另一半在右边。好吧，我意识到这可能没有意义，但请记住，每张卡片都与前一张卡片重叠其宽度的一半，因此，我们不能除以 2，我们需要将其除以4(2 x 2)。

因此，cardWidth * hand.size() 将提供并排放置的所有卡片的总宽度。 (cardWidth * hand.size())/2 提供(显然)该数量的一半，当从水平中心减去时，可以将其用作第一张卡的原点的基础。 ((cardWidth * hand.size())/2)/2 将允许卡片重叠其宽度的一半。

最后，我们计算卡片的垂直原点...

int yPos = (getHeight() - 20) - cardHeight;

这非常简单且不言自明。

在循环中，当我们计算每张卡的位置时，我们将下一张卡偏移xDelta

xPos += xDelta;

显然，这给了我们下一张卡片的水平位置