Modify the javascript program below game as follows: Please leave comments where
ID: 666525 • Letter: M
Question
Modify the javascript program below game as follows: Please leave comments where you made modifications.
The board is a 4x4 grid. Squares go from lower left (0, 0) to upder right (3,3). 16 squares in all.
Directions are: N, NE, E, SE, S, SW, W, NW
The battleship consist of three quares in a row. The battleship can be paralle to horizontal, vertical, and either diagonal directions.
Modifications:
1. Write a javasript function to ramdomly select starting square from 00 to 33 on the grid (radom).
2. Wite a function to check possible valid direections from a given square. Eg. for square 00, N, E, NE are valid, but S, W, SW, SE, and NW are invalid since each of these directions will run off the board.
3. Write a function that makes a valid random placement of the battleship. Make sure that each return of the function produces a differnt placement and all valid placements are possible.
4. Write neccessary code for the guessing game, including prompting user for guesses. At the end of the game, print the battleship configuration (eg. 00,11,22) and the total number of guesses for success.
margin: auto;
background: url("board.jpg") no-repeat;
}
div#messageArea {
position: absolute;
top: 0px;
left: 0px;
color: rgb(83, 175, 19);
}
.hit {
background: url("ship.png") no-repeat center center;
}
.miss {
background: url("miss.png") no-repeat center center;
}
table {
border-spacing: 0px;
/* could use border-collapse instead */
/* border-collapse: collapse; */
position: absolute;
left: 173px;
top: 98px;
}
td {
width: 94px;
height: 94px;
}
form {
position: absolute;
bottom: 0px;
right: 0px;
padding: 15px;
background-color: rgb(83, 175, 19);
}
form input {
background-color: rgb(152, 207, 113);
border-color: rgb(83, 175, 19);
font-size: 1em;
}
</style>
</head>
<body>
<div id="board">
<div id="messageArea"></div>
<table>
<tr>
<td id="00"></td> <td id="01"></td> <td id="02"></td> <td id="03"></td>
<td id="04"></td> <td id="05"></td> <td id="06"></td>
</tr>
<tr>
<td id="10"></td> <td id="11"></td> <td id="12"></td> <td id="13"></td>
<td id="14"></td> <td id="15"></td> <td id="16"></td>
</tr>
<tr>
<td id="20"></td> <td id="21"></td> <td id="22"></td> <td id="23"></td>
<td id="24"></td> <td id="25"></td> <td id="26"></td>
</tr>
<tr>
<td id="30"></td> <td id="31"></td> <td id="32"></td> <td id="33"></td>
<td id="34"></td> <td id="35"></td> <td id="36"></td>
</tr>
<tr>
<td id="40"></td> <td id="41"></td> <td id="42"></td> <td id="43"></td>
<td id="44"></td> <td id="45"></td> <td id="46"></td>
</tr>
<tr>
<td id="50"></td> <td id="51"></td> <td id="52"></td> <td id="53"></td>
<td id="54"></td> <td id="55"></td> <td id="56"></td>
</tr>
<tr>
<td id="60"></td> <td id="61"></td> <td id="62"></td> <td id="63"></td>
<td id="64"></td> <td id="65"></td> <td id="66"></td>
</tr>
</table>
<form>
<input type="text" id="guessInput" placeholder="A0">
<input type="button" id="fireButton" value="Fire!">
</form>
</div>
<script src="battleship.js">
</script>
</body>
</html>
Explanation / Answer
Ans:
Change this:
td {
width : 94px;
height : 94px;
}
to this:
td {
width : 94px;
height : 94px;
padding : 0;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.