Our final codes will look similar to the following:
<html> <head> </head> <body> <h1> Battleship Game </h1> </body> <style> body { background-color: #eff; } </style> <script> var game = [ [".", ".", ".", ".", ".", ".", ".", ".", "."], [".", ".", ".", ".", ".", ".", ".", ".", "."], [".", ".", ".", ".", ".", ".", ".", ".", "."], [".", ".", ".", ".", ".", ".", ".", ".", "."], [".", ".", ".", ".", ".", ".", ".", ".", "."], [".", ".", ".", ".", ".", ".", ".", ".", "."], [".", ".", ".", ".", ".", ".", ".", ".", "."], [".", ".", ".", ".", ".", ".", ".", ".", "."], [".", ".", ".", ".", ".", ".", ".", ".", "."], ]; var board = document.createElement("PRE"); // preparing the HTML <pre> element to display the board on the page...