Contenido del curso

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

Lógica de ganaste, perdiste o empataste en JS

Resumen

Programar la lógica de ganar, perder o empatar en JavaScript es el paso que convierte una mecánica de ataques aleatorios en un juego real. Aquí aprendes a reutilizar condicionales del clásico piedra, papel o tijera para resolver combates entre mascotas con fuego, agua y tierra, ideal si estás construyendo tu primer proyecto interactivo en la web.

La clave está en separar responsabilidades: una función decide el resultado, otra lo comunica al jugador. Ese pequeño cambio de arquitectura hace que tu código sea más limpio, más fácil de leer y mucho más fácil de extender cuando agregues vidas, niveles o nuevos ataques.

¿Cómo reutilizar la lógica de piedra, papel o tijera para fuego, agua y tierra?

La intuición aquí es poderosa: si ya resolviste antes un problema parecido, no lo reescribas, adáptalo. En clases anteriores existía un archivo codigo.js con la lógica de piedra, papel o tijera, donde los ataques se representaban con números (1, 2, 3) y un conjunto de condicionales decidía el resultado [4:30].

Esa misma estructura sirve para Mokepón. Solo tienes que traducir los números a los nuevos ataques:

  • 1 equivale a fuego.
  • 2 equivale a agua.
  • 3 equivale a tierra.

Las reglas del combate siguen el mismo patrón circular del clásico: el fuego le gana a la tierra, el agua le gana al fuego y la tierra le gana al agua. Si ambos ataques son iguales, hay empate. Si no es empate ni victoria, solo queda una opción: perdiste.

¿Qué significa reutilizar código? Es tomar una solución que ya escribiste para un problema parecido y adaptarla a un nuevo contexto. Ahorra tiempo y reduce errores porque partes de una lógica probada.

¿Dónde colocar la función combate dentro del archivo mokepon.js?

Una duda común al estructurar un juego es decidir en qué función vive cada responsabilidad. Tienes dos candidatas: crearMensaje o ataqueAleatorioEnemigo. Ninguna es la respuesta correcta.

Lo recomendable es crear una función nueva llamada combate que se encargue exclusivamente de decidir el resultado [7:10]. Así cada función hace una sola cosa:

  • ataqueAleatorioEnemigo genera el ataque del rival.
  • combate evalúa los condicionales y decide ganaste, perdiste o empate.
  • crearMensaje muestra el mensaje final al jugador.

Dentro de combate reemplazas las variables jugador y pc del código viejo por ataqueJugador y ataqueEnemigo, que son las que ya existen en Mokepón. También conviene eliminar el contador de triunfos porque más adelante usarás un sistema de vidas en lugar de victorias acumuladas.

¿Cómo pasar el resultado del combate a la función crearMensaje?

Aquí viene lo interesante. No quieres que crearMensaje siempre diga lo mismo. Quieres que el texto cambie según el resultado del combate. La solución es usar parámetros.

En lugar de concatenar la palabra pendiente dentro del mensaje, concatenas una variable llamada resultado. Esa variable no se crea dentro de crearMensaje, se recibe como parámetro desde fuera:

javascript function crearMensaje(resultado) { // usa la variable resultado dentro del mensaje }

Desde la función combate, cada alert que antes mostraba ganaste, perdiste o empate se reemplaza por una llamada a crearMensaje enviándole el texto correspondiente como argumento [13:20]:

javascript crearMensaje("GANASTE") crearMensaje("PERDISTE") crearMensaje("EMPATE")

¿Qué es un parámetro en JavaScript? Es una variable que una función recibe desde fuera al ser llamada. Permite que la misma función se comporte distinto según el dato que le envíes.

¿Por qué conviene separar combate de crearMensaje?

Porque cada función gana un propósito claro. combate decide la lógica, crearMensaje se encarga de la presentación. Si mañana cambias cómo se muestra el mensaje (un modal, una animación, un sonido), solo tocas crearMensaje sin romper la lógica del juego.

Esta práctica se conoce como separación de responsabilidades y es uno de los principios que más vas a usar cuando tu código crezca.

¿Cómo probar que la lógica de combate funciona en el navegador?

Después de recargar la página, cada clic sobre un botón de ataque debe mostrar tres cosas: el ataque del jugador, el ataque del enemigo y el resultado del combate. Algunos casos esperados:

  • Fuego contra fuego: empate.
  • Agua contra fuego: ganaste, porque el agua le gana al fuego.
  • Fuego contra agua: perdiste, porque el agua le gana al fuego.

La aleatoriedad del enemigo hace que necesites varios intentos para ver todos los escenarios. Es completamente normal jugar diez o quince veces antes de que aparezca cada combinación. Si todos los resultados se muestran correctamente, tu lógica está lista.

¿Qué habilidades técnicas estás practicando aquí?

  • Condicionales encadenados con if, else if y else, para evaluar múltiples combinaciones de ataques.
  • Reutilización de código, adaptando una solución previa a un nuevo dominio.
  • Refactorización, moviendo lógica a una función dedicada llamada combate.
  • Paso de argumentos a funciones, para que crearMensaje reciba el resultado dinámicamente.
  • Concatenación de variables en strings, en lugar de textos fijos.

Cuéntame en los comentarios cómo resolviste tú la lógica del combate y si tu solución fue distinta a la que se muestra aquí. Comparar enfoques es una de las mejores formas de aprender a programar.