如何在Java记忆游戏中添加图片？需将数字版改造为图片翻牌游戏

我原本开发了一款数字版记忆游戏，现在希望将其改造为图片翻牌记忆游戏，不清楚如何添加图片。已附上相关代码，其中Board.java需要进行修改，目前陷入困境，恳请技术帮助。

Card.java #

import javax.swing.JButton;

public class Card extends JButton{
    private String id;
    private boolean matched = false;

    public void setId(String val){
        this.id = val;
    }

    public String getId(){
        return this.id;
    }

    public void setMatched(boolean matched){
        this.matched = matched;
    }

    public boolean getMatched(){
        return this.matched;
    }
}

Game.java #

import java.awt.Dimension;
import javax.swing.JFrame;

public class Game{
    public static void main(String[] args){
        Board b = new Board();
        b.setPreferredSize(new Dimension(500,500)); //需要用这个代替setSize
        b.setLocation(500, 250);
        b.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        b.pack();
        b.setVisible(true);
    }   
}

Board.java #

import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.Timer;
import java.awt.*;
import java.awt.event.*;
import java.util.ArrayList;
import java.util.List;
import java.util.Collections;

public class Board extends JFrame{
    private List<Card> cards;
    private Card selectedCard;
    private Card c1;
    private Card c2;
    private Timer t;
    static String fruits[] = {"pear.jpg", "peach.jpg", "pineapple.jpg", "/apple.jpg",
    "avocado.jpg", "/greenapple.jpg"};
    static String files[] = fruits;

    public Board(){

        int pairs = 14;
        List<Card> cardsList = new ArrayList<Card>();
        List<String> cardVals = new ArrayList<String>();

        for (int i = 0; i < pairs; i++){
            cardVals.add(i, fruits[i]);
            cardVals.add(i, fruits[i]);
        }
        Collections.shuffle(cardVals);

        for (String val : cardVals){
            Card c = new Card();
            c.setId(val);
            c.addActionListener(new ActionListener(){
                public void actionPerformed(ActionEvent ae){
                    selectedCard = c;
                    doTurn();
                }
            });
            cardsList.add(c);
        }
        this.cards = cardsList;
        //设置计时器
        t = new Timer(750, new ActionListener(){
            public void actionPerformed(ActionEvent ae){
                checkCards();
            }
        });

        t.setRepeats(false);

        //设置游戏面板
        Container pane = getContentPane();
        pane.setLayout(new GridLayout(4, 5));
        for (Card c : cards){
            pane.add(c);
        }
    }

    public void doTurn(){
        if (c1 == null && c2 == null){
            c1 = selectedCard;
            c1.setText(String.valueOf(c1.getId()));
        }

        if (c1 != null && c1 != selectedCard && c2 == null){
            c2 = selectedCard;
            c2.setText(String.valueOf(c2.getId()));
            t.start();

        }
    }

    public void checkCards(){
        if (c1.getId() == c2.getId()){//匹配条件
            c1.setEnabled(false); //禁用按钮
            c2.setEnabled(false);
            c1.setMatched(true); //标记为已匹配
            c2.setMatched(true);
            if (this.isGameWon()){
                JOptionPane.showMessageDialog(this, "你赢了！");
                System.exit(0);
            }
        }

        else{
            c1.setText(""); //隐藏文本
            c2.setText("");
        }
        c1 = null; //重置c1和c2
        c2 = null;
    }

    public boolean isGameWon(){
        for(Card c: this.cards){
            if (c.getMatched() == false){
                return false;
            }
        }
        return true;
    }

}

改造方案 #

1. 统一图片路径并准备资源

• 将所有图片放在项目根目录下的images文件夹中，修正fruits数组的路径：

  static String fruits[] = {"images/pear.jpg", "images/peach.jpg", "images/pineapple.jpg", 
                            "images/apple.jpg", "images/avocado.jpg", "images/greenapple.jpg"};
  

• 准备一张卡片背面图片（如images/back.jpg），作为未点击时的默认显示图标。

2. 扩展Card类

为Card添加图标切换功能，默认显示背面：

import javax.swing.JButton;
import javax.swing.ImageIcon;

public class Card extends JButton{
    private String id;
    private boolean matched = false;
    private ImageIcon backIcon; //卡片背面图标
    private ImageIcon frontIcon; //卡片正面图标

    public Card() {
        //初始化背面图标
        backIcon = new ImageIcon("images/back.jpg");
        this.setIcon(backIcon);
    }

    //设置正面图标
    public void setFrontIcon(String imagePath) {
        frontIcon = new ImageIcon(imagePath);
    }

    //翻转显示正面
    public void showFront() {
        this.setIcon(frontIcon);
    }

    //翻转显示背面
    public void showBack() {
        this.setIcon(backIcon);
    }

    //原有方法保持不变
    public void setId(String val){ this.id = val; }
    public String getId(){ return this.id; }
    public void setMatched(boolean matched){ this.matched = matched; }
    public boolean getMatched(){ return this.matched; }
}

3. 修改Board类初始化逻辑

创建Card实例时同步设置正面图标：

for (String val : cardVals){
    Card c = new Card();
    c.setId(val);
    c.setFrontIcon(val); //绑定对应正面图片
    c.addActionListener(new ActionListener(){
        public void actionPerformed(ActionEvent ae){
            selectedCard = c;
            doTurn();
        }
    });
    cardsList.add(c);
}

4. 替换文本逻辑为图标切换

修改doTurn和checkCards方法，把原本的文本显示/隐藏换成图标切换：

public void doTurn(){
    if (c1 == null && c2 == null){
        c1 = selectedCard;
        c1.showFront(); //显示正面图片
    }

    if (c1 != null && c1 != selectedCard && c2 == null){
        c2 = selectedCard;
        c2.showFront(); //显示正面图片
        t.start();
    }
}

public void checkCards(){
    //注意用equals比较字符串，不要用==
    if (c1.getId().equals(c2.getId())){
        c1.setEnabled(false);
        c2.setEnabled(false);
        c1.setMatched(true);
        c2.setMatched(true);
        if (this.isGameWon()){
            JOptionPane.showMessageDialog(this, "你赢了！");
            System.exit(0);
        }
    } else {
        c1.showBack(); //切换回背面
        c2.showBack(); //切换回背面
    }
    c1 = null;
    c2 = null;
}

5. 注意事项

• 若图片加载失败，可添加状态检查排查路径问题：

  //在setFrontIcon方法中添加
  if (frontIcon.getImageLoadStatus() != MediaTracker.COMPLETE) {
      System.out.println("图片加载失败：" + imagePath);
  }
  

• IDE环境下需将images文件夹标记为资源目录，确保编译后能正常访问图片。

内容的提问来源于stack exchange，提问作者Aytida