Grid based programs

We'll be learning how to use a square 2D array of integers (int[][] board) to make a program that is based on a grid. This can be used for any graphics based board game that uses a square grid.

chess (hard: just do half)
checkers (hard: just do half)
go , 围棋 (wéiqí) , 囲碁 (igo), 바둑 (baduk)
othello (easy at first)
connect 4 (easy)
lights out (fairly easy)
flood-it/colour flood (moderately easy)
pente (easy)
dots game (google "dots game app")
Memory Game
sliding tile puzzles
Conway's game of life
Paint by numbers
Tower Defense
dots and boxes (hard!)
battleship (hard!)
create a maze and solve it(see teacher example)

Some things that look like grid based games are not really: eg. tetris, Nine men's morris?, Rush hour / klotzki
I think that map games (like Nethack, Dungeon Crawl Stone Soup) start with a 2D array also.

Some games work better being object oriented. Chess is probably like this because each piece has unique properties

This refers to medium/hard programs that the ICS4U1 class should choose from (May 2022).
If you choose an easy program to do, please let me know.


1. Learn how to make a grid.

We want to make a grid that is flexible - changing the screen size doesn't affect anything.
Also we can change the dimensions of the grid by simply changing a contant at the top of the program (e.g. static final int SIZE = 8;)

This is really important. If you look online, you see many examples where people are trying to make games based on arrays of buttons and labels. It's so much more cumbersome and rigid that way. What we're learning is far far more flexible as you can draw whatever you want on the screen where ever you want it.

We're drawing a grid based on drawing thin lines on the screen. However, it's also possible to do this by drawing rectangles that are a little smaller than the basic unit. Then the background colour comes through between the rectangles to give the appearance of lines.

2. Learn how 2D arrays work.

We'll be doing this with the ArrayMap program

3. Connect the array to the graphics.

Draw certain things on the grid (e.g. colour in a square, draw X or O) based on the contents of the array.

This can become quite simple and easy to understand if you make constants for each integer in the array. And the actual numbers don't matter - except 0 which is the default value of the array.

final static int WATER = 0;
final static int FOREST = 1;
final static int GRASSLAND = 2;

There are only two minor problems with doing this. (i) You have to make sure that you never use the same number for two things. (ii) if you write the array to a file, then you have to make sure that the program knows the right mappings. You'll be writing numbers: 0012331121400, but their meaning is encoded in the program not in the data file. So if you change 0 to be mountains, then everything gets screwed up.

4. Get user input (graphics) to update the array

This is an important part. It means that we can click on a square on the graphics screen, it will send information to the program which will then update the data in the array and then update the graphics.
It would be possible to type things in (e.g. coordinates for battleships), but it is a lot easier to just click on the square.

We'll be spending one day on each of these things and end up making a TicTacToe program



graphics data
③ ←
data to graphics

make grid
make 2D array
④ →
update data based on UI


I want students to have a choice as to what they do, to work according to their own ability. Finishing a working game is very rewarding.
That being said, completing Connect4 is not the same as completing Chess.
An easier game will only get 85% unless there are extras added in.

Winning and losing should not involve ending the game with System.exit(0);