A tu propio ritmo

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.

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.

Buscar en lecciones


IngresarEmpezar

Regístrate en 4Geeks

← Volver a Proyectos

Battleship con Vanilla.js

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • the-dom

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • the-dom

  • vanilla-js

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.

Regístrate para obtener acceso a proyectos similares

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • the-dom

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • the-dom

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • the-dom

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • the-dom

  • vanilla-js

Regístrate para obtener acceso a proyectos similares

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • the-dom

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • the-dom

  • vanilla-js

Material de apoyo

Para prepararte mejor para completar estos ejercicios, sugerimos los siguientes materiales

Lección

Que es DOM: Document Object Model

Ejercicio

Aprende cómo manipular el DOM con JavaScript

Ejercicio

Aprende Arrays y Loops de Javascript Interactivamente