Grid game

A project!

You will need

  1. Some understanding of 2D arrays

  2. A brief introduction to Java’s GUI framework, Swing

  3. A smidgen of understanding of inheritance in advance of Unit 9

The goal

Build a game with graphical user interface (GUI) that is played on a grid.

Some game ideas

  • Tic Tac Toe

  • Concentration

  • Boggle

  • Minesweeper

  • Chess

  • Super Tic Tac Toe

  • ???

2D arrays

We just talked about them.

You will build some sort of game that stores its state in a 2D array.

Swing

Swing is a GUI framework built around “components”.

A UI is made up of components which can contain other components.

Your game, at least to start with, will probably be just one componenent and I will give the beginnings of the code for it.

If you end up wanting to make a more elaborate UI, talk to me and I can teach you more about Swing.

Inheritance

We will cover this properly in Unit 9 but Swing is built on it.

Basically, a class can “extend” another, called its “parent class”. This has a few consequences:

  • An instance of the new class can be used anywhere the parent class is called for.

  • The child class “inherits” methods and instance variables from its parent.

Inheritance in the starter code

The class GridGame extends JPanel which is a class that is part of the Swing framework.

This allows a GridGame to be added to a Swing app as a component.

The class Demo extends GridGame.

Thus Demo is also a Swing component.

It also inherits some useful behavior from GridGame which makes it a lot simpler.

The starter code

GUI — the class with the main method. Creates a window (JFrame) and adds a Demo component to it.

Demo — the main class you need to copy and then modify. (Make a copy and name the file for what you aro going to build, e.g. TicTacToe.java and change the name of the class in the code to TicTacToe or whatever. Then change GUI to instantiate your new class instead of Demo.)

GridGame — the workhorse. You do not need to look inside this class if you don’t want to.

What you get from GridGame

The GridGame class extends the right class to be usable in the Swing framework and provides an abstraction that lets you write code in terms of a grid of cells where each cell can be painted independently and can respond to mouse clicks.

The GridGame methods

paintCell(int row, int col, Graphics2D)

A method that you will implement to draw one cell in the grid.

Will be called when needed and the graphics object will be set up so 0,0 is at the top left of the cell and you can only draw in the cell.

cellClicked(int row, int col)

A method you will implement that will be called when the user clicks a cell in the grid.

This will also be called at the appropriate times. Your job is to make it do the appropriate thing.

What that is, is up to you.

after(int millis, Runnable r)

A method you can call to schedule some code to run after a certain number of milliseconds.

This one you call. See the example in Demo.

It uses some funky syntax that we’re not officially going to cover but you can copy what’s there or I can help you with it.

Demo

public class Demo extends GridGame {

  // The "state" of our object
  private Color[][] grid;

  public Demo(int rows, int columns) {
    super(rows, columns, 10);
    grid = new Color[rows][columns];
    randomizeColors();
  }

  // …
}

paintCell

public void paintCell(int row, int column, Graphics2D g) {
  g.setColor(grid[row][column]);
  g.fillRect(0, 0, cellWidth(), cellHeight());
}

The graphic object g is set up to just draw in the cell.

cellWidth and cellHeight are inherited from GridGame

cellClicked

public void cellClicked(int row, int col) {
  Color old = grid[row][col];
  grid[row][col] = randomColor();
  repaint();

  after(500, () -> {
    grid[row][col] = old;
    repaint();
  });
}

repaint is part of the Swing framework.

after is inherited from GridGame

Summary

  • Make your own class by copying Demo.java

  • Implement paintComponent and cellClicked however makes sense.

  • Call repaint whenever the state of your object has changed in a way that will change it’s appearance.

  • Use after to schedule code to run in the future.