Head-First-JavaScript-Programming
Head-First-JavaScript-Programming copied to clipboard
bethrobson
Chapter 8 - Battleship
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 :)
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!
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?
Oh good! Yes, sometimes the browser will cache the JavaScript. If you shift-reload, that can help.
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.
It's here: https://github.com/bethrobson/Head-First-JavaScript-Programming/tree/master/chapter8
I don't even remember why I'm a part of this thread! 🤔
On 1 Dec 2017 23:05, "Elisabeth Robson" [email protected] wrote:
It's here: https://github.com/bethrobson/Head-First-JavaScript- Programming/tree/master/chapter8
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/bethrobson/Head-First-JavaScript-Programming/issues/23#issuecomment-348637709, or mute the thread https://github.com/notifications/unsubscribe-auth/Ab4S7hd3EGgHI815Omb_scDSTYYmhoe0ks5s8IYmgaJpZM4OwDnF .
Sorry, I meant I don't remember HOW I'm a part of this thread. 😆
On 1 Dec 2017 23:35, "Padraig O'Fearraigh" [email protected] wrote:
I don't even remember why I'm a part of this thread! 🤔
On 1 Dec 2017 23:05, "Elisabeth Robson" [email protected] wrote:
It's here: https://github.com/bethrobson/Head-First-JavaScript-Programm ing/tree/master/chapter8
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/bethrobson/Head-First-JavaScript-Programming/issues/23#issuecomment-348637709, or mute the thread https://github.com/notifications/unsubscribe-auth/Ab4S7hd3EGgHI815Omb_scDSTYYmhoe0ks5s8IYmgaJpZM4OwDnF .
Thanks, Elisabeth !
Am 02.12.2017 um 00:05 schrieb Elisabeth Robson:
It's here: https://github.com/bethrobson/Head-First-JavaScript-Programming/tree/master/chapter8
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/bethrobson/Head-First-JavaScript-Programming/issues/23#issuecomment-348637709, or mute the thread https://github.com/notifications/unsubscribe-auth/AdOou_Y9xIO-WJBa14Nbnzra4xbs34rHks5s8IYmgaJpZM4OwDnF.
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.
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"));
You're spelling "length" wrong in:
if (guess === null || guess.lenght !== 2)
So your code won't run properly.
On Thu, Dec 6, 2018 at 9:14 AM juwie5 [email protected] wrote:
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.
[image: hf javascript ch8] https://user-images.githubusercontent.com/41777756/49599542-945cb080-f981-11e8-954e-a1c1892c3efe.JPG 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"));
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/bethrobson/Head-First-JavaScript-Programming/issues/23#issuecomment-444952455, or mute the thread https://github.com/notifications/unsubscribe-auth/AAB4KBuyka27twErwGFcTQP70lHV0ZRFks5u2VCPgaJpZM4OwDnF .
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");
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??
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.
