This is a prototype of a battleship game, build with HTML, CSS and the logic of the game with JavaScript.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Users should be able to:

• Input a guess, see if is a hit or a miss;
• Sink three ships to win the game;
• Get the result in the end with the number of guesses.

• Live site

• HTML forms
• DOM manipulation
• CSS
• JavaScrip OO

This project helped evolving my knowledge envolvin object oriented JavaScript, more ways of utilizing DOM manipulations, and how to apply loops, conditionals and whiles in way that make sense.

@font-face {
    font-family: 'Pixel';
    src: url('../fonts/Pixel.ttf');
}

fire: function (guess) {
        for (let 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)) {
                    this.shipsShunk++
                    view.displayMessage("You sank my battleship!")
                }
                return true
            }
        }
        view.displayMiss(guess);
        view.displayMessage("You missed.")
        return false
    }

Looking foward to improve even more this project by adding more style, effects, animations and maybe a more optimal interface to chose the amount of ships and board size.

• Frontend Mentor - @jAllanOli
• gitHub - @jAllanOli