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.

Max Chat

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:

  1. Click on the cells to reveal the image hidden behind them.

  2. There are 5 ships hidden in the game.

  3. 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.