Spânzurătoarea (II)

de Mihai Scorțaru · 13 iulie 2015

Am văzut în articolul precedent cum facem un joc. Dar, am arătat doar principiile de bază. De data aceasta vom face în așa fel încât jocul să arate puțin mai bine. Vom trece la o interfață grafică (una simplistă). Nu trebuie să vă așteptați la o "operă de artă"; jocul nostru va arăta cam așa:

E un screenshot pe MacOS. În Windows ar arăta altfel... Nu ne interesează deocamdată foarte mult acest aspect. Vom face ceva de genul: în dreapta avem spânzurătoarea și cuvântul sub ia, iar în dreapta butoane care permit alegerea literelor.

Nu vom mai avea mesaje care să ceară introducerea literei; e destul de evident cum adăugăm o literă. De asemenea, în locul mesajelor care anunță dacă am câștigat sau am pierdut vom avea casete de dialog. Vor arăta cam așa (pe un Mac).

Reproiectarea

Vrem să avem acum un joc cu grafică. Vom avea nevoie de o fereastră. Prin intermediul acesteia utilizatorul va introduce datele de intrare (apâsând pe litere). Acestea trebuie să ajungă la controller. În fereastră vor fi afișate și informațiile despre starea jocului; view-ul va fi responsabil pentru manipularea acestora.

Fereastra

În Java avem la dispoziția clasa JFrame pentru ferestre (folosim Swing). O vom extinde pentru a crea fereastra pentru jocul nostru. Nu ne interesează deocamdată aspectul estetic, deci vom avea o fereastră simplistă. Dimensiunile sale vor fi alese arbitrar (să arate cât de cât bine), nu va fi redimesionabilă și o vom împărți într-o grilă. Această grilă va conține o imagine pentru spânzurătoare (un JLabel pentru care a fost setat un icon), un text pentru cuvânt (un alt JLabelpentru care este setat un text) și o grilă de butoane (obiecte JButton) pentru alegerea literelor.

Va trebui să putem transmite controller-ului ce butoane au fost apăsate. Ar trebui fie să avem o referință către controller și să îi comunicăm că a fost apăsat un buton când are loc o astfel de acțiune, fie să permitem controller-ului să acceseze informația respectivă comunicând ferestrei că este interesat de ea. Am ales a doua variantă; fereastra are o serie de listener-i care sunt notificați în momentul în care este apăsat un buton. Vom avea metode pentru a adăuga și elimina listener-i. Controller-ul va fi un astfel de listener. Trebuie să definim o interfață simplă pentru acești listener-i:

public interface HangmanFrameListener {
    void letterClicked(char c);
}

public interface HangmanFrameListener {

void letterClicked(char c);

}

Așadar, de fiecare dată când va fi apăsată o literă, va fi apelată metoda letterClicked a controller-ului. Acesta va trebui să implementeze interfața HangmanFrameListener.

Fereastra va trebui să aibă și metoda care permit modificarea imaginii și a cuvîntului. Pentru imagine vom folosi o dimensiune fixă (150 × 150 pixeli). Pentru cuvânt vom încerca să umplem o zonă a ecranului indiferent cât de lung este cuvântul; implementarea va fi simplistă: vom alege cea mai mare mărime de font care "încape". Din nou, din punct de vedere estetic nu este cea mai bună soluție...

Acestea fiind spuse, iată implementarea ferestrei:

import javax.swing.*;
import java.awt.*;
import java.util.ArrayList;
import java.util.List;

public class HangmanFrame extends JFrame {
    private JLabel imageLabel = new JLabel();
    private JLabel textLabel = new JLabel();
    private List<HangmanFrameListener> listeners = new ArrayList<HangmanFrameListener>();

    public HangmanFrame() {
        super("Hangman");
        init();
    }

    private void init() {
        setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

        getContentPane().setLayout(new GridBagLayout());
        GridBagConstraints constraints = new GridBagConstraints();
        constraints.gridx = 0;
        constraints.gridy = 0;
        getContentPane().add(imageLabel, constraints);
        constraints.gridx = 1;
        constraints.gridy = 0;
        constraints.ipadx = 50;
        getContentPane().add(buildLettersPane(), constraints);
        constraints.gridx = 0;
        constraints.gridy = 1;
        constraints.ipadx = 0;
        textLabel.setHorizontalAlignment(JLabel.CENTER);
        imageLabel.setHorizontalAlignment(JLabel.LEFT);
        getContentPane().add(textLabel, constraints);
        setBounds(100, 100, 600, 300);
        setResizable(false);
        textLabel.setFont(Font.getFont("Arial"));
        textLabel.setSize(150, 50);
        setVisible(true);
    }

    private Component buildLettersPane() {
        JPanel panel = new JPanel();
        panel.setLayout(new GridBagLayout());
        GridBagConstraints constraints = new GridBagConstraints();
        constraints.fill = GridBagConstraints.BOTH;
        for (char c = 'A'; c <= 'Z'; c++) {
            JButton button = new JButton(String.valueOf(c));
            constraints.gridx = (c - 'A') % 5;
            constraints.gridy = (c - 'A') / 5;
            panel.add(button, constraints);
            button.addActionListener(e -> notifyListeners(e.getActionCommand()));
        }
        return panel;
    }

    public void changeImage(String imageFileName) {
        imageLabel.setIcon(new ImageIcon(imageFileName));
    }

    public void changeText(String text) {
        Font font = textLabel.getFont();
        int stringWidth = textLabel.getFontMetrics(font).stringWidth(text);
        double widthRatio = 150f / stringWidth;
        int fontSize = (int) (font.getSize() * widthRatio);
        textLabel.setText(text);
        textLabel.setFont(new Font(font.getName(), Font.PLAIN, fontSize));
    }

    public void addListener(HangmanFrameListener listener) {
        listeners.add(listener);
    }

    public void removeListener(HangmanFrameListener listener) {
        listeners.remove(listener);
    }

    private void notifyListeners(String command) {
        for (HangmanFrameListener listener : listeners) {
            listener.letterClicked(command.charAt(0));
        }
    }
}

import javax.swing.*;

import java.awt.*;

import java.util.ArrayList;

import java.util.List;

public class HangmanFrame extends JFrame {

private JLabel imageLabel = new JLabel();

private JLabel textLabel = new JLabel();

private List<HangmanFrameListener> listeners = new ArrayList<HangmanFrameListener>();

public HangmanFrame() {

super("Hangman");

init();

}

private void init() {

setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

getContentPane().setLayout(new GridBagLayout());

GridBagConstraints constraints = new GridBagConstraints();

constraints.gridx = 0;

constraints.gridy = 0;

getContentPane().add(imageLabel, constraints);

constraints.gridx = 1;

constraints.gridy = 0;

constraints.ipadx = 50;

getContentPane().add(buildLettersPane(), constraints);

constraints.gridx = 0;

constraints.gridy = 1;

constraints.ipadx = 0;

textLabel.setHorizontalAlignment(JLabel.CENTER);

imageLabel.setHorizontalAlignment(JLabel.LEFT);

getContentPane().add(textLabel, constraints);

setBounds(100, 100, 600, 300);

setResizable(false);

textLabel.setFont(Font.getFont("Arial"));

textLabel.setSize(150, 50);

setVisible(true);

}

private Component buildLettersPane() {

JPanel panel = new JPanel();

panel.setLayout(new GridBagLayout());

GridBagConstraints constraints = new GridBagConstraints();

constraints.fill = GridBagConstraints.BOTH;

for (char c = 'A'; c <= 'Z'; c++) {

JButton button = new JButton(String.valueOf(c));

constraints.gridx = (c - 'A') % 5;

constraints.gridy = (c - 'A') / 5;

panel.add(button, constraints);

button.addActionListener(e -> notifyListeners(e.getActionCommand()));

}

return panel;

}

public void changeImage(String imageFileName) {

imageLabel.setIcon(new ImageIcon(imageFileName));

}

public void changeText(String text) {

Font font = textLabel.getFont();

int stringWidth = textLabel.getFontMetrics(font).stringWidth(text);

double widthRatio = 150f / stringWidth;

int fontSize = (int) (font.getSize() * widthRatio);

textLabel.setText(text);

textLabel.setFont(new Font(font.getName(), Font.PLAIN, fontSize));

}

public void addListener(HangmanFrameListener listener) {

listeners.add(listener);

}

public void removeListener(HangmanFrameListener listener) {

listeners.remove(listener);

}

private void notifyListeners(String command) {

for (HangmanFrameListener listener : listeners) {

listener.letterClicked(command.charAt(0));

}

În linia 51 suntem "șmecheri"; folosim o expresie lambda (deci jocul nostru are nevoie de Java 8).

Noul controller

Vom crea un nou controller; nu va mai fi bazat pe interacțiunea cu intrarea standard, ci cu fereastra noastră. Va avea așadar o referință spre fereastră.

Controller-ul trebuie să se înregistreze ca listener al ferestrei și va fi informat de fiecare dată când va fi apăsată o literă. Când are loc o astfel de acțiune, va face operațiunile pe care controller-ul vechi le făcea când era introdusă o literă de la tastatură: va cere modelului să adauge litera (și eventual o nouă parte a corpului dacă litera nu există în cuvânt), va cere view-ului să afișeze noua stare a jocului și apoi va cere modelului să verifice dacă s-a încheiat jocul; dacă jocul s-a încheiat, va afișa un mesaj în funcție de cine este câștigătorul și va începe un nou joc. Nu mai este nevoie să întrebăm dacă se dorește începerea unui joc nou; va începe automat altul; dacă utilizatorul nu mai vrea să se joace, poate închide fereastra în orice moment.

Noua implementare este următoarea:

public class HangmanFrameController implements HangmanControllerInterface, HangmanFrameListener {

    private HangmanModelInterface model;
    private HangmanViewInterface view;
    private HangmanFrame frame;

    public HangmanFrameController(HangmanModelInterface model, HangmanViewInterface view, HangmanFrame frame) {
        this.model = model;
        this.view = view;
        this.frame = frame;
    }

    @Override
    public void processCommands() {
        model.reset();
        view.displayHangman();
        view.displayWord();
        frame.addListener(this);
    }

    @Override
    public void letterClicked(char c) {
        if (!model.addLetter(c)) {
            model.addBodyPart();
        }
        view.displayHangman();
        view.displayWord();
        if (model.isGameOver()) {
            if (model.isHumanPlayerWinner()) {
                view.displayMessage("CONGRATULATIONS!!!\n");
            } else {
                view.displayMessage("YOU'VE BEEN HANGED\n");
            }
            model.reset();
            view.displayHangman();
            view.displayWord();
        }
    }
}

public class HangmanFrameController implements HangmanControllerInterface, HangmanFrameListener {

private HangmanModelInterface model;

private HangmanViewInterface view;

private HangmanFrame frame;

public HangmanFrameController(HangmanModelInterface model, HangmanViewInterface view, HangmanFrame frame) {

this.model = model;

this.view = view;

this.frame = frame;

}

@Override

public void processCommands() {

model.reset();

view.displayHangman();

view.displayWord();

frame.addListener(this);

}

@Override

public void letterClicked(char c) {

if (!model.addLetter(c)) {

model.addBodyPart();

}

view.displayHangman();

view.displayWord();

if (model.isGameOver()) {

if (model.isHumanPlayerWinner()) {

view.displayMessage("CONGRATULATIONS!!!\n");

} else {

view.displayMessage("YOU'VE BEEN HANGED\n");

}

model.reset();

view.displayHangman();

view.displayWord();

}

Observăm că lucrează cu aceleași interfețe pentru model și view; implementarea acestora nu este relevantă pentru controller.

Noul model

Nu ne atingem deloc de model. Logica jocului este aceeași...

Noul view

Vom crea un nou view care să lucreze cu fereastra noastră, nu cu ieșirea standard. Pentru afișarea spânzurătorii vom genera numele fișierului care conține imaginea ce corespunde numărului părților corpului care trebuie afișate și vom folosi metoda ferestrei care afișează imaginea.

Pentru cuvânt trebuie doar să apelăm metoda ferestrei care afișează cuvântul.

Pentru un mesaj, generăm o simplă casetă de dialog care afișează mesajul respectiv. Aceasta va fi modală; cum astfel de mesaje sunt afișate doar când se încheie jocul, un joc nou nu va începe decât după ce utilizatorul va apăsa butonul Ok.

Noua implementare este următoarea:

import javax.swing.*;

public class HangmanFrameView implements HangmanViewInterface {
    private HangmanModelInterface model;
    private HangmanFrame frame;

    public HangmanFrameView(HangmanModelInterface model, HangmanFrame frame) {
        this.model = model;
        this.frame = frame;
    }

    @Override
    public void displayHangman() {
        frame.changeImage("Hangman-" + model.getBodyPartsCount() + "-150x150.png");
    }

    @Override
    public void displayWord() {
        frame.changeText(model.getWord());
    }

    @Override
    public void displayMessage(String message) {
        JOptionPane.showMessageDialog(frame, message);
    }
}

import javax.swing.*;

public class HangmanFrameView implements HangmanViewInterface {

private HangmanModelInterface model;

private HangmanFrame frame;

public HangmanFrameView(HangmanModelInterface model, HangmanFrame frame) {

this.model = model;

this.frame = frame;

}

@Override

public void displayHangman() {

frame.changeImage("Hangman-" + model.getBodyPartsCount() + "-150x150.png");

}

@Override

public void displayWord() {

frame.changeText(model.getWord());

}

@Override

public void displayMessage(String message) {

JOptionPane.showMessageDialog(frame, message);

}

Noul program principal

Vom avea pe lângă model, view și controller o fereastră. Interfețele vor fi aceleași, dar vom alege noile implementări.

import java.io.IOException;

public class Hangman {
    public static void main(String[] args) throws IOException {
        HangmanFrame frame = new HangmanFrame();
        HangmanModelInterface model = new HangmanModel();
        HangmanViewInterface view = new HangmanFrameView(model, frame);
        HangmanControllerInterface controller = new HangmanFrameController(model, view, frame);
        controller.processCommands();
    }
}

import java.io.IOException;

public class Hangman {

public static void main(String[] args) throws IOException {

HangmanFrame frame = new HangmanFrame();

HangmanModelInterface model = new HangmanModel();

HangmanViewInterface view = new HangmanFrameView(model, frame);

HangmanControllerInterface controller = new HangmanFrameController(model, view, frame);

controller.processCommands();

}

Va urma

Am ajuns acum la o variantă grafică a jocului. Dar, parcă am vrea să ne jucăm și pe mobil, nu? În epidosul următor vom trece la varianta Android.

Spânzurătoarea (II)

Reproiectarea

Fereastra

Noul controller

Noul model

Noul view

Noul program principal

Va urma

Un proiect