thejsdeveloper / battleship

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Battleship ⛴

Screenshot 2022-04-17 at 9 21 07 PM

Battleship is a strategy type guessing game for two players. It is played on ruled grids on which each player's fleet of ships (including battleships) are marked. The locations of the fleets are concealed from the other player. Players alternate turns calling "shots" at the other player's ships, and the objective of the game is to destroy the opposing player's fleet.

Before play begins, each player secretly arranges their ships on their primary grid. Each ship occupies a number of consecutive squares on the grid, arranged either horizontally or vertically. The number of squares for each ship is determined by the type of ship. The ships cannot overlap After the ships have been positioned, the game proceeds in a series of rounds. In each round, each player takes a turn to target a square in the opponent's grid which is to be shot at.

The game is playable by two players on the same device, using a turn-based strategy where the first player indicates that they have completed the turn. They are then able to pass the device to the other player whereby they specify that they are going to take their turn. Once the second player has taken the turn they will specify that the turn is complete and pass the device back to the original player.

Before the game begins both players will be able to set up their map, with the same map viewing security as before.

You can try it out here

Homepage

Screenshot 2022-04-17 at 8 57 33 PM

Wait Screen before setup of Fleet

Screenshot 2022-04-17 at 8 58 35 PM

Player View for Fleet Setup

Screenshot 2022-04-17 at 8 59 27 PM

Setting up fleet

setup

Play

paly

Ship States

  • Hit - Red
  • Sunk - Black
  • Miss - Grey

Screenshot 2022-04-17 at 9 07 35 PM

Winner

Screenshot 2022-04-17 at 9 12 08 PM

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

About


Languages

Language:TypeScript 78.2%Language:CSS 17.3%Language:HTML 4.5%Language:JavaScript 0.1%