Fundamentos de Programaci贸n

1

Bienvenida a Platzi: 驴qu茅 necesitas para tomar el curso?

2

Programaci贸n en Navegadores: Primeros Pasos

3

Crea tu primer sitio web

4

Sitios web con HTML

5

Estructura de 谩rbol en HTML

6

Instalando tu primer editor de c贸digo

7

C贸mo declarar variables y usar prompt

8

Algoritmo de piedra, papel o tijera

9

Algoritmo avanzado de piedra, papel o tijera

10

Aleatoriedad

11

Refactor del c贸digo usando funciones

12

Ciclos

13

Gana 3 veces

14

Archivos de HTML y JavaScript

15

驴Qu茅 es el DOM?

Quiz: Fundamentos de Programaci贸n

Desarrollando un juego con HTML y JavaScript

16

Maquetaci贸n con HTML

17

Secci贸n de elegir mascota

18

驴D贸nde ubicar la etiqueta script? Conectando HTML con JavaScript

19

Escuchando eventos con JavaScript

20

addEventListener

21

Manipulaci贸n del DOM

22

Enemigos aleatorios

23

Ataques en JavaScript

24

Ataques aleatorios del enemigo

25

Imprimiendo ataques del enemigo

26

驴Ganaste, perdiste o empataste?

27

Tablas de verdad

28

Creando el contador de vidas

29

驴Qui茅n gan贸 el juego?

30

Reiniciando el juego

31

Ocultando elementos HTML con JS para mejorar la UX del juego

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Anatom铆a de CSS

33

Tipos de display

34

Flexbox

35

Modelo de caja

36

Im谩genes para los Mokepones

37

Estilos del bot贸n

38

Adaptando HTML al dise帽o del juego

39

Layout: t铆tulo y ataques

40

Adaptando JavaScript al dise帽o del juego

41

CSS Grid

42

Responsive Design

43

Detalles finales

Quiz: Estilos con CSS

Optimizaci贸n de c贸digo

44

Revisi贸n de c贸digo

45

Don't repeat yourself (DRY)

46

Clases y objetos

47

Clases y objetos de Mokepon

48

Arrays o arreglos

49

Objetos vs. arreglos

50

Ciclos: manipulando el DOM con iteradores

51

Declaraci贸n lenta de variables

52

Una sola fuente de la verdad

53

Mascotas aleatorias con arreglos

54

Ataques din谩micos por cada mascota: extraer

55

Renderizado din谩mico en HTML

56

Eventos de click din谩micos

57

Secuencia de ataques del enemigo

58

Iniciando el combate

59

Resolviendo el reto de condicionales

60

Optimizando el frontend del juego

Quiz: Optimizaci贸n de c贸digo

Mapa con canvas

61

Introducci贸n a canvas: dibujando con JavaScript

62

Moviendo a Capipepo hacia la derecha

63

Movimiento hacia todas las direcciones

64

Movimientos con el teclado

65

Im谩genes y personajes de fondo

66

M茅todos en las clases

67

Obst谩culos y colisiones

68

Combate entre mokepones colisionados

69

Mapa responsive

70

Botones bonitos y viewport

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

驴Qu茅 es backend?

72

Instalaci贸n de Node.js y NPM

73

Terminal de comandos y Node.js

74

Servidor web con Express.js

75

HTTP, localhost, servidores y puertos

76

Express.js y fetch: API REST con JavaScript

77

JSON y POST: mokepon online

78

Transmisi贸n de coordenadas

79

Mokepones din谩micos en el mapa

80

Optimizando el mapa del juego

81

Batalla entre jugadores

82

Consumiendo la API de ataques del enemigo

Quiz: Backend: videojuego multijugador

Pr贸ximos pasos

83

Probando el juego en varios dispositivos

84

驴Y ahora qu茅 curso tomar?

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Optimizando el frontend del juego

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.

Ejemplo punto de mejora de experiencia de usuario

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;
}
Mejora de experiencia de usuario en los botones

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

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?