Skip to content

Chapter 8 - Battleship #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
akyjoon opened this issue Aug 7, 2017 · 17 comments
Open

Chapter 8 - Battleship #23

akyjoon opened this issue Aug 7, 2017 · 17 comments

Comments

@akyjoon
Copy link

akyjoon commented Aug 7, 2017

Hi, I'm on chapter 8 where you build a battleship game. I have finished the Viewer and Model part without the Controller part. My problem:
I type in the console model.fire("somecell") to make 3 hits and drown a ship, but I keep getting that the ship is sunk on every hit. It never says "Hit!"

My code:
`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");
}
};

var model = {
boardSize : 7,
numShips: 3,
shipLength: 3,
shipsSunk: 0,

ships:[
{locations: ["10", "20", "30"], hits: ["", "", ""]},
{locations: ["32","33","34"], hits:["", "", ""]},
{locations: ["63","64","65"], 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) {
    //trafiony
    ship.hits[index] = "hit";
    view.displayHit(guess);
    view.displayMessage("Hit!");

    if (this.isSunk(ship)){
      view.displayMessage("Sunk!");
      this.shipsSunk++;
    }
    return true;
  }
}
view.displayMiss(guess);
view.displayMessage("Miss!")
return false;

},
isSunk: function(ship) {
for (var i=0; i < this.shipLength; i++){
if (ship.hits[i] !== "hit") {
return false;
}
return true;
}
}
};
`

I compared the code and it's the same as in the book and don't understand why it won't work. Can you help me?
Btw. this book is awesome. I bought a polish version :)
@bethrobson
Copy link
Owner

Hi,
I just ran the code from the book and it works fine, so you must have a bug somewhere! Use the console to help track it down.

Glad you like the book!

@akyjoon
Copy link
Author

akyjoon commented Aug 8, 2017

Thanks for the reply. Yes I ran it again today and it works! Yesterday it didn't run and console didn't show anything... Is there any possibility that the browser remembered the old wrong code and didn't run properly the one that actually should run?

@bethrobson
Copy link
Owner

Oh good! Yes, sometimes the browser will cache the JavaScript. If you shift-reload, that can help.

@sssony
Copy link

sssony commented Dec 1, 2017

Hello,
I can not find the download link for chapter 8 for Buttleship with images.
There is no Dowload menu in the http://www.wickedlysmart.com/hfjs/
I would be very appreciate for yor help.

@bethrobson
Copy link
Owner

It's here: https://github.com/bethrobson/Head-First-JavaScript-Programming/tree/master/chapter8

@padraigofearraigh
Copy link

padraigofearraigh commented Dec 1, 2017 via email

@padraigofearraigh
Copy link

padraigofearraigh commented Dec 1, 2017 via email

@sssony
Copy link

sssony commented Dec 2, 2017 via email

@juwie5
Copy link

juwie5 commented Dec 6, 2018

Hello, Good day am on Chapter 8 where you implement the parseGuess function I'm having issue as am not getting the required results in my console as in the book.

hf javascript ch8
here is the code
function parseGuess (guess) {
var alphabet = ["A", "B", "C", "D", "E", "F", "G"];

if (guess === null || guess.lenght !== 2) {
    alert("Oops, please enter a letter and a number on the board."); 
} else {
   firstChar = guess.charAt(0);
   var row = alphabet.indexOf(firstChar);
   var column = guess.charAt(1);

   if (isNaN(row) || isNaN(column)) {
        alert("Oops, that isnt on the board.");
   } else if (row < 0 ||  row >= model.boardSize ||
              column < 0 || column >= model.boardSize) {
        alert("Oops, that's off the board!");
    } else {
       return row + column; 
    }
} 
return null;

}

console.log(parseGuess("A0"));
console.log(parseGuess("B6"));
console.log(parseGuess("G3"));

@bethrobson
Copy link
Owner

bethrobson commented Dec 6, 2018 via email

@juwie5
Copy link

juwie5 commented Dec 7, 2018

Thank you very much my bad

@juwie5
Copy link

juwie5 commented Dec 18, 2018

good day still need help in understanding this code

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.displayMessage("Tap tap, is this thing on?");

var model = {
boardSize: 7,
numShips: 3,
shipsSunk: 0,
shipLenght: 3,
ships: [ {locations:["06", "16", "26"], hits:["", "", ""] },
{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 battleship!");
                this.shipsSunk++;
            }
            return true;
        }
    }
    view.displayMiss(guess);
    view.displayMessage("You missed.");
    return false;
},
isSunk: function(ship) {
    for (var i = 0; i < this.shipLenght; i++) {
        if (ship.hits[i] !== "hit"){
            return false;
        }
    }
    return true;
}

};

function parseGuess (guess) {
var alphabet = ["A", "B", "C", "D", "E", "F", "G"];

if (guess === null || guess.length !== 2) {
    alert("Oops, please enter a letter and a number on the board."); 
} else {
   firstChar = guess.charAt(0);
   var row = alphabet.indexOf(firstChar);
   var column = guess.charAt(1);

   if (isNaN(row) || isNaN(column)) {
        alert("Oops, that isnt on the board.");
   } else if (row < 0 ||  row >= model.boardSize ||
              column < 0 || column >= model.boardSize) {
        alert("Oops, that's 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.shipsSunk === model.numShips){
            view.displayMessage ("You sank all my battleships, in " + this.guesses + "guesses");
        }
    }
}

};

controller.processGuess("A0");

chapter 8

@jonathanfowler
Copy link

Hello, I just started this exercise and so saw tables being used. I'm surprised...aren't tables old practice. Surely better to use divs with css flex layout??

@bethrobson
Copy link
Owner

Jonathan, there's nothing wrong with using tables - they are a valid way to display data. Flex works great especially if you need flexibility in cell sizing or row sizing, but we didn't need that for this grid. The concepts of modifying HTML and CSS with JavaScript are the similar no matter what underlying structure you use, and in this case, using a table was easier and more straightforward. In addition, the book is about JavaScript, not HTML & CSS, and we wanted to focus on the JS concepts rather than explaining flex which is trickier to understand for people not familiar with it.

Thanks for your comment.

@Geisel-Diesel
Copy link

Hi, I'm getting this error?
image

@bethrobson
Copy link
Owner

You're missing a "this" in front of "ships", it should be "this.ships".

@Geisel-Diesel
Copy link

Sweet thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@bethrobson @Geisel-Diesel @jonathanfowler @akyjoon @padraigofearraigh @sssony @juwie5