Optimización y Corrección de Errores en Juegos Web con JavaScript

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:33

Optimización y Corrección de Errores en Juegos Web con JavaScript

Curso Gratis de Programación Básica 2022

Clase 60 de 84

Clase 60 / 84

Recursos

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.

Mejoras de 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)