Fundamentos de Programaci贸n
Bienvenida a Platzi: 驴qu茅 necesitas para tomar el curso?
Programaci贸n en Navegadores: Primeros Pasos
Crea tu primer sitio web
Sitios web con HTML
Estructura de 谩rbol en HTML
Instalando tu primer editor de c贸digo
C贸mo declarar variables y usar prompt
Algoritmo de piedra, papel o tijera
Algoritmo avanzado de piedra, papel o tijera
Aleatoriedad
Refactor del c贸digo usando funciones
Ciclos
Gana 3 veces
Archivos de HTML y JavaScript
驴Qu茅 es el DOM?
Quiz: Fundamentos de Programaci贸n
Desarrollando un juego con HTML y JavaScript
Maquetaci贸n con HTML
Secci贸n de elegir mascota
驴D贸nde ubicar la etiqueta script? Conectando HTML con JavaScript
Escuchando eventos con JavaScript
addEventListener
Manipulaci贸n del DOM
Enemigos aleatorios
Ataques en JavaScript
Ataques aleatorios del enemigo
Imprimiendo ataques del enemigo
驴Ganaste, perdiste o empataste?
Tablas de verdad
Creando el contador de vidas
驴Qui茅n gan贸 el juego?
Reiniciando el juego
Ocultando elementos HTML con JS para mejorar la UX del juego
Quiz: Desarrollando un juego con HTML y JavaScript
Estilos con CSS
Anatom铆a de CSS
Tipos de display
Flexbox
Modelo de caja
Im谩genes para los Mokepones
Estilos del bot贸n
Adaptando HTML al dise帽o del juego
Layout: t铆tulo y ataques
Adaptando JavaScript al dise帽o del juego
CSS Grid
Responsive Design
Detalles finales
Quiz: Estilos con CSS
Optimizaci贸n de c贸digo
Revisi贸n de c贸digo
Don't repeat yourself (DRY)
Clases y objetos
Clases y objetos de Mokepon
Arrays o arreglos
Objetos vs. arreglos
Ciclos: manipulando el DOM con iteradores
Declaraci贸n lenta de variables
Una sola fuente de la verdad
Mascotas aleatorias con arreglos
Ataques din谩micos por cada mascota: extraer
Renderizado din谩mico en HTML
Eventos de click din谩micos
Secuencia de ataques del enemigo
Iniciando el combate
Resolviendo el reto de condicionales
Optimizando el frontend del juego
Quiz: Optimizaci贸n de c贸digo
Mapa con canvas
Introducci贸n a canvas: dibujando con JavaScript
Moviendo a Capipepo hacia la derecha
Movimiento hacia todas las direcciones
Movimientos con el teclado
Im谩genes y personajes de fondo
M茅todos en las clases
Obst谩culos y colisiones
Combate entre mokepones colisionados
Mapa responsive
Botones bonitos y viewport
Quiz: Mapa con canvas
Backend: videojuego multijugador
驴Qu茅 es backend?
Instalaci贸n de Node.js y NPM
Terminal de comandos y Node.js
Servidor web con Express.js
HTTP, localhost, servidores y puertos
Express.js y fetch: API REST con JavaScript
JSON y POST: mokepon online
Transmisi贸n de coordenadas
Mokepones din谩micos en el mapa
Optimizando el mapa del juego
Batalla entre jugadores
Consumiendo la API de ataques del enemigo
Quiz: Backend: videojuego multijugador
Pr贸ximos pasos
Probando el juego en varios dispositivos
驴Y ahora qu茅 curso tomar?
No tienes acceso a esta clase
隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera
Las optimizaciones del c贸digo no solo tienen que hacerse en el c贸digo Javascript para mejorar la l贸gica de un programa. Tambi茅n puede aplicarse en el front-end para mejorar la experiencia de usuario.
Tal vez sea la primera vez que escuches sobre UX, User eXperience o experiencia de usuario. La misma es una pr谩ctica de dise帽o que busca entender el comportamiento de los usuarios de un software y buscar optimizar el mismo para que sea ameno el uso de la aplicaci贸n.
Por ejemplo, en el videojuego que te encuentras desarrollando pueden ocurrir errores visuales que no son gratos para el jugador.
Como los mokepones tienen muchos ataques, la pantalla queda chica y se rompe el HTML.
Puedes solucionarlo f谩cilmente modificando los estilos CSS del bot贸n de ataque y obtener el siguiente resultado.
.boton-de-ataque {
background-color: #11468F;
padding: 10px;
box-sizing: border-box;
border-radius: 20px;
border-color: transparent;
width: 80px;
color: white;
font-family: 'Poppins', sans-serif;
}
Otro problema que tiene el videojuego en este punto es que permite seleccionar todas las veces que el jugador quiera, el mismo ataque. Esto puede causar que el jugador haga trampa o simplemente es un comportamiento que no queremos.
Bloquea el bot贸n que el usuario seleccion贸 f谩cilmente con la propiedad del elemento bot贸n llamada disabled
.
function secuenciaAtaque() {
botones.forEach((boton) => {
boton.addEventListener('click', (e) => {
if (e.target.textContent === '馃敟') {
// ...
boton.disabled = true;
} else if (e.target.textContent === '馃挧') {
// ...
boton.disabled = true;
} else {
// ...
boton.disabled = true;
}
ataqueAleatorioEnemigo();
})
})
}
De esta forma, el usuario estar谩 obligado a seleccionar los cinco ataques de su mokepon y a no repetirlos.
Si recorres tu videojuego, tal vez encuentres muchos otros puntos de mejora que puedes utilizar para practicar y aprender m谩s. Si un amigo o familiar puede utilizar la aplicaci贸n, este puede recomendarte c贸mo mejorar la l贸gica del juego. Siempre es recomendable que otra persona prueba el software que uno mismo est谩 programando para ver cosas que nosotros no podemos ver.
Felicitaciones por llegar hasta este punto del Curso Gratis de Programaci贸n B谩sica de Platzi. Ya tienes toda una aplicaci贸n funcionando para jugar con tu videojuego y optimizada con buenas pr谩cticas de programaci贸n. A partir del siguiente m贸dulo, comenzar谩s a desarrollar un mapa para que los mokepones pueda pasearse por una ciudad antes de iniciar un nuevo combate.
No dudes en continuar. 隆Nos vemos ah铆!
Contribuci贸n creada por: Kevin Fiorentino (Platzi Contributor)
Aportes 0
Preguntas 46
驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?