Create an interactive Battleship game where players click on cells to reveal either a battleship or water. Design the complete game layout and implement the winning and losing conditions. You will be building this project as part of our JavaScript Course.
Resources: Battleship Image, Water Image
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 light red colour.
Create the 4 x 4 game grid with a border colour of snow.
Add the Reset button below this grid.
Give a box-shadow to the Reset button using the light red colour.
When a player clicks a cell, reveal the image hidden inside, either an image of ship or sea.
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 projects you'll build while learning.