User Interface - glaizacano/battleship-game GitHub Wiki

Title page

This user interface shows

  • The title of the game
  • Two battleships which indicate to the player what the game is about
  • Light blue background

Starting a new game

  • The UI on this screen consists of a red dotted grid where users will place their battleships
  • The ships (pieces) for the user to place
  • Labels on the top of the grid and below the grid that gives the user and indicator of what to do on this screen and which player's turn it is to place the ships.

Firing shots

  • The UI on this screen shows the current player shots that have not hit an enemy ship on the red-dotted grid.
  • Also shows to the left what ships that player has left
  • The text at the bottom indicates which of the opposing player's square the player has fired at whereas the text at the top shows how many shots have been fired at the enemy.

Firing at the enemy fleet of ships

This screen shows the player view from inside the ship from the gun turret when firing at the enemy

Hitting the opponent's ships

The UI on this screen is similar firing at the enemy screen except the boxes on the grid have been shaded out to represent a hit. Furthermore, the ships to the left have changed their image slightly to show to the user that that ship have been destroyed.

Game Over screen

The UI on the screen is very simple including just instances of text on a black background. It informs the player that they have lost the game.