API tools faq
paste
Advertisement
Vita_Harvey

Battleship002

Vita_Harvey
Jan 16th, 2020
407
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 18.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.  
  5.     </head>
  6. <body>
  7.  
  8. <h1>Battleship Game</h1>
  9. <p id="part1">Part 1</p>
  10.     <p id="part2"></p>
  11.     <p id="part3"></p>
  12.     <p id="part4"><button type=button onclick=getUpdateDisplay()>GUESS</button></p>
  13.     <p id="part5">Status</p>
  14.     <p id="part6"></p>
  15.     <p id="part7"></p>
  16.  
  17. <script>
  18.  
  19.     // A 1D array of Cells to track position of vessels and places
  20.     // where hits and misses have taken place;
  21.     var gameArray=[100];
  22.     // creates an Object containing (x,y) and {miss, or ship.name};
  23.     function Cell(x,y,contains,symbol){
  24.         x = this.x;
  25.         y = this.y;
  26.         contains = this.contains;
  27.         // "Symbol" is first letter of Ship.name, used to mark where hits
  28.         // occur;
  29.         symbol = this.symbol;
  30.     }
  31.  
  32.     // Create an Object constructor for the general Ship-type Object;
  33.     // Ships contain info about their position, name, and when they
  34.     // will sink;
  35.     function Ship(size,hitPoints,name){
  36.         this.size = size;
  37.         // hitPoints initially equal to the number of spaces the Ship-type
  38.         // occupies.
  39.         hitPoints = size;
  40.         this.name = name;
  41.     }
  42.  
  43.     // I'm turning the following variables into Strings,
  44.     // so that specific ships' location and hits can be tracked;
  45.     // var empty = 0;
  46.     // var hit = 1;
  47.     // var miss = 2;
  48.     //var ship = 3; this will have to be hitPoints for each vessel;
  49.     var guess = 0;
  50.     var countTries = 0;
  51.     var countMisses = 0;
  52.     var countHits = 0;
  53.  
  54.     // The following instantiates the Ship objects representing each vessel;
  55.     // The isOdd() function is being repurposed to determine whether the
  56.     // vessel is to be placed vertically or horizontally;
  57.     // isOdd(): vertical;
  58.     // !isOdd(): horizontal;
  59.     var aircraftCarrier = new Ship(5,isOdd(),"aircraftCarrier","A");
  60.     var battleship = new Ship(4,isOdd(),"battleship","B");
  61.     var cruiser = new Ship(3, isOdd(),"cruiser","C");
  62.     var submarine = new Ship(3, isOdd(),"submarine","S");
  63.     var destroyer = new Ship(2,isOdd(),"destroyer","D");
  64.  
  65.     // Set up game initially;
  66.     initGame(10);
  67.     initializeGameArray(gameArray);
  68.     dispgameArray();
  69.     shipLocator();
  70.     dispgameArray();
  71.     dispBoard();
  72.     //guess1 = getGuess();
  73.     //updateGameArray(guess1);
  74.     //dispgameArray();
  75.  
  76.  
  77.  
  78.  
  79. //document.getElementById("part1").innerHTML = "XX XX XX XX XX XX XX XX XX XX<br>";
  80. document.getElementById("part2").innerHTML = "<img src='water.png' alt='1' height='100' width='100'>";
  81.  
  82.     // A function to initialize each of the Model's elements to a string,
  83.     // called "empty";
  84.     // Takes an array as an arg;
  85.     // As ships are added, "empty" will be changed to Ship.name
  86.     // in order to track which vessel is where;
  87.     function initializeGameArray(gameArray[]){
  88.         for(i = 0; i < 100; i++) {
  89.             for(col = 0; col < 10; col++){
  90.                 for(row = 0; row < 10; row++){
  91.                     // Create instance of a Cell Object;
  92.                     Cell(row,col,"empty");
  93.                 }
  94.             }
  95.  
  96.         }
  97.     }
  98.  
  99.  
  100.     // for(col = 0; col < 10; col++){
  101.     //  for(row = 0; row < 10; row++) {
  102.     //      gameArray[row][col] = "empty";
  103.     //  }
  104.     // }
  105.  
  106.     // function initGame(n){
  107.     //     alert("initGame");
  108.     //     var i=0;
  109.     //     for (i=0; i<n; i++){
  110.     //         gameArray[i] = empty;
  111.     //     }
  112.     // }
  113.  
  114.     // Can use to determine whether a Ship is vertical or horizontally placed;
  115.     function isOdd(num) {
  116.         if (num%2 === 0){
  117.             return true
  118.         } else {
  119.             return false
  120.         }
  121.     }
  122.  
  123.     // this is the Model, the array tracking hits and misses
  124.     // and ship placement;
  125.     // i.e. places the ships;
  126.     function dispgameArray(){
  127.         // var i = 0; commented out as unnecessary;
  128.         var html = "";
  129.         // Creates the array tracking ship positions and where hits/misses
  130.         // have occurred; need additional dimensions covered both in Model and
  131.         // visually in the View component;
  132.         alert(gameArray.length);
  133.         //for(const Cell of gameArray){}
  134.         for (i=0; i < gameArray.length; i++){
  135.             if (gameArray[i] == empty) {
  136.                 if (isOdd(i)){
  137.                     html = html + "X"
  138.                 }
  139.                 else
  140.                 {html = html + "X "}
  141.             }
  142.             if (gameArray[i] == ship){
  143.                 if (isOdd(i)){
  144.                     html = html + "&"
  145.                 }
  146.                 else
  147.                 {html = html + "&  "}
  148.             }
  149.             if (gameArray[i] == miss){
  150.                 if (isOdd(i)){
  151.                     html = html + "M"
  152.                 }
  153.                 else
  154.                 {html = html + "M  "}
  155.             }
  156.             if (gameArray[i] == hit){
  157.                 if (isOdd(i)){
  158.                     html = html + "*"
  159.                 }
  160.                 else
  161.                 {html = html + "*  "}
  162.             }
  163.         }
  164.         // Create and place instances of Ships;
  165.         // var carrier = new Ship()
  166.         document.getElementById("part3").innerHTML = html;
  167.     }
  168.  
  169.     // hack this to make useful for different ships;
  170.     // this appears to place the ships within the board;
  171.     // move to inside Ship constructor;
  172.     function shipLocator(){
  173.         var location = 0;
  174.         alert(location);
  175.         location = Math.floor(Math.random()*18);
  176.         alert("shipLocator() -" + location);
  177.         gameArray[location] = ship;
  178.         gameArray[location+1] = ship;
  179.         gameArray[location+2] = ship;
  180.     }
  181.  
  182.     // get user's X-coordinate guess;
  183.     function getGuessX(){
  184.         alert("getGuessX");
  185.         var guessIsBad = true;
  186.         while (guessIsBad) {
  187.             var guessX =  window.prompt("Enter your guess", "Number from 0 to 9");
  188.             alert(guessX)
  189.             alert(parseInt(guessX));
  190.             if ((parseInt(guessX) >= 0 ) && (parseInt(guessX) <= 9)){alert("in  If -" + guessIsBad);
  191.                         return parseInt(guessX)};
  192.             alert(guessIsBad);
  193.         }
  194.         return parseInt(guessX);
  195.     }
  196.  
  197.     // get user's Y-coordinate guess;
  198.     function getGuessY(){
  199.          alert("getGuessY");
  200.          var guessIsBad = true;
  201.          while (guessIsBad) {
  202.              var guessY =  window.prompt("Enter your guess", "Number from 0 to 9");
  203.              alert(guessY)
  204.              alert(parseInt(guessY));
  205.              if ((parseInt(guessY) >= 0 ) && (parseInt(guessY) <= 9)){alert("in     If -" + guessIsBad);
  206.                          return parseInt(guessY)};
  207.              alert(guessIsBad);
  208.          }
  209.          return parseInt(guessY);
  210.      }
  211.  
  212.     // updates both the Model and the View;
  213.     // make able to handle 2D array;
  214.     function updateGameArray(guessX, guessY){
  215.         alert("updateGameArray - " + guessX);
  216.         alert("updateGameArray - " + guessY;
  217.         //alert("updateGameArray - " + gameArray[guess2]);
  218.         // Add handling for multiple ship types, differentiating
  219.         // between them;
  220.         if (gameArray[guessX].equals("empty")){
  221.             gameArray[guess2] = miss;
  222.             countMisses++;
  223.             countTries++;
  224.         }else if (gameArray[guess2] == ship){
  225.             gameArray[guess2] = hit;
  226.             countHits++;
  227.         }else if (gameArray[guess2] == miss) {
  228.             gameArray[guess2] = miss;
  229.             countTries++;
  230.         }else if (gameArray[guess2] == hit) {
  231.             gameArray[guess2] = hit;
  232.             countTries++;
  233.         }
  234.     }
  235.  
  236.  
  237.     function getUpdateDisplay(){
  238.         var guessX = 0;
  239.         guessX = getGuessX();
  240.         var guessY = 0;
  241.         guessY = getGuessY();
  242.         //alert("after getGuess -" + guess1);
  243.         updateGameArray(guessX, guessY);
  244.         dispgameArray();
  245.         dispBoard();
  246.     }
  247.  
  248.     // the pretty pictures (View)
  249.     function dispBoard(){
  250.         var i = 0;
  251.         var html = "";
  252.        // alert("disp Board");
  253.         for (i = 0; i < 10; i++){
  254.             //alert("gameArray -" + gameArray[i] + "i - " + i);
  255.             if (gameArray[i] == empty) {
  256.                 if (isOdd(i)){
  257.                     html = html + "<a href=dispBoard()><img src='water.png' alt='1' height='25' width='25'></a>"
  258.                 }
  259.                 else
  260.                 {html = html + "<img src='water.png' alt='1' height='25' width='25'> "}
  261.             }
  262.             if (gameArray[i] == ship){
  263.                 if (isOdd(i)){
  264.                     html = html + "<img src='water.png' alt='1' height='25' width='25'>"
  265.                 }
  266.                 else
  267.                 {html = html + "<img src='water.png' alt='1' height='25' width='25'>  "}
  268.             }
  269.             if (gameArray[i] == miss){
  270.                 if (isOdd(i)){
  271.                     html = html + "<img src='miss.png' alt='1' height='25' width='25'>  "
  272.                 }
  273.                 else
  274.                 {html = html + "<img src='miss.png' alt='1' height='25' width='25'>  "}
  275.             }
  276.             if (gameArray[i] == hit){
  277.                 if (isOdd(i)){
  278.                     html = html + "<img src='hit.png' alt='1' height='25' width='25'>"
  279.                 }
  280.                 else
  281.                 {html = html + "<img src='hit.png' alt='1' height='25' width='25'>  "}
  282.             }
  283.         }
  284.         alert(html);
  285.         document.getElementById("part1").innerHTML = html;
  286.         document.getElementById("part5").innerHTML = "Tries - " + countTries + " Misses - " + countMisses + " Hits = " + countHits;
  287.         if (countTries > 8) { document.getElementById("part6").innerHTML ="The ship ESCAPED!"}
  288.         if (countHits >= 3) { document.getElementById("part7").innerHTML = "You SUNK by Battleship!"}
  289.     }
  290.  
  291.  
  292.  
  293. </script>
  294.  
  295. <!-- The core Firebase JS SDK is always required and must be listed first -->
  296. <script src="/__/firebase/7.6.1/firebase-app.js"></script>
  297.  
  298. <!-- TODO: Add SDKs for Firebase products that you want to use
  299.      https://firebase.google.com/docs/web/setup#available-libraries -->
  300. <script src="/__/firebase/7.6.1/firebase-analytics.js"></script>
  301.  
  302. <!-- Initialize Firebase -->
  303. <script src="/__/firebase/init.js"></script>
  304.  
  305.  
  306. </body>
  307. </html>
  308. =======
  309. <!DOCTYPE html>
  310. <html>
  311.     <head>
  312.  
  313.     </head>
  314. <body>
  315.  
  316. <h1>Battleship Game</h1>
  317. <p id="part1">Part 1</p>
  318.     <p id="part2"></p>
  319.     <p id="part3"></p>
  320.     <p id="part4"><button type=button onclick=getUpdateDisplay()>GUESS</button></p>
  321.     <p id="part5">Status</p>
  322.     <p id="part6"></p>
  323.     <p id="part7"></p>
  324.  
  325. <script>
  326.  
  327.     // A 1D array of Cells to track position of vessels and places
  328.     // where hits and misses have taken place;
  329.     var gameArray=[100];
  330.     // creates an Object containing (x,y) and {hit, miss, or ship.name};
  331.     function Cell(x,y,contains){
  332.         x = this.x;
  333.         y = this.y;
  334.         contains = this.contain;
  335.     }
  336.  
  337.     // Create an Object constructor for the general Ship-type Object;
  338.     // Ships contain info about their position, name, and when they
  339.     // will sink;
  340.     function Ship(size,hitPoints,name){
  341.         this.size = size;
  342.         // hitPoints initially equal to the number of spaces the Ship-type
  343.         // occupies.
  344.         hitPoints = size;
  345.         this.name = name;
  346.     }
  347.  
  348.     // I'm turning the following variables into Strings,
  349.     // so that specific ships' location and hits can be tracked;
  350.     // var empty = 0;
  351.     // var hit = 1;
  352.     // var miss = 2;
  353.     //var ship = 3; this will have to be hitPoints for each vessel;
  354.     var guess = 0;
  355.     var countTries = 0;
  356.     var countMisses = 0;
  357.     var countHits = 0;
  358.  
  359.     // Set up game initially;
  360.     initGame(10);
  361.     initializeGameArray(gameArray);
  362.     dispgameArray();
  363.     shipLocator();
  364.     dispgameArray();
  365.     dispBoard();
  366.     //guess1 = getGuess();
  367.     //updateGameArray(guess1);
  368.     //dispgameArray();
  369.  
  370.  
  371.  
  372.  
  373. //document.getElementById("part1").innerHTML = "XX XX XX XX XX XX XX XX XX XX<br>";
  374. document.getElementById("part2").innerHTML = "<img src='water.png' alt='1' height='100' width='100'>";
  375.  
  376.     // A function to initialize the Model's elements to a string,
  377.     // called "empty";
  378.     // Takes a 2D array as an arg;
  379.     // As ships are added, "empty" will be changed to Ship.name
  380.     // in order to track which vessel is where;
  381.     function initializeGameArray(gameArray[]){
  382.         for(i = 0; i < 100; i++) {
  383.             for(col = 0; col < 10; col++){
  384.                 for(row = 0; row < 10; row++){
  385.                     // Create instance of a Cell Object;
  386.                     Cell(row,col,"empty");
  387.                 }
  388.             }
  389.  
  390.         }
  391.     }
  392.  
  393.  
  394.     // for(col = 0; col < 10; col++){
  395.     //  for(row = 0; row < 10; row++) {
  396.     //      gameArray[row][col] = "empty";
  397.     //  }
  398.     // }
  399.  
  400.     // function initGame(n){
  401.     //     alert("initGame");
  402.     //     var i=0;
  403.     //     for (i=0; i<n; i++){
  404.     //         gameArray[i] = empty;
  405.     //     }
  406.     // }
  407.  
  408.     // Can use to determine whether a Ship is vertical or horizontally placed;
  409.     function isOdd(num) {
  410.         if (num%2 === 0){
  411.             return true
  412.         } else {
  413.             return false
  414.         }
  415.     }
  416.  
  417.     // this is the Model, the 2D array tracking hits and misses
  418.     // and ship placement;
  419.     // i.e. places the ships;
  420.     function dispgameArray(){
  421.         // var i = 0; commented out as unnecessary;
  422.         var html = "";
  423.         // Creates the array tracking ship positions and where hits/misses
  424.         // have occurred; need additional dimensions covered both in Model and
  425.         // visually in the View component;
  426.         alert(gameArray.length);
  427.         for (i=0; i < gameArray.length; i++){
  428.             if (gameArray[i] == empty) {
  429.                 if (isOdd(i)){
  430.                     html = html + "X"
  431.                 }
  432.                 else
  433.                 {html = html + "X "}
  434.             }
  435.             if (gameArray[i] == ship){
  436.                 if (isOdd(i)){
  437.                     html = html + "&"
  438.                 }
  439.                 else
  440.                 {html = html + "&  "}
  441.             }
  442.             if (gameArray[i] == miss){
  443.                 if (isOdd(i)){
  444.                     html = html + "M"
  445.                 }
  446.                 else
  447.                 {html = html + "M  "}
  448.             }
  449.             if (gameArray[i] == hit){
  450.                 if (isOdd(i)){
  451.                     html = html + "*"
  452.                 }
  453.                 else
  454.                 {html = html + "*  "}
  455.             }
  456.         }
  457.         // Create and place instances of Ships;
  458.         // var carrier = new Ship()
  459.         document.getElementById("part3").innerHTML = html;
  460.     }
  461.  
  462.     // hack this to make useful for different ships;
  463.     // this appears to place the ships within the board;
  464.     // move to inside Ship constructor;
  465.     function shipLocator(){
  466.         var location = 0;
  467.         alert(location);
  468.         location = Math.floor(Math.random()*18);
  469.         alert("shipLocator() -" + location);
  470.         gameArray[location] = ship;
  471.         gameArray[location+1] = ship;
  472.         gameArray[location+2] = ship;
  473.     }
  474.  
  475.     // get user's X-coordinate guess;
  476.     function getGuessX(){
  477.         alert("getGuessX");
  478.         var guessIsBad = true;
  479.         while (guessIsBad) {
  480.             var guessX =  window.prompt("Enter your guess", "Number from 0 to 9");
  481.             alert(guessX)
  482.             alert(parseInt(guessX));
  483.             if ((parseInt(guessX) >= 0 ) && (parseInt(guessX) <= 9)){alert("in  If -" + guessIsBad);
  484.                         return parseInt(guessX)};
  485.             alert(guessIsBad);
  486.         }
  487.         return parseInt(guessX);
  488.     }
  489.  
  490.     // get user's Y-coordinate guess;
  491.     function getGuessY(){
  492.          alert("getGuessY");
  493.          var guessIsBad = true;
  494.          while (guessIsBad) {
  495.              var guessY =  window.prompt("Enter your guess", "Number from 0 to 9");
  496.              alert(guessY)
  497.              alert(parseInt(guessY));
  498.              if ((parseInt(guessY) >= 0 ) && (parseInt(guessY) <= 9)){alert("in     If -" + guessIsBad);
  499.                          return parseInt(guessY)};
  500.              alert(guessIsBad);
  501.          }
  502.          return parseInt(guessY);
  503.      }
  504.  
  505.     // updates both the Model and the View;
  506.     // make able to handle 2D array;
  507.     function updateGameArray(guessX, guessY){
  508.         alert("updateGameArray - " + guessX);
  509.         alert("updateGameArray - " + guessY;
  510.         //alert("updateGameArray - " + gameArray[guess2]);
  511.  
  512.         if (gameArray[guessX] == empty){
  513.             gameArray[guess2] = miss;
  514.             countMisses++;
  515.             countTries++;
  516.         }else if (gameArray[guess2] == ship){
  517.             gameArray[guess2] = hit;
  518.             countHits++;
  519.         }else if (gameArray[guess2] == miss) {
  520.             gameArray[guess2] = miss;
  521.             countTries++;
  522.         }else if (gameArray[guess2] == hit) {
  523.             gameArray[guess2] = hit;
  524.             countTries++;
  525.         }
  526.     }
  527.  
  528.  
  529.     function getUpdateDisplay(){
  530.         var guessX = 0;
  531.         guessX = getGuessX();
  532.         var guessY = 0;
  533.         guessY = getGuessY();
  534.         //alert("after getGuess -" + guess1);
  535.         updateGameArray(guessX, guessY);
  536.         dispgameArray();
  537.         dispBoard();
  538.     }
  539.  
  540.     // the pretty pictures (View)
  541.     function dispBoard(){
  542.         var i = 0;
  543.         var html = "";
  544.        // alert("disp Board");
  545.         for (i = 0; i < 10; i++){
  546.             //alert("gameArray -" + gameArray[i] + "i - " + i);
  547.             if (gameArray[i] == empty) {
  548.                 if (isOdd(i)){
  549.                     html = html + "<a href=dispBoard()><img src='water.png' alt='1' height='25' width='25'></a>"
  550.                 }
  551.                 else
  552.                 {html = html + "<img src='water.png' alt='1' height='25' width='25'> "}
  553.             }
  554.             if (gameArray[i] == ship){
  555.                 if (isOdd(i)){
  556.                     html = html + "<img src='water.png' alt='1' height='25' width='25'>"
  557.                 }
  558.                 else
  559.                 {html = html + "<img src='water.png' alt='1' height='25' width='25'>  "}
  560.             }
  561.             if (gameArray[i] == miss){
  562.                 if (isOdd(i)){
  563.                     html = html + "<img src='miss.png' alt='1' height='25' width='25'>  "
  564.                 }
  565.                 else
  566.                 {html = html + "<img src='miss.png' alt='1' height='25' width='25'>  "}
  567.             }
  568.             if (gameArray[i] == hit){
  569.                 if (isOdd(i)){
  570.                     html = html + "<img src='hit.png' alt='1' height='25' width='25'>"
  571.                 }
  572.                 else
  573.                 {html = html + "<img src='hit.png' alt='1' height='25' width='25'>  "}
  574.             }
  575.         }
  576.         alert(html);
  577.         document.getElementById("part1").innerHTML = html;
  578.         document.getElementById("part5").innerHTML = "Tries - " + countTries + " Misses - " + countMisses + " Hits = " + countHits;
  579.         if (countTries > 8) { document.getElementById("part6").innerHTML ="The ship ESCAPED!"}
  580.         if (countHits >= 3) { document.getElementById("part7").innerHTML = "You SUNK by Battleship!"}
  581.     }
  582.  
  583.  
  584.  
  585. </script>
  586.  
  587. <!-- The core Firebase JS SDK is always required and must be listed first -->
  588. <script src="/__/firebase/7.6.1/firebase-app.js"></script>
  589.  
  590. <!-- TODO: Add SDKs for Firebase products that you want to use
  591.      https://firebase.google.com/docs/web/setup#available-libraries -->
  592. <script src="/__/firebase/7.6.1/firebase-analytics.js"></script>
  593.  
  594. <!-- Initialize Firebase -->
  595. <script src="/__/firebase/init.js"></script>
  596.  
  597.  
  598. </body>
  599. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!