Battleship con Vanilla.js

Battleship In Vanilla.js

Crea un batalla naval usando Vanilla.js

🌱 Cómo iniciar este proyecto

No clones este repositorio. El primer paso para comenzar a codificar es clonar el vanillajs boilerplate en tu computador local o con Gitpod.

a) Si usas Gitpod (recomendada) puedes clonar el boilerplate clic aquí.

b) Si trabajas localmente, escribe el siguiente comando en tu terminal:

1git clone  https://github.com/4GeeksAcademy/vanillajs-hello

💡 Importante: Recuerda actualizar el remote del proyecto con el de tu repositorio usando git remote set-url origin <your new url>, y luego guardar tu código en tu nuevo repositorio usando add, commit y push.

📝Instrucciones

1. Crea tu HTML / CSS. Primero, te recomendamos usar un div padre con display: flex y flex-wrap: wrap (para permitir múltiples filas), el contenedor debe tener 100 divs adentro.
2. Una vez que tu HTML / CSS se vea bien, comienza a pensar en cómo hacerlo dinámico usando JS.
3. Para representar el tablero de juego, puedes usar una array o arreglo JS como este:

1// 0 = empty
2// 1 = part of a ship
3// 2 = a sunken part of a ship
4// 3 = a missed shot
5let gameBoard = [
6    [1,1,1,1,1,0,0,0,0,1],
7    [0,0,0,0,0,0,0,0,0,1],
8    [0,0,0,0,0,0,0,0,0,1],
9    [0,0,0,0,0,0,0,0,0,1],
10    [0,0,0,0,0,0,0,0,0,0],
11    [1,0,0,1,1,0,0,0,0,0],
12    [1,0,0,0,0,0,0,0,0,0],
13    [1,0,0,0,0,0,0,0,0,0],
14    [0,0,0,0,0,0,0,0,0,0],
15    [1,1,1,1,0,0,0,0,0,0]
16];

1. Agrega un onClick a cada <div> y llama a la función fireTorpedo con las coordenadas del div.
2. Reemplaza el valor en el tablero y muestra (render) el tablero nuevamente.

😎 ¿Te sientes seguro?

• Intenta implementar una función "showShips" que muestre las posiciones del barco cuando se hace clic.