battle.js

const ship = 1; //create constant ship
var board = new Array(10); //creates the empty 10 X 10 array that corresponds to the positions in the board
for (i = 0; i < 10; i++) {
  board[i] = new Array(10);
  for (j = 0; j <10; j++) {
  }
}
var shipPositions = []; //creates an array for the ship locations
$(document).ready(function(){
  for (var i_tr = 0; i_tr < 10; i_tr++) {
    $("#battleTable").append("<tr id=tr_" +i_tr+">"); //create 10 trs with unique ids
    for (var i_td = 0; i_td < 10; i_td++) {
      $("#battleTable").append("<td id=" + i_tr + i_td + ">"); //create 10 tds within each tr with unique ids
   };
  };
  var rowI = [];
  var columnI = [];
  // generateCoordinates is a function that will generate random numbered coordinate locations for ships
  function generateCoordinates (){
    rowI = [Math.floor(Math.random() * 10)];
    columnI = [Math.floor(Math.random() * 10)];
  };
  for (k = 0; k < 5; k++) {
    generateCoordinates(rowI, columnI);
    if (shipPositions.includes([rowI][columnI])) { //checks that the coordinates are unique for each iteration, will check against shipPositions array
      generateCoordinates(rowI, columnI);
    }else{
      board[rowI][columnI] = ship; //places the value of "ship" at the random position generated by the generateCoordinates function
      shipPositions.push([rowI, columnI]); //will push the generated coordinated into the shipPositions array
      //created variables for each of the ship location coordinates, as well as the coordinated of the spaces directly above, below, to the right, and left of the ships
      var isShip = "#" + rowI + columnI;
      var aboveShip = "#" + (rowI - 1) + columnI;
      var topLeftShip = "#" + (rowI - 1) + (columnI - 1);
      var topRightShip = "#" + (rowI - 1) + (parseInt(columnI) + 1);
      var belowShip = "#" + (parseInt(rowI) + 1) + columnI;
      var leftShip = "#" + rowI + (columnI - 1);
      var rightShip = "#" + rowI + (parseInt(columnI) + 1);
      var bottomLeftShip = "#" + (parseInt(rowI) + 1) + (columnI - 1);
      var bottomRightShip = "#" + (parseInt(rowI) + 1) + (parseInt(columnI) + 1);
      $(aboveShip).removeAttr("id");//removes the "id" attribute from the td at the location
      $(topLeftShip).removeAttr("id");
      $(topRightShip).removeAttr("id");
      $(belowShip).removeAttr("id");
      $(leftShip).removeAttr("id");
      $(rightShip).removeAttr("id");
      $(bottomLeftShip).removeAttr("id");
      $(bottomRightShip).removeAttr("id");
      $(isShip).addClass("hasShip"); //adds the class of "hasShip" to the ship coordinates
      $(isShip).removeAttr("id"); //removes the "id" from the td at the ship location
    };
  };
  var torpedosRemaining = 25; //sets the starting number of torpedos
  var win = 0; //stores the number of hits
  $("td").on("click", function(){ //need to add "if" statements to change color for either a hit or a miss.
    if ($(this).hasClass("hasShip")) { // Determine if this td has a class of "hasShip", then decides to add class of "hit" or "miss"
      $(this).addClass("hit");
      win++;
    } else {
      $(this).addClass("miss");
    }
    torpedosRemaining--; //decrements the number of torpedos
    $("section").text("Torpedos remaining: " + torpedosRemaining); // prints torpedosRemaining
    $(this).off("click");//turns off the click function for that td
    if (win == 5) { //after 5 hits you win
      alert("You have sunk all the battleships!");
      $("td").off("click"); //turns off all tds
    };
    if (torpedosRemaining <= 0) {
      $("td").off("click"); //turns off all tds if you lose
      alert("Sorry you lose!");
      $(".hasShip").addClass("hit");//reveals ship positions if you lose
    };
  });
});