Refactoring de funciones

Curso Gratis de Programación Básica

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

Si ya tienes una cuenta,

Recursos

Hay actividades rutinarias que realizamos siguiendo los mismos pasos una y otra vez. En programación esto se llaman funciones, y es momento de usarlas en nuestro ejercicio de piedra, papel o tijera.

Funciones en JavaScript

Piensa en tu mente como si fuera un programa de computadora. Cepillarte los dientes es una tarea de todos los días. Entonces ¿escribirías de nuevo el código para cepillar tus dientes todos los días?

Pues, no. Lo que harías es guardar los pasos en tu memoria (con una función), y luego invocarlos cada vez que tengas que cepillarte los dientes.

Lo mismo ocurre en la programación. Solo tienes que seguir la regla de oro: Si tienes que copiar el código y pegarlo en otro lado, entonces mejor conviértelo en una función. Así puedes invocarlo tantas veces necesites.

¿Cómo declarar funciones en JavaScript?

Hay varias formas de declarar una función. Pero la más básica de todas consiste en escribir la palabra reservada function, seguida de la función con sus parámetros entre paréntesis, y el bloque de código entre llaves { }.

Ejemplo:

function hacerAlgo( param1 , param2 ) {
    let resultado = param1 + param2;
    return resultado;
}

hacerAlgo( 3 , 4 ); //Devuelve 7

💡 Cuando ejecutas la función, esta ejecuta todo el código que insertaste dentro de las llaves { } cuando la declaraste. De este modo, puedes ejecutar la función tantas veces como necesites con solo declararla una vez.

💡 Cuando la declaras, puedes indicar parámetros y usarlos dentro del bloque de código. Luego, cuando la ejecutes, esos parámetros se sustituirán con los valores que escribas entre paréntesis al momento de ejecutarla.

💡 También puedes usar la palabra reservada return dentro del bloque de código de la función para que, al ejecutarla, recibas el valor que indiques luego de escribir return (ojo, cuando la función llega a un return, su ejecución se detiene. Los comandos que escribas después de un return no se van a ejecutar).

💡 Ojo, todas las funciones deben empezar por una letra. No pueden iniciar con un número o un símbolo, siempre deben empezar por una letra (y la práctica común es que sea una letra minúscula en el caso de variables y funciones).

¿Cómo usar funciones en JavaScript?

Las funciones, al momento de ejecutarlas, tienen una estructura similar: Un nombre, seguido por sus parámetros entre paréntesis.

💡 Ojo, si la función no usa parámetros, igual necesitas escribir los paréntesis para que tu computadora entienda que tiene que ejecutar la función. Por ejemplo: alert().

función( parámetro1 , parámetro2 )

Luego tienes dos casos de uso:

Si la función tiene el trabajo de ejecutar procesos en tu programa (ej: alert()), entonces puedes ejecutarla por si sola en una línea de código (como ves en el ejemplo de arriba).
Si la función, en cambio, tiene el trabajo de usar los parámetros para calcular algo más y devolver un valor con un return, entonces suele usarse para asignar valores a otra variable.

Por ejemplo:

ganador = mejorEntre( opcion1 , opcion2 );

Ejemplo de función en JavaScript {height="" width=""}

¿Dónde escribo las funciones?

Es una buena práctica escribir las funciones al inicio del código. Los navegadores suelen ser permisivos cuando creas sitios web, pero la mayoría de los lenguajes de programación son estrictos sobre este punto.

En general, declara tus funciones antes de usarlas 👍

Aplicando funciones al programa de piedra, papel o tijera

Es hora de mejorar la calidad del código usando funciones.

Empecemos por optimizar las alertas que indican la elección del jugador y del computador:

Optimizando las alertas

Si te fijas bien, el algoritmo que nos informa nuestra elección y la del computador son muy parecidos, y podemos reemplazarlo con una función:

//INFORMANDO LA ELECCIÓN DEL JUGADOR
if ( eleccionDelJugador == 1 ) {
    alert( "Elegiste 🥌" );
} else if ( eleccionDelJugador == 2 ) {
    alert( "Elegiste 📄" )
} else if ( eleccionDelJugador == 3 ) {
    alert( "Elegiste ✂️" )
} else {
    alert( "Elegiste otra cosa, así no puedes jugar 😣" )
}

//INFORMANDO LA ELECCION DEL COMPUTADOR
if ( eleccionDelComputador == 1 ) {
    alert( "La computadora eligió 🥌" );
} else if ( eleccionDelComputador == 2 ) {
    alert( "La computadora eligió 📄" )
} else if ( eleccionDelComputador == 3 ) {
    alert( "La computadora eligió ✂️" )
} else {
    alert( "Cometí un error programando la elección del computador 🙃" )
}

Intenta hacerlo por tu cuenta, luego puedes compararla con la posible solución de abajo.

💡 Ojo, esta igual necesita que la encajes bien con tu código para que el programa siga funcionando. Así que no temas experimentar y hacer ajustes poco a poco para que funcione el juego. Al final te mostraré un ejemplo con el código completo usando funciones 😉

//FUNCIÓN PARA LAS ALERTAS
function alertaDeElecciones( quienElije , eleccion ) {
    if ( eleccion == 1 ) {
        alert( "El " + quienElije + " eligió 🥌" );
    } else if ( eleccion == 2 ) {
        alert( "El " + quienElije + " eligió 📄" )
    } else if ( eleccion == 3 ) {
        alert( "El " + quienElije + " eligió ✂️" )
    } else {
        alert( "Hubo un error con la elección del " + quienElije + " 🙃" )
    }
}

Decidiendo el ganador con una función

En estos momentos puede que no veas la necesidad de convertir esto en una función. Pero piensa por un momento que quieres convertir este juego en algo serio, que en el futuro podrías implementar un modo para dos jugadores, o una versión en línea.

En ese sentido, te conviene convertir la decisión del ganador en una función que puedas ejecutar para cualquiera de los modos de juego que implementes.

💡 Si no es por eso, al menos hazlo a modo de práctica 😅 Intenta hacerlo por tu cuenta, luego compara con la solución de abajo 👍

//FUNCIÓN PARA DECIDIR EL GANADOR
function quienGanaEntre ( eleccionJugador , eleccionOponente ) {
    if ( eleccionJugador == eleccionOponente ) {
        alert( "¡EMPATE! 🤼" );
    } else if ( eleccionJugador == 1 && eleccionOponente == 3 ) {
        alert( "¡GANASTE! 🥳" );
    } else if ( eleccionJugador == 2 && eleccionOponente == 1 ) {
        alert( "¡GANASTE! 🥳" );
    } else if ( eleccionJugador == 3 && eleccionOponente == 2 ) {
        alert( "¡GANASTE! 🥳" );
    } else {
        alert( "PERDISTE... 😢" );
    }
}

Juego de piedra, papel o tijeras con funciones

Recuerda que, por lo general, hay varias soluciones al mismo problema. Lo que ves abajo es solo una forma de crear este pequeño videojuego.

No te preocupes si tu código aún no se ve así. Lo más importante es que lo intentes por ti mismo y llegues al resultado. Luego el tiempo y la experiencia te ayudarán a escribir código más presentable, o más optimizado 👍

//FUNCIÓN PARA LAS ALERTAS
function alertaDeElecciones( quienElije , eleccion ) {
    if ( eleccion == 1 ) {
        alert( "El " + quienElije + " eligió 🥌" );
    } else if ( eleccion == 2 ) {
        alert( "El " + quienElije + " eligió 📄" );
    } else if ( eleccion == 3 ) {
        alert( "El " + quienElije + " eligió ✂️" );
    } else {
        alert( "Hubo un error con la elección del " + quienElije + " 🙃" );
    }
}

//FUNCIÓN PARA GENERAR NÚMEROS ALEATORIOS
function numeroAleatorio( min , max ) {
    return Math.floor( Math.random() * ( max - min + 1 ) + min );
}

//FUNCIÓN PARA DECIDIR EL GANADOR
function quienGanaEntre ( eleccionJugador , eleccionOponente ) {
    if ( eleccionJugador == eleccionOponente ) {
        alert( "¡EMPATE! 🤼" );
    } else if ( eleccionJugador == 1 && eleccionOponente == 3 ) {
        alert( "¡GANASTE! 🥳" );
    } else if ( eleccionJugador == 2 && eleccionOponente == 1 ) {
        alert( "¡GANASTE! 🥳" );
    } else if ( eleccionJugador == 3 && eleccionOponente == 2 ) {
        alert( "¡GANASTE! 🥳" );
    } else {
        alert( "PERDISTE... 😢" );
    }
}

//ELECCIÓN DEL JUGADOR
let eleccionDelJugador = 0;
eleccionDelJugador = prompt( "Elige: 1 para 🥌, 2 para 📄, 3 para ✂️" );
alertaDeElecciones( "jugador" , eleccionDelJugador );

//ELECCIÓN DEL COMPUTADOR
let eleccionDelComputador = numeroAleatorio( 1 , 3 );
alertaDeElecciones( "computador" , eleccionDelComputador );

//DECIDIENDO EL GANADOR
quienGanaEntre ( eleccionDelJugador , eleccionDelComputador );

Contribución creada por: Jhonkar Sufia (Platzi Contributor).

Aportes 470

Preguntas 282

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Esmeralda Gutiérrez Ramírez