[go: up one dir, main page]

Skip to content

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

Notifications You must be signed in to change notification settings

agusmafud/battleship

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Battleship game

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

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.

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published