4Geeks logo
4Geeks logo

Courses

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Coding Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

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.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Buscar en lecciones


IngresarEmpezar
← 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

Video de solución

No disponible

Duración promedio

8 hrs

Tecnologías

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast

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

Video de solución

No disponible

Duración promedio

8 hrs

Tecnologías

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast