[go: up one dir, main page]
Skip to content

Latest commit

 

History

History
40 lines (34 loc) · 2.45 KB

README.md

File metadata and controls

40 lines (34 loc) · 2.45 KB
Raw

Battleship game

Simplified React version of the battleship game, player vs CPU.

Live Demo: https://agusmafud.github.io/battleship/

Game elements and characteristics

  • 10x10 board size
  • 1 carrier of 4 spaces
  • 3 cruisers of 3 spaces
  • 1 submarine of 2 spaces
  • Ships must be straight lines
  • Ships can be placed horizontally or vertically
  • Ships can be placed in consecutive spaces
  • When a ship is destroyed, the attempt feedback includes the type of ship destroyed
  • Each player performs only one attack per turn

Computer attack algorithm

For the computer's attack algorithm, a density map is determined that indicates for each space of the board the probability of containing a player's ship. This is done by repeating the following process for each player ship remaining:

We start in the top left corner, and try placing it horizontally. If it fits, we increment a value for each cell it lays over as a 'possible location' in which there could a ship. Then we try sliding it over one square and repeating … and so on until we reach the end of the row. Then we move down a line and repeat. Next we repeat the exercise with the ship oriented vertically.

If the computer hits a ship, it goes into hunting mode; limiting the possible attacks to locations that may contain a player's ship, but also one or more of the active hit spaces. You can learn more about the algorithm at the following source: http://www.datagenetics.com/blog/december32011/

Future improvements

Attack algorithm:

  • Randomly choose from the highest scoring heatmap positions.
  • Also consider positions with less probability, for example introducing an acceptable risk variable that increases with each failed attack.

UI/UX:

  • Include animations and transitions.
  • Include a timeout before each computer attack.
  • Implement drag and drop for ship positioning. When a ship is selected and the cursor is positioned over the board, highlight the corresponding board spaces to indicate whether or not it is possible to position the ship.

Development stack

  • React for component-based and declarative architecture.
  • Reacts Hooks for building functional stateless components.
  • create-react-app as frontend build pipeline.
  • Material-UI: React UI framework.
  • SASS + BEM as css styling solution.
  • PropTypes for typechecking.