4Geeks logo
Sobre Nosotros

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Data Science and Machine Learning - 16 wks

Full-Stack Software Developer - 16w

Buscar en lecciones

Aprendizaje social y en vivo

La forma más eficiente de aprender: Únete a una cohorte con compañeros, transmisiones en vivo, sesiones improvisadas de codificación, tutorías en vivo con expertos reales y mantenga la motivación.

← Volver a Proyectos

Battleship con Vanilla.js

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

intermediate

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

8 hrs

Tecnologías

Battleship In Vanilla.js

Crea un batalla naval usando Vanilla.js

Demonstration of Battleship

🌱 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.

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

intermediate

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

8 hrs