m4n50n/battleship_game

Battleship game | 4Geeks Academy

Battleship game with Vanilla JS

✏ Create a battleship game for one person only with Vanilla JS. Inspired in ./preview.gif.

What to do next?

📄 Running a web-server using the following command in the Gitpod workspace terminal to preview the project:

pip3 install flask && python3 server.py

Sources 📌

https://projects.breatheco.de/interactive-coding-tutorial/intermediate/battleship-vanillajs

https://github.com/breatheco-de/exercise-battleship-vanillajs

Instructions 📄

• The user can choose if ships will be placed by default or randomly before the game start.
• The positions of the ships can be revealed by clicking on the Show Ships button.
• The user can restart the game by clicking on the Restart button.
• The user can be fire by clicking in each box of the board game or by clicking on the Fire button and introducing the x and y coordinates in comma separated format.
• The game will end when the user has sunk all the ships.
• The user will lose the game if he misses all the shots before sinking all the ships.

Direct live demo 🎬

https://raw.githack.com/m4n50n/battleship_game/main/index.html

💻 Jose Clemente García Rodríguez (https://github.com/m4n50n)

battleship_game's Issues

funciones inecesarias, agregar variables de estado inmutabilidad

tienes una funcion que es la de RestartGameBoardVariable linea 75, no le veo mucha utilidad es mejor que tengas un estado del array con todas las posiciones en Cero (0), que sea inmutable es decir que sea una contante y no cambiar su valor y crear otra variable que sea la copia del board original, asi tienes una funcion mas simple que solomente es cambiar valores.

El DefaultPositions, lo mejor seria que eso tuviera un array con las posiciones basicas o la variables tal cual como esta con las posiciones predefincas directamente y solamente haces un cambio de valores.

Ejmplo:

//estado original
const GameBoardState = [
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0]
];

luego tienes una variable que hace copia de esa que es el game bord que utilizas para jugar

let gameBoard = [...GameBoardState];

luego tienes el gameBoardDefaultPosition;

//state
const defaultPositions = [
[0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,0,0,1],
[0,0,0,0,0,0,0,0,1],
[0,0,0,0,0,0,0,0,1],
[0,0,0,1,1,0,0,0,1],
[0,0,1,0,0,0,0,0,0],
[0,0,1,0,0,0,1,1,1],
[0,0,1,0,0,0,0,0,0],
[0,0,1,0,0,0,0,0,0]
];

asi que cuando reinicies el tablero es solo decir gameBoard = [...GameBoardState];
o si quieres asignar valor o tablero por defecto es gameBoard = [...defaultPositions];

por ultimo el random tienes que es 1, capaz el ramdon que sea un valor de naves que elija el usuario (cuantas ship quieres que aparezcan en el juego) o un numero random de naves que va a salir es decir aparecen 5 ship o 10 ship

y la funciones PlaceRandomShipsme parece muy larga, te interesa es generar posiciones aleaotrias una x cantidad de veces si son 5 ship o 10 ship aleatorios y generar una posicion y aleatoria con la longitud del tablero y una posion x con la misma longitud ya que el tablero tienes unas longitudas ya establecidas