In this project, you'll create the battleship game. In the game, players will click on cells to reveal either the image of a battleship or the image of a water body. You'll create the complete layout of the game along with the winning and losing conditions. To get started, please scroll down and look at the tasks listed below.
Resources: Water, Battleship.
Things you need to know: Selecting elements, hiding elements, showing elements, handling events.
Add the tomato background colour to the body.
Add the heading Battleship on the page.
Underline the heading using steelblue colour.
Create the game grid by using multiple div elements and a border colour of snow.
Add the Reset button.
Give a box-shadow to the Reset button using the steelblue colour.
Add functionality to display the hidden content when a grid card is clicked.
Add rules on the page. You can use the following rules:
Click on the cells to reveal the image hidden behind them.
There are 5 ships hidden in the game.
You win if you can find all ships in less than 8 clicks, else you lose.
Add a winning/losing alert.
It should say You won! if the user finds all ships in 8 clicks or less. It should say You Lost! if the user fails to find all 5 ships in 8 clicks.
These are some of the other projects you can build.