In this chapter, we are going to develop a full game using HTML, CSS, and JavaScript. We will focus on the JavaScript coding, therefore, we will not care about the graphics of the game. We will code a game named Battleship. Many of you have heard of it before. This is a memory game. Your imagination and intuition will help you to win the game. There are a few variations for playing the game.
Let's discuss how the game looks. There are a few square-shaped geometrical objects connected to each other as shown in the following. The number of rows and columns need to be equal:
The rows and columns are usually named with the help of number system or alphabets. Let's say that the rows are 1, 2, 3, 4, 5, 6, 7, 8, 9, and 10. The columns are A, B, C, D, E, F, G, H, I, and J. We can name them by either numbers or alphabets:
It is a two player game. The following are its rules:
- Both the players will secretly place their ships (there can be different types of boats or water vehicles) on their matrices/grids.
- The players can put their ships vertically or horizontally; however, not diagonally.
- The players must place all their ships on the grid before they start playing.
- Their ships cannot overlap each other's.
- When all the ships are placed, the players cannot move their ships from the grid.
- After placing all the ships, the first player will state a coordinate of the second player and if there is a ship belonging to the second player, the ship will blow.
- Then, the second player will state a coordinate of the first player. If there is a ship belonging to the first player, it will blow.
- The coordinate may look similar to A2, B2, D5, and so on. The first alphabet will be the x axis of the grids and the number will represent y axis of the grid.
- The player that blows all the ships of the opponent will win.
The following figure shows few ships placed on the grid:
Now, we will head to the programming part of the game.
We will stick to the following rules so that our game does not become difficult to code:
- There will be one ship belonging to both the players.
- The ship will occupy four parts of the grid.
- A player will have to input both the x and y axes coordinates at the prompt.
- The grid will be 9 x 9.
- The player will have to put
horvfor the horizontal or vertical position of the ship. - To simplify the drawing, we will put dots (.) on the position of the grids. The grids will look similar to the following image:
- We will need a Fire button to start the game.
The HTML part will look similar to the following code:
<html>
<head>
</head>
<body>
<h1> Battleship Game </h1>
</body>
<style>
// We will code in CSS here
</style>
<script type = "text/javascript">
//We will code in JavaScript here
</script>
</html>The output of the code will be as shown in the following image:
