Battleship Game Project
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.
Task - 01
Add the tomato background colour to the body.
Add the heading Battleship on the page.
Underline the heading using light red colour.
Task - 02
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.
Task - 03
When a player clicks a cell, reveal the image hidden inside, either an image of ship or sea.
Task - 04
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.
Task - 05
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.
More projects
These are some of the projects you'll build while learning.
