Using a two-dimensional array for a game

Arrays are used frequently by games developers to structure data. The following example will show how a two-dimensional array can be used to represent the classic game of Battleship by Hasbro.

Battleship is a game which is played on a two-dimensional grid. Each point on the grid represents a space on a map of the ocean where a ship might be. Two players plot their ships on a grid in secret and then take it in turns to guess where their opponent has plotted their ships. Each boat can span multiple squares.

If you created this game as a computer program you need to think about how the actual game played on paper would be converted into code. You would need to think about questions such as:

  • how is the game grid represented?
  • how do we distinguish between each player's ships?
  • how do we represent squares we have checked?

We will work through some of these questions here, one step at a time:

How is the game grid represented?

It would be best to use a data structure that allows the game to store and update data in a grid. A two-dimensional array would be ideal. Using an array, we can do the following:

  • set the size of the grid
  • set the value of data elements at individual locations
  • retrieve the value of data at individual locations

The paper version of the game uses grid references like A2, H5, C3 but the array uses two numbers to indicate the position of a data element such as [1][2], [8][5] and [3][3].

We determine that the grid size should be eight by eight. The next decision is what goes in each blank space on the map. Empty spaces could be represented by using full stops. The array can be initialised so that the ocean is empty with the following:

ocean = . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

How do we distinguish between each player's ships?

As the game goes on, we need to mark which grid squares we have aimed at. You tell your opponent which square you're targeting by giving them a coordinate like 'A2', 'J3' and so on. When we've hit all the squares which contain parts of boats, the game is over.

In the normal game you have a grid for your ships where you mark enemy attacks and you have another grid for marking where you've hit the opponent. That suggests that our initialisation might want to include two arrays:

  • ocean represents the grid where the opponent ships are
  • myships represents the grid where my ships are
ocean = . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .myships = . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

How do we represent squares we have checked?

To keep track of where our opponent has launched an attack, we can use an "X" and put those into the grid with 'our' ships on - called 'myships'.

If, however, we are tracking where we have launched an attack then we might want to indicate a hit or a miss. In that case we might use X to mean 'tried and missed' and * to mean 'tried and hit'. We'd put these onto the array called 'ocean'. This reflects what you would probably do in Battleship on paper.

There are further questions that would need to be answered to make the full game such as:

  • how are squares that have not been checked represented?
  • how are boats represented when they are hit?

You can practise working with arrays in any language. The PDF attachment shows how to make the game using JavaScript or Python. You can work through this example if you have access to a JavaScript or PythonIDE. JavaScript can also be run in a web browser if created in an HTML document.

The activity will show:

  • how to create the game board by declaring an array
  • how to add data values to the board by declaring and initialising an array
  • how to change values in the array to indicate where the boats appear
  • how to display the results

You can try creating this for yourself by following this pseudocode:

  1. create a 9 by 9 array called 'game'
  2. ask the user to input the column where their boat starts – store this value as 'x'
  3. ask the user to input the row where their boat starts - store this value as 'y'
  4. ask the user to say if they want the boat to be horizontal (h) or vertical (v)
  5. convert all inputs from character strings to numbers
  6. the boat that is created is called '4'
  7. set the length of the boat to be 4
  8. IF h is selected, counting from x+0 to x+3 using 'c', put a '4' on the game grid at [y][c]
  9. IF v is selected, counting from y+0 to y+3 using 'c', put a '4' on the game grid at [c][x]
  10. display the result

The Creating Battleship PDF (424 KB) will give more detail about how to code the solution and show the full code for Python and JavaScript.

Further activities:

Practise your coding with these activities:

  1. create some code to add more ships to the game.
  2. split the program into functions such as createGame(no_of_players), placeShip(player, type_of_ship), takeTurn(player, column_no, row_no).
  3. create two game boards instead of one and then make a turn based game.
  4. make use of random numbers so a single player can play against the computer.
Move on to Test
next