This part is the main part of our game, we will pay attention to this part the most. We will write all our codes in the <script></script> tags.
For the grids, we will need a two dimensional array. We will take a game variable to store the data as follows:
Note
Many programs may require the processing of multiple data items that have common characteristics. In such situations, it is often convenient to place the data items in an array, where they will all share the same name. The individual data can be characters, floats, integers, and so on. However, they must all be of the same type and class.
var game = [ [".", ".", ".", ".", ".", ".", ".", ".", "."],
[".", ".", ".", ".", ".", ".", ".", ".", "."],
[".", ".", ".", ".", ".", ".", ".", ".", "."],
[".", ".", ".", ".", ".", ".", ".", ".", "."],
[".", ".", ".", ".", ".", ".", ".", ".", "."],
[".", ".", ".", ".", ".", ".", ".", ".", "."],
[".", ".", ".", ".", ".", ".", ".", ".", "."],
[".", ".", ".", ".", ".", ".", ".", ".", "."],
[".", ".", ".", ".", ".", ".", ".", ".", "."],
];We will take a variable to display the two dimensional array on the HTML page:
var board = document.createElement("PRE");We will now append this on the body and create a button:
document.body.appendChild(board);
var button=document.createElement("BUTTON");This button will call the fire function (we will write the function later.):
button.onclick = fire;
Now, we will place the button on the body part:
var t=document.createTextNode("Fire!");
document.body.appendChild(button);
button.appendChild(t);Let's make a function to draw the board:
function drawBoard() {
var boardContents = "";
var i;
var j;
for (i=0; i<9; i++) {
for (j=0; j<9; j++) {
boardContents = boardContents + game[i][j]+" ";
// Append array contents for each board square
}
boardContents = boardContents + "<br>";
// Append a line break at the end of each horizontal line
}
return boardContents;
// Return string representing board in HTML
}Now, put draw the board on the HTML page by writing the following code:
board.innerHTML = drawBoard();
We will ask the player where he wants to place his ship using the prompt() function:
var x=prompt("Where would you like to place your ship? Enter an X coordinate: (0-8)");
var y=prompt("Where would you like to place your ship? Enter a Y coordinate: (0-8)");
var direction=prompt("Place (h)orizontally, (v)ertically");
x = Number(x); // Convert the string returned by "prompt" into a number
y = Number(y); // Convert the string returned by "prompt" into a numberIf the player chooses the horizontal orientation for their ship, we need to replace the dots by writing the following code:
if (direction[0] == "h") {
var c;
for (c = x; c < (x + 4); c++)
{
game[y][c] = '#';
}
}If the player chooses the vertical orientation for their ship, we need to replace the dots by writing the following code:
if (direction[0] == "v") {
var c;
for (c = y; c < (y + 4); c++)
{
game[c][x] = '#';
}
}We need to redraw the board after placing the ship, as follows:
board.innerHTML = drawBoard();
Lets create the fire() function.
Our fire() function will be as follows:
function fire() {
//We will write codes here.
}When the fire() function is called, we need to take input from the player as shown in the following:
var fireX=prompt("Where would you like to fire? Enter an X coordinate: (0-8)");
var fireY=prompt("Where would you like to fire? Enter a Y coordinate: (0-8)");Convert the inputs into numbers, as follows:
fireX = Number(fireX); // Convert the string returned by "prompt" into a number fireY = Number(fireY); // Convert the string returned by "prompt" into a number
If the input does not match with the # character, we will print You Missed. using the following code:
if (game[fireY][fireX] == ".") {
// Check if the specified coordinate is occupied by the cruiser
alert("You Missed.");
}If the input hits the ship, we will print few messages and draw the board again:
else if (game[fireY][fireX] == "*") {
alert("You already hit the ship there.");
} else {
alert("Kaboom! You hit a ship");
game[fireY][fireX] = "*";
board.innerHTML = drawBoard();
// Redraw board with hit marker at specified coordinate
}Now, we need to check whether there is any ship remaining on the board. We will use the following code:
var shipfound;
var i;
var j;
// Check if there are any ships remaining on the board
for (i=0; i<9; i++) {
for (j=0; j<9; j++) {
if (game[i][j] != "." && game[i][j] != "*") {
shipfound = true;
// Taking a boolean data type to set it if a ship is found
}
}
}If no ship is left, we will end the game:
if (!shipfound) {
// If no ships are found end the game
alert("All ships have been sunk. Well done Captain! Game over");
document.body.removeChild(button);
// Remove the fire button from the page after game over
}