BigBinary Academy

Battleship Game Project

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.

Max Chat

Task 1

  1. Add the tomato background colour to the body.

  2. Add the heading Battleship on the page.

  3. Underline the heading using steelblue colour.

Task 2

  1. Create the game grid by using multiple div elements and a border colour of snow.

  2. Add the Reset button.

  3. Give a box-shadow to the Reset button using the steelblue colour.

Task 3

Add functionality to display the hidden content when a grid card is clicked.

Task 4

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 5

  1. Add a winning/losing alert.

  2. 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 other projects you can build.

Password Generator Project
Password Generator

In this project, you'll make an application that creates strong passwords for the user. You will add features to control which characters are allowed in the password. Finally, you'll provide the user the ability to copy this password and use it.

Shopping Cart

In this project, you'll create a shopping cart webpage for a shoe store. You'll create the main dashboard where the shoes will be listed. You'll also create functionality for filtering and sorting the shoes. Finally, you'll add a shopping cart where the users can add the shoes of their choice and place an order.

Calculator Project
Calculator

In this project, you will build a calculator with all basic functionalities like addition, multiplication, division, and subtraction. With this, you'll get a good understanding of DOM manipulation, JavaScript logic & CSS design.

Chess Board Project
Chess Board

In this project, you'll style a Chess Board using HTML and CSS. You will create an 8x8 chessboard with alternating light and dark squares. You'll add icons for the chess pieces from the resource we provide below. Please ensure that you use only CSS Grid for this project. Avoid using CSS Flexbox.

Currency Convertor Project
Currency Convertor

In this project, you'll build an application that converts one currency to another. You will get the current conversion data using an API. You will also create the layout to provide the user the option to choose the two currencies and the quantity. Finally, you'll convert one currency to the other and show it to the user.

Tic-Tac-Toe Project
Tic-Tac-Toe

In this project, you'll create the tic-tac-toe game. This is a two-player game. Player 1 will click on a cell to mark an 'X' in it. Player 2 will then click on a different cell to mark an 'O' in it. This will continue till a player gets three marks of the same kind in a row. The three consecutive marks can be horizontal, vertical or even diagonal. You'll create the layout of the game and handle the winning, losing or tie conditions.

View all projects
Made with NeetoSite