I am trying to hard code the ships and try to hit and sunk them, but the message that Ships were either, hit, or sunk, or were missed is not displaying on the webpage. Instead, it's displaying as Ships were sank all the time on top. I checked the console for Errors, and there were none. I don't know what's wrong in my code.
So far my code looks like this. And the console is not showing any errors.
var view = {
displayMessage: function(msg){
var messageArea = document.getElementById("messageArea");
messageArea.innerHTML = msg;
},
displayHit: function(location){
var cell = document.getElementById(location);
cell.setAttribute("class","hit");
},
displayMiss: function(location){
var cell = document.getElementById(location);
cell.setAttribute("class","miss");
}
};
view.displayMiss("00");
view.displayHit("34");
view.displayHit("12");
view.displayMiss("25");
view.displayMessage("are you on?");
var model = {
boardsize: 7,
numships: 3,
shipLength: 3,
shipSunk: 0,
ships: [{ locations: ["06", "16", "26"], hits: ["hit", "", ""] },
{ locations: ["24", "34", "44"], hits: ["", "", ""] },
{ locations: ["10", "11", "12"], hits: ["", "", ""] }],
fire: function(guess) {
for(var i = 0; i < this.numships; i++){
var ship = this.ships[i];
var index = ship.locations.indexOf(guess);
if(index >=0){
ship.hits[index] = "hit";
view.displayHit(guess);
view.displayMessage("HIT!");
if (this.isSunk(ship)){
view.displayMessage("You sank my warship");
this.shipSunk++;
}
return true;
}
}
view.displayMiss(guess);
view.displayMessage("You Missed.");
return false;
},
isSunk: function(ship) {
for (var i = 0; i < this.shipLength; i++){
if (ship.hits[i] !== "hit"){
return false;
}
}
return true;
}
};
/*
model.fire("53");
model.fire("06");
model.fire("16");
model.fire("26");
model.fire("34");
model.fire("24");
model.fire("44");
model.fire("12");
model.fire("11");
model.fire("10");
*/
function parseGuess(guess){
var alphabet = ["A","B","C","D","E","F","G"];
if(guess === null || guess.length !== 2){
alert("Enter a valid number and letter");
} else{
var row = alphabet.indexOf(guess.charAt(0));
var column = guess.charAt(1);
if (isNaN(row) || isNaN(column)){
alert("invalid number");
}
else if (row < 0 || row >= model.boardsize || column < 0 || column >= model.boardsize){
alert("off the board");
} else {
return row + column;
}
}
return null;
}
var controller = {
guesses: 0,
processGuess: function(guess){
var location = parseGuess(guess);
if(location){
this.guesses++;
var hit = model.fire(location);
if(hit && model.shipSunk === model.numships) {
view.displayMessage("You sank the warship, in" + this.guesses + "guesses");
}
}
}
}
controller.processGuess("A0");
controller.processGuess("A6");
controller.processGuess("B6");
controller.processGuess("C6");
controller.processGuess("C4");
controller.processGuess("D5");
controller.processGuess("E4");
controller.processGuess("B0");
controller.processGuess("B1");
controller.processGuess("B2");
function init(){
var fireButton = document.getElementById("fireButton");
fireButton.onclick = handleFireButton;
guessInput.onkeypress = handleKeyPress;
}
function handleKeyPress(e){
var fireButton = document.getElementById("fireButton");
if(e.keycode === 13){
fireButton.click();
return false;
}
}
function handleFireButton(){
var guessInput = document.getElementById("guessInput");
var guess = guessInput.value;
controller.processGuess(guess);
guessInput.value = "";
}
window.onload = init;
I am trying to hard code the ships and try to hit and sunk them, but the message that Ships were either, hit, or sunk, or were missed is not displaying on the webpage. Instead, it's displaying as Ships were sank all the time on top. I checked the console for Errors, and there were none. I don't know what's wrong in my code.
So far my code looks like this. And the console is not showing any errors.