Fundamentos de Programaci贸n

1

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

2

驴C贸mo aprender programaci贸n?

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

脷ltima oportunidad para asegurar tu aprendizaje por 1 a帽o a precio especial

Antes: $249

Currency
$189/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

0D
3H
58M
22S

Refactor del c贸digo usando funciones

11/84
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 382

Preguntas 270

Ordenar por:

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

o inicia sesi贸n.

Si tienes que copiar y pegar el mismo c贸digo eso merece ser una funci贸n

MIS APUNTES CON MUCHO 馃挌 FOR ALL OF YOU

  • 驴Copiar y pegar el mismo c贸digo? tranqui, eso es una funci贸n.
  • 驴Qu茅 es una funci贸n? veni, veni, veni. Te cuento, las funciones son pedacitos de c贸digo que mientras lo escribas para un prop贸sito general, puedes reusarlos muchas veces.
  • La palabra function debe ir en min煤scula.
  • Las funciones tienen par谩metros.
  • Los par茅ntesis est谩n ah铆 para declarar una funci贸n, o para ejecutarla.
  • Te贸ricamente, primero declaras las funciones que vas a usar en tu programa, y luego las usas.

Buena tardes, Quiero compartir mi c贸digo, estoy muy contenta con el curso, nunca hab铆a estudiado nada al respecto, mi profesi贸n no tiene nada que ver con la programaci贸n. Gracias por la excelente forma de ense帽ar 馃槂

Lo que menciona Freddy aqu铆

(y estoy casi seguro que se mencionar谩 m谩s adelante se llama Hoisting) y en efecto es algo extremadamente particular en JS

Clase del primer curso de programaci贸n Por si la quieren ver 馃憤 馃憤 馃憤 Freddy ha crecido mucho https://www.youtube.com/watch?v=C7NLf7K7hLA&ab_channel=Platzi

No puedo creer que con tan pocas clases este entendiendo javascript. Esta BRUTAL.

Me ha costado entenderlo, pero s茅 que es cuesti贸n de seguir aprendiendo y practicando 馃挌

{ } llaves
[ ] corchetes
( ) par茅ntesis

por lo menos as铆 los conozco yo.

esto es lo que program茅 que dijera 馃槂

Para recordar:

Si tienes que copiar y pegar el mismo c贸digo muchas veces, entonces deber铆a ser una funci贸n

Hoisting, buena explicaci贸n aqu铆 La cocina del c贸digo, muy buen canal鈥

Yo: no entendi un pomo
Freddy: subamosle el nivel
Otra vez yo : 馃槖馃槩

recomiendo ir programando mientras Freddy lo hace

Funciones o tambi茅n llamados M茅todos, son b谩sicamente fragmentos de c贸digo o rutinas que puedes reutilizar una y otra vez, y las veces que quieras, sin tener que copiar y pegar el mismo c贸digo cada vez que lo vayas a usar.
.
Si tienes que copiar y pegar el mismo c贸digo en al menos dos lugares, es un indicio de que debes usar una funci贸n.
.
Por ahora no se tienen que preocupar de esto pero tengan en cuenta que una Clase esta compuesta por un conjunto de varias funciones y variables. 馃憤

Hola, me encanta la forma en la que explicas sin embargo como sugerencia, me parece que este video es muy importante y se hace muy r谩pido teniendo en cuenta que somos novatos jeje.

Pasar de una linea de c贸digo 鈥渙bvia鈥 a convertirlo a una FUNCI脫N, merece hacerse un poco mas explicado鈥 siguiendo tus pasos obvio lo logro, pero el d铆a de ma帽ana que me toque hacer una funci贸n a mi solito, no creo poder porque no entend铆, solo segu铆 tus pasos (No se si sea al 煤nico que le paso eso jeje)

LES DEJO UN POCO DE DEFINICI脫N DE CONCEPTOS:

Al definir una funci贸n, lo que va entre los par茅ntesis se llaman PAR脕METROS, y son los valores que la funci贸n espera recibir para poder funcionar adecuadamente. Una funci贸n puede o no tener par谩metros, tal c贸mo lo menciona Freddy.

Cuando invocamos la funci贸n, esos valores que le enviamos se llaman ARGUMENTOS, y son los valores que le pasamos a la funci贸n en sus par谩metros para que pueda funcionar adecuadamente.

Scope, as铆 se le llama el alcance de la variable dentro de un bloque de c贸digo.
Existen las globales y las locales
Globales: Ejemplo un universo: Las variables son accesibles a cualquier parte del c贸digo.
Locales: Ejemplo planetas: Un mundo distinto, las variables son accesibles en ese mundo, no es visible para los dem谩s mundos.
Resumen: Lo que es global, se puede acceder a cualquier parte del c贸digo, y lo puede acceder el scope local. Lo que es local ,s贸lo hacen vida all铆.
Para que lo entiendan mejor, en el curso B谩sico de JavaScript hay una clase para ello aqu铆
y tambi茅n un buen v铆deo en YouTube la cocina del c贸digo

FUNCIONES:
Grupos de acciones que se repiten varias veces. En programaci贸n, son pedacitos de c贸digo que se escriben con el prop贸sito general de reusarlos varias veces.

  • Cuando la funci贸n lleva la palabra function se est谩: DECLARANDO (Creando)

  • Cuando la funci贸n No lleva la palabra funci贸n se esta: INVOCANDO (Ejecutando)

Voy a llorar porque recien entendi Hoisting :鈥))) gracias a todos por los aportes

Ejemplo del programa que explica Freddy

Hola, cre茅 un programa con el ejemplo animado que explica el profesor en el 1:29 馃槃 sobre todo lo hice para darme claridad con el uso de return ya que me cost贸 entenderlo. Espero que pueda ayudar a alguien. Recuerden que return sirve para guardar el proceso que ocurre en la funci贸n y ejecutarlo en otro lado, como lo hago al final del c贸digo para que muestre una oraci贸n con los dos argumentos 馃榿

<html>
    <head>
	    <meta charset="utf-8" />
	    <title>Elecci贸n de comida</title>
	    <script>
            function traer(comida, lugar) {
                let decision = "El alimento deseado es: " + comida + ". El lugar para recogerlo es: " + lugar
                return decision
            }

            let alimento = prompt("Seleccione el alimento que desea tener")
            let origen = prompt("Seleccione el lugar para recoger su alimento")

            alert(traer(alimento, origen))
	    </script>
    </head>
    <body>
    </body>
</html>

Honestamente, as铆 ten铆a organizado mi c贸digo porque pens茅 que se ve铆a m谩s est茅tico (lol) ya lo cambi茅 a como debe ser

Notas de la clase:

T茅rminos relacionados con funciones en programaci贸n:

  • Declarar o Definir: describir en l贸gica de programaci贸n que es lo que va a hacer la funci贸n.

  • Invocar o llamar: mandar a llamar la funci贸n para usarla.

  • variable tipo funci贸n: una variable es un espacio en memoria reservado para algo en particular.

  • Par谩metros: Son valores predeterminados que tomar谩 dicha funci贸n para trabajar.

  • corchetes o llaves: definen el bloque de c贸digo.

  • Bloque de c贸digo: espacio de ejecuci贸n de unas instrucciones previamente definidas.

  • Tipos de variables an贸nimas (sin nombre), por expresi贸n, autoejecutables. Si quieren leer m谩s al respecto: M谩s sobre funciones en Javascript

  • Notaci贸n Formas de notaci贸n o llamar una variable

aprend铆 por la malas que no se usan los acentos

Luego de horas buscando por que no me funcionaba el c贸digo y revisando desde github, el v铆deo y el c贸digo que est谩 en la parte inferior de temario no lo encontraba, solo pude verlo gracias a los colores de mi tema, me di cuenta que no ten铆a bien escrito la function, me faltaba la c, estuve horas leyendo y buscando jajaja. por si a alguien le ocurre, los colores ayudan

Los corchetes, llaves, 鈥渃omo le squieran llamar鈥 贸 鈥渆stos bichitos de ac谩鈥 馃し鈥嶁檧锔 {}. aparecen dependiendo de la distribuci贸n de teclado y la configuraci贸n del Sistema operativo. En Windows 10 pueden ir a la Configuraci贸n (Win + i) > Hora e idioma > lenguajes preferidos Ah铆 hay una opci贸n con el idioma y teclado, al dar click aparece 鈥渙pciones鈥 y desde all铆 pueden configurar el teclado鈥

Ahora, siempre que se instala Windows se puede indicar el pa铆s pero NO SE CONFIGURA LA DISTRIBUCI脫N DEL TECLADO que tengamos, y en cualquier pa铆s de LATAM aparecer谩 la distribuci贸n Latinoam茅rica, pero el teclado puede tener la distribuci贸n de Espa帽a.

Generalmente la distribuciones se identifica porque:

  • Espa帽a: la arroba est谩 en el 2 (muchos teclados de computador de escritorio)
  • Latinoamerica: la arroba est谩 en la Q (portatiles y teclados de marca como Microsoft)

*La arroba sale presionando la tecla ALT o ALT GR a la derecha de la barra espaciadora y el 2 o la Q

As铆 que dependiendo del teclado de cada uno, en la config de Windows se puede cambiar a la distribuci贸n correcta

Los nombres de las funciones SIEMPRE empiezan por una letra, es una buena pr谩ctica que EMPIECE EN MIN脷SCULA

errores errores este video lo vi mil veces y no me salia y habia llamado mal a una funcion no se den por vencidos

As铆 me qued贸 con las funciones

<HTMl:5>
<head>
    <meta charset="utf-8" />
    <title>Rock Paper Sissors</title>
    <script>
        // Funci贸n para generar numeros aleatorios entre un rango asignado
        function generarEnterosAleatorios(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
 
        // Funci贸n para interpretar elegir un numero
        function numeroElegido(seleccionJugador) {
            let eleccion = ""
            if(seleccionJugador == 1) {  
                return eleccion = "piedra"
            } else if(seleccionJugador == 2) {  
                return eleccion = "papel"
            } else if(seleccionJugador == 3) {  
                return eleccion = "tijera"
            } else {
                return eleccion = "No elegiste una opci贸n v谩lida"
            } 
        }

        // La computadora elige aleatoreamente un n煤mero entre 1 y 3
        let eleccionpc = generarEnterosAleatorios(1,3)
       
        //El jugador elige: 1 es piedra, 2 es papel, 3 es tijera
        let eleccionjugador = 0
        eleccionjugador = prompt("Elige 1 para piedra, 2 para papel, 3 para tijera")
       
        //variable resultado
        let resultado = 0

        //Cuando el jugador gana
        if((numeroElegido(eleccionjugador) == "piedra" && numeroElegido(eleccionpc) == "tijera")
        || (numeroElegido(eleccionjugador) == "papel" && numeroElegido(eleccionpc) == "piedra") 
        || (numeroElegido(eleccionjugador) == "tijera" && numeroElegido(eleccionpc) == "papel")) {  
            resultado = "GANASTE"                 
        //Cuando el jugador empata
        } else if(eleccionjugador == eleccionpc) {
            resultado = "EMPATARON"  
        //Cuando el jugador pierde
        } else {
            resultado = "PERDISTE"  
        }        
        
        //Imprimir resultado
            alert("Elegiste " + numeroElegido(eleccionjugador) + "\n\nLa computadora eligi贸 " + numeroElegido(eleccionpc) + "\n\nResultado: " + resultado)         
    </script>
</head>
<body>
<h1>PIEDRA PAPEL O TIJERA</h1>
<p>Este es nuestro primer programa complto y profesional</p>
<p>Gran programa</p>
</body>
</HTMl:5>

S煤per contenta con las clases. Aqu铆 mi aporte. Yo utilice arrow function, estas son funciones de tipo flecha que nos permiten crear funciones de una manera m谩s limpia en comparaci贸n con las funciones regulares. Igual es algo que seguramente veremos m谩s adelante. A darle!!

No fui capaz de recortar mas el c贸digo 馃槖

Les adelanto lo que quiz谩 sea un Spoiler, pero puede les sirva si tuvieron algun inconveniente.
La funci贸n que retorna la jugada aleatoria de la PC es un numero, mientras la nuestra (prompt) es un String.

Programar = Equivocarse
Equivocarse = Aprender

Truco para formatear codigo en Visual Studio Code


  1. Selecciona el texto
  2. Con el men煤 contextual (bot贸n derecho del rat贸n sobre el texto seleccionado) escoger sobre el men煤 la opci贸n 鈥渇ormat selection鈥

  1. Selecciona el texto
  2. utilizar el m茅todo abreviado: CTRL+K CTRL+F

alguien en 2023

No es el mejor algoritmo pero estoy feliz porque lo logr茅 con pocos intentos, espero les sirva 鉂わ笍

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Juego</title>
    <script>
        // piedra = 1, papel = 2. tiejara = 3
        let resultado = 0
        const opcion1 = "piedra" 
        const opcion2 = "papel"
        const opcion3 = "tijera"
        const max = 3
        const min = 1

        const jugador = prompt("Elige: 1 para piedra, 2 para papel y 3 para tijera")
        const pc = Math.floor(Math.random() * (max - min + 1) + min)
        
        function decision(jugador, pc){
            if (jugador == pc){
                resultado = alert("Empate")
            }
            else if(jugador == 1 && pc == 2){
                resultado = alert("Elegiste " + opcion1 + " pc elige " + opcion2 + "\n" + "隆PERDISTE!")
            }
            else if(jugador == 2 && pc == 3){
                resultado = alert("Elegiste " + opcion2 + "pc elige " + opcion3 + "\n" + "隆PERDISTE!")
            }
            else if(jugador == 3 && pc == 1){
                resultado = alert("Elegiste " + opcion3 + "pc elige " + opcion1 + "\n" + "隆PERDISTE!")
            }
            else if(jugador == 2 && pc == 1){
                resultado = alert("Elegiste " + opcion2 + "pc elige " + opcion1 + "\n" + "隆GANASTE!")
            }
            else if(jugador == 3 && pc == 2){
                resultado = alert("Elegiste " + opcion3 + "pc elige " + opcion2 + "\n" + "隆GANASTE!")
            }
            else if(jugador == 1 && pc == 3){
                resultado = alert("Elegiste " + opcion1 + "pc elige " + opcion3 + "\n" + "隆GANASTE!")
            }
            else alert("Elecci贸n incorrecta :(")
            return jugador
        }

        decision(jugador, pc)

    </script>
</head>
<body>
    <h1>Mi primer juego</h1>
</body>
</html>

Cuando Freddy dijo: Es como cuando a un pintor se le va una pincelada y dice 鈥淓sto ser谩 un lindo arbolito鈥 autom谩ticamente pens茅 en esto"

acabo de notar que si eligo una opci贸n 鈥渞ebelde鈥 no importa cuantas veces lo haga la pc siempre gana 馃槷

Les comparto el codigo de mi practica del juego con funciones:
<!DOCTYPE html>
<html>
<head>
<meta charset=鈥渦tf-8鈥 />
<title>Piedra, papel o tijera Version 2</title>
<script>
function aleatorio(min,max){
return Math.floor(Math.random()*(max-min+1)+min)
}
function opcion(op){
if(op == 1){
return 鈥減iedra鈥
}
else if(op == 2){
return 鈥減apel鈥
}
else if(op == 3){
return 鈥渢ijera鈥
}
else {
return 鈥減erder鈥
}

    }
    // 1 es piedra 2 es papel, 3 es tijera
	let jugador = 0, pc = 0
    let numVictorias=0, numEmpates=0, numDerrotas=0
    let mensaje = ""
    for (let i=1; i<=5; i++){
        pc=aleatorio(1,3)
        jugador = prompt("Elige: 1 para piedra, 2 para papel, 3 para tijera ")

        mensaje=opcion(jugador)
        alert("Jugador eligio "+mensaje)  
        mensaje=opcion(pc)
        alert("La PC eligio "+mensaje)                      
    // COMBATE
        if(jugador == pc){
            alert("EMPATE")
            numEmpates++
        }
        else if(jugador == 1 && pc == 3){
            alert("GANASTES")
            numVictorias++
        }  
        else if(jugador == 2 && pc == 1){
            alert("GANASTES")
            numVictorias++
        } 
        else if(jugador == 3 && pc == 2){
            alert("GANASTES")
            numVictorias++
        }
        else {
            alert("PERDISTES")
            numDerrotas++
        }
    }  
    alert("Ganastes: "+numVictorias+" veces\nEmpatastes: "+numEmpates+" veces\nPerdistes: "+numDerrotas+" veces") 

</script>

</head>
<body>
<h1>Juego de Piedra papel o tijera Version con funciones</h1>
</body>
</html>

Gracias por la clase, muy bien explicado,

Realmente no entiendes lo que explica de la frustraci贸n por alg煤n elemento faltante hasta que lo vives en carne propia, nunca hab铆a querido y odiado tanto a un signo = hasta que realice el c贸digo de esta clase jajajajaja

Estoy muy contento de entender poco a poco Javascript, conozco lo b谩sico de HTML y CSS pero no me atrev铆a a dar el paso a un lenguaje de programaci贸n.
隆Vamo a darle! 馃挭

Aqui mi aporte. Mismo juego, pero con una **tem谩tica **distinta.

Va mi aporte! Us茅 la misma funci贸n para mostrar el resultado al final馃槂

Asi se ve:

Hola, quiero compartir lo que se aprendio en clase, funciona super bien.

<!DOCTYPE html>
<html>
<head>
<meta charset=鈥渦tf-8鈥 />
<title>Piedra, Papel o Tijera</title>
<script>
function aleatorio (min, max) {
return Math.floor(Math.random () * (max - min + 1) + min)
}
function eleccion(jugada) {
let resultado = ""
if(jugada == 1) {
resultado = 鈥淧iedra 鉁娾
} else if (jugada == 2) {
resultado = 鈥淧apel 鉁嬧
} else if (jugada == 3) {
resultado = 鈥淭ijeras 鉁屸
} else{
resultado = 鈥滒煒扢al elegido 馃し鈥嶁檧锔忊
}
return resultado

        }
        // 1 es piedra, 2 es papel, 3 es tijera
        let jugador = 0
        let min = 1
        let max = 3  
        let pc= aleatorio(1,3)
        jugador = prompt("Elige: 1 para piedra, 2 para papel, 3 para tijera")
        //alert("Elegiste " + jugador)
       alert("Pc elige: " + eleccion(pc))
       alert("Tu eliges: " + eleccion(jugador))
        // COMBATE
        if(pc == jugador){
            alert("馃槻EMPATE馃槼")
        } else if(jugador == 1 && pc == 3) {
            alert("馃帄GANASTE馃嵒")
        } else if(jugador == 2 && pc == 1) {
            alert("馃帠GANASTE馃")
        }else if(jugador == 3 && pc == 2) {
            alert("馃嵃GANASTE馃嵕")
        
        }else {
            alert("馃挃PERDISTE馃挃")
        }

    </script>
<body> 
    <h1>Piedra, Papel o Tijera</h1>

</body>
</head>

</html>

馃 REUTILIZACI脫N DEL C脫DIGO!!!

Siempre que veas c贸digo que al parecer sede usarse varias veces, intenta no repetirlo.
Las funciones pueden ayudarte con esto.
Si quieres mostrar el mismo mensaje varias veces en tu c贸digo, no lo repitas, solo encierra este c贸digo en una funci贸n y ejecuta esa funci贸n cuantas veces quieras.

mi codigo anterior tambien usa un loop para jugar 5 veces y enttega el resulem de los resultados de los juegos, espero lo revisen y comenten

Hice una funci贸n m谩s para el combate, es parecida a la de las alertas

Esta es mi funci贸n que implementa la l贸gica del juego

function juego(pc, human) {
            let resultado = "PERDISTE";
            if (human == pc) resultado = "EMPATE";
            if (human == 1 && pc == 3) resultado = "GANASTE";
            if (human == 2 && pc == 1) resultado = "GANASTE";
            if (human == 3 && pc == 2) resultado = "GANASTE";
            return resultado;
        }

Dato curioso, la variable pc es un INT y la variable jugador es un STRING

Cr茅eme que aqu铆 vamos! 馃Щ

Remember

Si tienes que copiar y pegar el mismo c贸digo muchas veces, entonces deber铆a ser una funci贸n

PRO TIP para tener siempre bien formateado el c贸digo:
Activar en preferencias del VSCode la opci贸n Format on save:
De esa manera, cada que guardemos nuestro archivo lo formatear谩 autom谩ticamente, corrigiendo cosas como el indentado, espacios innecesarios o faltantes, comillas, par茅ntesis, y un largo etc茅tera.

Espero sea 煤til, saludos! 馃槃

隆RECUERDEN! Mantener el mismo nombre de sus variables, y si van a cambiarla, les recomiendo seleccionar la variable que cambiaran y utilizar el comando CTRL+D, que les permite seleccionar a misma variable la veces que se encuentre repetida.

(el comando de CTRL+D lo aprendi en un comentario que hicieron, lean los comentarios, entre todos, construimos el edificio del conocimiento)

hay tres tipos de funciones.
Funciones que no retornan nada por ejemplo alert(鈥渟oy una funci贸n pero no retorno nada鈥) es curioso la funci贸n alert no solo funcione con cadenas de texto o string tambi茅n funciona con n煤meros enteros (8), booleanos(2.342).

Vamos con el segundo tipo y es tipo de funci贸n que no tiene par谩metros Math.random() y lo que en realidad estoy haciendo ah铆 es invocarla para que se ejecute de inmediato de igual forma pasa con la funci贸n alert(123134).

Y por ultimo est谩 la que retorna algo y aqu铆 si la declaro para luego invocarla para poder crear una funci贸n debo de escribir la palabra sagrada function ojo si la f va en mayuscula no va funcionar luego le paso el nombre a mi funci贸n puede ser cualquier nombre pero nunca debe de empezar con un signo especial como 驴*"! y con un numero 637543 siempre debe de empezar con una legra esto respeta las reglas para declarar variables este nombre que le paso a mi funci贸n es una variable pero, pero de tipo funci贸n luego abro par茅ntesis y dentro va algo que se llama par谩metros y escribo mis variables si son muchas separadas por una coma (,) y luego cierro el par茅ntesis despu茅s dejo un espacio y abro llaves ({) y cierro(}) dentro de las llaves voy a escribir todo el c贸digo que quiero que me retorne con la palabra sagrada return.

https://youtu.be/e3EyqGnb6XM
si aun te cuesta entender las funciones te recomiendo este video y nunca pares de aprender

encontr茅 2 extensiones para VS code que son muy 煤tiles.
. La primera es ident-rainbow : Te ayudara a ver el orden de la identaci贸n , que es de lo que habla Freddy sobre mantener cada bloque de c贸digo alineado a un margen.

. La segunda es Error Lens : Nos va a mostrar instant谩neamente alg煤n error que cometamos escribiendo una l铆nea de c贸digo; La l铆nea va a quedar resaltada en rojo, alert谩ndonos de que hay un error.

quiz谩s han le铆do un c贸digo que postee errado en una de las anteriores clases. Bueno encontr茅 una forma mas simple y funcional de hacer el combate. y funciona.

 if (pc==jugador){
            alert("EMPATE")
           }else if(Math.abs(pc-jugador)==1 && pc<jugador){
            alert("HAS GANADO")
           } else if (Math.abs(pc-jugador)==2 && pc>jugador){
            alert("HAS GANADO")
           }else {
            alert("HAS PERDIDO")
           }
tengo una duda en la funcion eleccion(jugada){let resultado = " " if(jugada == 1) {resultado = "piedra".. como sabe la funcion que jugada es el numero que va a elegir el jugador? si en ningun lugar se especifico. quien puda ayudarme

Un compa帽ero y yo hicimos esta calculadora que:
suma
resta
multiplica
divide
saca porcentajes

con lo aprendido en las doble condici贸n; if y else

CALCULADORA

<html>
<head>

<script>

// 1. sumar, 2. restar, 3. multiplicar, 4. dividir, 5. porcentaje
let usuario = 0
usuario = prompt (" Elige: 1. sumar, 2. restar, 3. multiplicar, 4. dividir, 5. porcentaje")
valor1 = parseInt(prompt ("introduce el primer valor "))
valor2 = prompt ("introduce el segundo valor si no es porcentaje ")
let resultado

// alert (" elegiste " + usuario)

if (usuario == 1) {
resultado = (valor1 + parseInt(valor2))
} else if (usuario == 2) {
resultado = (valor1 - parseInt(valor2))
} else if (usuario == 3) {
resultado = (valor1 * parseInt(valor2))
} else if (usuario == 4) {
resultado = (valor1 / parseInt(valor2))
} else if (usuario == 5) {
resultado = (valor1 / 100)
}
alert (resultado)

</script>

</head>

<body>

</body>

</html>

siiiiiiuuuuuuuuuuuuuuuu

Las llaves pueden llamar en ingles 鈥渕ustache鈥 que es 鈥渂igote鈥 en espaniol 銆帮笍 lo que lo hace divertido. En ingles el termino normal pero menos divertido es 鈥渃urly brackets鈥 o 鈥渂races鈥.

DEJO MI C脫DIGO POR SI NO LES CORRE, TUVE QUE ORDENAR TODO DE UNA FORMA METICULOSA PARA QUE CORRIERA

<!DOCTYPE html>
<head>
<meta charset=鈥渦tf-8鈥/>
<title> PIEDRA, PAPEL O TIJERA</title>

<script>

function aleatorio(min,max)
{return Math.floor(Math.random()*(max-min+1)+min)}

function eleccion(jugada)
{ let resultado = "HOLA"
if (jugada == 1) { resultado = 鈥淧IEDRA鈥潁
else if (jugada == 2) { resultado = 鈥淧APEL鈥 }
else if (jugada == 3) { resultado = 鈥淭IJERA鈥潁
else {resultado = 鈥淣ULO鈥潁
return resultado
}

let jugador = 0

jugador= prompt("ELIGE UN NUMERO DE 1 A 3")
alert("TU ELIGES:---- " + eleccion(jugador))

let pc = aleatorio(1,3)
alert("PC ELIGE: " + eleccion(pc))

//COMBATE

if (pc == jugador) {alert(鈥淓MPATE鈥)}
else if (jugador == 1 && pc == 3) {alert(鈥淕ANASTE鈥)}
else if (jugador ==2 && pc == 1) {alert(鈥淕ANASTE鈥)}
else if (jugador ==3 && pc == 2) {alert(鈥淕ANASTE鈥)}
else {alert(鈥淧IERDES鈥)}

</script>
</head>
<body>
<h1>PIEDRA, PAPEL O TIJERA</h1>
</body>
</html>

Este es el c贸digo que hice e intent茅 refactorizar. En el combate, utilic茅 un m茅todo que mencionaron en clases pasadas, seg煤n los comentarios, usando [inserte m煤sica tenebrosa] 隆脕LGEBRA, pero sencilla! 馃槈
.

Lo que se intenta hacer es crear una matriz donde se resten las posiciones del Jugador y PC (en mi caso lo hice PC - jugador, 驴por qu茅? 隆Porque s铆, jeje!). Obtendr谩s los n煤meros que indican si es un empate, si gana el jugador o si pierde.
.
Recuerda, el 谩lgebra es tu amigo, no tu enemigo. 馃き
.
Acepto retroalimentaci贸n para optimizar y hacer m谩s eficiente el c贸digo. 隆Gracias! 馃構
.

Tuve un error al corregir el final del c贸digo, resulta que el navegador no mostraba mi elecci贸n ni la del PC en el alert, raz贸n? me olvid茅 de borrar el doble igual ( == ) de la variable resultado en lugar de dejar solo uno, lo que hizo que se compararan en lugar de asignarle el texto XD

Me tard茅 un buen rato en detectar este simple error jajaja

Cosas importantes:
Las funciones son pedacitos de c贸digo que mientras los escribamos de una manera de prop贸sito general podemos reusarlos muchas veces
Una regla muy Importante es que nunca debes estar copiando el mismo c贸digo; eso merece ser una funci贸n para ser invocada cuando la necesites
La funci贸n te permite traer cosas de lugares
Las funciones son verbos (acciones)鈥 traer鈥
Y estas deben temer par谩metros, es decir (Que deben hacer)
Las funciones son nombres de variables
Es una buena pr谩ctica que comiencen por una letra y que esta sea en min煤scula
Y los par谩metros siempre van entre par茅ntesis
El resultado de esa funci贸n es lo que vamos a colocar en una variable (o sea, el que)
Y a esto de doy un RETURN (que es lo que espero que me devuelva)
Se considera una buena pr谩ctica:
Primero declaro las funciones que voy a usar en mi programa
Y luego las uso
Antes de usar una funci贸n, primero la debo definir, declarar (que es b谩sicamente escribirla)
Por eso la escribimos debajo de donde esta nuestra funci贸n aleatoria

La palabra function debe ir en min煤scula.
Luego va un espacio
Lo que hacemos, es que aqu铆 debajo de la funci贸n aleatorio vamos a crear una nueva funci贸n y esa nueva funci贸n la vamos a llamar elecci贸n y lo que le pedimos por par谩metro es el tipo de jugada que hice, de esa manera s茅 qu茅 voy a elegir una vez m谩s abrimos llaves
function elecci贸n (jugada){
}
Programar es manejar la frustraci贸n del error perdido
Y lo que voy hacer es cargar ac谩 mi elecci贸n, es decir voy a copiar y lo voy a ajustar un poquito y lo ajusto con TAB.
Lo que queremos hacer es que esta funci贸n me RETORNE EL RESULTADO.
Entonces, lo que voy hacer es Dentro de la funci贸n voy a crear una variable que se llame resultado y le voy a crear un stream vac铆o
Let resultado = 鈥 鈥
Reemplazo jugador por jugada y en vez de alert disparo un resultado = abro comillas y quito par茅ntesis en todos los renglones, al 煤ltimo le agregamos opci贸n invalida
Resultado = 鈥減iedra鈥
Resultado = 鈥減apel鈥
Resultado = 鈥渢ijera鈥
Resultado = 鈥淥PCI脫N INVALIDA鈥

Ahora tengo que retornar el valor
驴Y que es lo que retorno? Pues la variable resultado
Return resultado
Entonces yo ya s茅 que hay una variable jugada que entra por par谩metro
Que:
Si la jugada es 1 resultado es = a piedra
Si la jugada es 2 resultado es = a papel
Si la jugada es 3 resultado es = a tijera
Y si la jugada no es igual a ninguno de las 3 el resultado es = a opci贸n invalida Y REGRESO EL RESULTADO,

Entonces Ahora, puedo quitar todo este c贸digo y en vez de eso
Alert(鈥減c elige: 鈥 + elecci贸n(pc))
Alert(鈥渢煤 eliges: 鈥 + elecci贸n(jugador))
Y guardamos
Control s

Este es mi codigo con saludo de bienvenida en la pagina
<!DOCTYPE html>
<html>
<head>
<meta charset=鈥渦tf-8鈥 />
<title>Piedra, papel o tijeta</title>
<script>
function aleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
function eleccion(jugada) {
let resultado = ""
if(jugada == 1) {
resultado = "Piedra " + nombre
} else if(jugada == 2) {
resultado = "Papel " + nombre
} else if(jugada == 3) {
resultado = "Tijera " + nombre
} else {
resultado = "Haz Elejido PERDER " + nombre
} return resultado
}
let nombre = ""
nombre = prompt(鈥淐u谩l es tu nombre?鈥)
alert("Bienvenido " + nombre)
// 1 es piedra, 2 es papel, 3 es tijera
let jugador = 0
let pc = aleatorio(1,3)
jugador = prompt(鈥淓lige: 1 para piedra, 2 para papel y 3 para tijera鈥)
//alert(鈥淓lejiste鈥 + jugador)

        alert("Tu eliges: " + eleccion(jugador))
        alert("Pc elige: " + eleccion(pc))
        
        // COMBATE
        if(pc == jugador) {
                alert("Empataste " + nombre)
            } else if(jugador == 1 && pc == 3) {
                alert("Ganaste " + nombre)
            } else if (jugador == 2 && pc == 1) {
                alert("Ganaste " + nombre)
            } else if (jugador == 3 && pc == 2) {
                alert("Ganaste " + nombre) 
            } else {
                alert("Perdiste " + nombre)
            }
    </script>
</head>
<body>
    <h1>Piedra, papel o tijera F5 para continuar</h1>
</body>

</html>

As铆 va m铆 c贸digo:

        function aleatorio(min, max) {
            return Math.floor( Math.random() * (max - min + 1) + min )
        }

        function eleccion(jugada) {
            // Opciones de elecci贸n: 1 -> Piedra, 2 -> Papel, 3 -> Tijera
            let resultado = ""
            if(jugada == 1) {
                resultado = "Piedra 馃"
            } else if(jugada == 2){
                resultado = "Papel 馃Щ"
            } else if(jugada == 3 ){
                resultado = "Tijera 鉁"
            } else{
                alert("Opci贸n no disponible")
            }
            return resultado
        }
        
        let jugador = 0
        let pc =  aleatorio(1,3)
        jugador = prompt("A jugar!! elije: 1 -> Piedra, 2 -> Papel 贸 3 -> Tijera ")

        alert("Humano elige: " + eleccion(jugador))
        alert("M谩quina elige: " + eleccion(pc))
        
        //Combate!!
        if(pc == jugador) {
            alert("EMPATE! 馃槕")
        } else if( (jugador == 1 && pc == 3) 
					|| (jugador == 2 && pc == 1) 
					|| (jugador == 3 && pc == 2) )
{
            alert("GANASTE! 馃弳")      
        } else{
            alert("PERDISTE! 馃憥")
        }

funciones:pedacitos de codigo

鉂わ笍

Tengo este error de corchete y no puedo solucionarlo pero unos solucion que funcione pero no me gusta es copiarlo en otro archivo y misteriosamente funciona 馃槓

// Este es el ejercicio de hacer un juego de piedra papel o tijera pero con funciones

    let min = 1, max = 3, nombre = "", emoji = "", pc = Math.floor(Math.random() * (max - min + 1) + min)

    function Asiganacion(valor) {
        if (valor == 1) {
            emoji = "鉁"
        } else if (valor == 2) {
            emoji = "鉁"
        } else if (valor == 3) {
            emoji = "鉁"
        } else {
            emoji="Opcion invalida, No puede jugar"
        }
        return emoji
    }
    
    // nombre = prompt("Cual es su nombre")
    let user = prompt("Hola, " + nombre + ", Seleccione una opcion, 1. Para 鉁 2. Para 鉁 3. Para 鉁")       
    
    alert("El usuario eligio: "+ Asiganacion(user))
    alert("La maquina eligio: "+ Asiganacion(pc))

    if (user == pc) {
        alert("Empataron por que La Maquina tambien saco " + emoji)
    } else if (user < pc) {
        alert("El usuario pierde, la maquina saco " + emoji)
    } else if (user == 3 && pc == 1) {
        alert("El usuario pierde la maquina saco " + emoji)
    } else if (pc < user) {
        alert("La maquina pierde el usaurio saco " + emoji)
    } else if (pc == 3 && user == 1) {
        alert("La maquina pierde el usaurio saco " + emoji)
    }
</script>

Alt + Shitf + F Organiza TODO el c贸digo (le da espacios)

miren mi codigo de piedra papel o tijera

<code> 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Algoritmo piedra, papel o tijera</title>
        <script>
            //1 es piedra, 2 es papel, 3 para tijera
            let jugador = 0
            let min = 1
            let max = 3
            let pc = Math.floor(Math.random() * (max - min + 1) + min)
            //OBTENIENDO LA ELECCI脫N DEL JUGADOR
            jugador = prompt("Elige: 1 para piedra, 2 para papel, 3 para tijera");
            //alert("Elegiste " + jugador)
            if(jugador == 1) {
                alert("Elegiste 鉁")
            } else if(jugador == 2) {
                alert("Elegiste 馃搫")
            } else if(jugador == 3) {
                alert("Elegiste 鉁傦笍")
            }
            else {
              alert("Elegiste  PERDER!!!")
            }
            if(pc == 1) {
                alert("pc Eligio 鉁")
            } else if(pc == 2) {
                alert("pc Eligio 馃搫")
            } else if(pc == 3) {
                alert("pc Eligio 鉁傦笍")
            }
            // PIEDRA PAPEL O TIJERA TU VS PC!!!
            if(pc == jugador){
                alert("EMPATE :O")
            } else if(jugador == 1 && pc == 3) {
                alert("GANASTE SIUUUU")
            } else if (jugador == 2 && pc == 1){
                alert("GANASTE SIUUUU")
            } else if (jugador == 3 && pc == 2){
                alert("GANASTE SIUUUU")
            }
             else {
                alert("oh no... PERDISTE!!!")
            }
        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

鈥淧rogramar es manejar la frustraci贸n del error鈥.

Recomiendo usar el ingl茅s en nombres simples como rock, paper, scissors, player, win, tie, lose. Son peque帽os detalles que aportan para familiarizar el idioma y nuestros proyectos. Aparte que nos preparan por si tenemos como objetivo trabajar en pa铆ses angloparlantes. Have a good one, brothers and sisters 馃惃馃敐

Este es mi codigo con mucho 鉂 para todos

<<!DOCTYPE html>
<html>
     <head>
        <meta charset="utf-8" />
        <title>Piedra, papel o tijera</title>
     <script>
        function aleatorio(min, max) {
            return Math.floor(Math.random() * ( max - min + 1 ) + min)
        }

        function eleccion(jugada) {
            let resultado = ""
        if(jugada == 1) {
            resultado = "Piedra 馃"
        } else if(jugada == 2) {
            resultado = "Papel 馃Щ"
        } else if (jugada == 3) {
            resultado = "Tijera 鉁"
        } else {
            resultado = "MAL ELEGIDO"
        }
        return resultado
    }    
    
    // 1 es piedra, 2 es papel, 3 es tijera
    let jugador = 0
    let pc = aleatorio(1,3)
    jugador = prompt("Elige: 1 para piedra, 2 es papel, 3 para tijera")
    //alert("Elegiste " + jugador)

    alert("PC elige: " + eleccion(pc))
    alert("Tu eliges: " + eleccion(jugador))

        // COMBATE
        if(pc == jugador) {
            alert("EMPATE") 
        } else if(jugador == 1 && pc == 3) {
            alert("GANASTE")
        } else if(jugador == 2 && pc == 1) {
            alert("GANASTE")
        } else if(jugador == 3 && pc == 2)  {
            alert("GANASTE")
        } else {
            alert("PERDISTE jajajajajaj me burlo")
        }
        </script>
    </head>
     <body>
        <h1>Piedra, papel o tijera</h1>
  </body>
</html>> 

Pos aqu铆 andamos prosperando con nuevos cursos pa mi curriculum.

Eres un crack ense帽ando

Jajajaja, Freddy haciendo un Bob Ross con eso de los parentesis incompletos 馃槀

Este curso es fascinante, he aprendido muchas cosas a este punto, con c贸digo pude calcular los cap铆tulos que ha visto un amigo de su serie favorita (Tambi茅n funciona para cualquier serie), y este es el c贸digo que escrib铆 para hacerlo, s茅 que no es perfecto, pero s铆 funcional

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Capitulos de la serie</title>
        <script> 
        function capiTotales(cap, numeroDeTemporada, capPortemporada){
            return Math.floor(numeroDeTemporada * capPortemporada - (capPortemporada - cap))
        }
        let capitulo = 0
        let temporada = 0
        let capTemporada = 0
        temporada = prompt("Escribe por cu谩l temporada vas")
        capitulo = prompt("Escribe por cu谩l capitulo vas")
        capTemporada = prompt("Escribe cu谩ntos capitulos hay por temporada")
        let capitulosVistos = capiTotales(capitulo, temporada, capTemporada)
        alert ("Has visto " + capitulosVistos + " capitulos en total")
        </script> 
    </head>
    <body>

    </body>
</html>
<code> 

Ejemplo:



<!DOCTYPE html>
Este es un tipo de documento en HTML5, es una declaraci贸n que indica al navegador web que se est谩 utilizando HTML5.

<html>
Este es el contenedor principal de todo el c贸digo HTML, es el lugar donde se escriben todas las etiquetas necesarias para crear una p谩gina web.

<head>
Es una secci贸n donde se escriben las meta-informaciones de una p谩gina web, esto incluye cosas como el t铆tulo de la p谩gina que se muestra en la pesta帽a del navegador, los enlaces a los estilos css y javascript entre otros.

<meta charset=鈥渦tf-8鈥>
Es una meta-etiqueta que especifica la codificaci贸n de caracteres que se utilizar谩 en el documento HTML.

<title>Piedra Papel o Tijera</title>
Es el t铆tulo que aparecer谩 en la pesta帽a del navegador y que es utilizado por los buscadores para identificar la p谩gina.

<script>
Es donde se escribe el c贸digo JavaScript, es decir, las instrucciones que har谩n que la p谩gina web tenga ciertas acciones.

function aleatorio(min, max) {return Math.floor(Math.random()*(max-min + 1) + min)}
Esta es una funci贸n, es un bloque de c贸digo reutilizable que se puede llamar en varios puntos de nuestro c贸digo. En este caso esta funci贸n recibe dos argumentos min y max, que representan los valores m铆nimo y m谩ximo de un rango. Utiliza una funci贸n predefinida de javascript Math.random() que genera un n煤mero aleatorio entre 0 y 1, luego se multiplica por el rango que queremos (max-min) y se suma el valor m铆nimo. Finalmente se utiliza Math.floor() para redondear hacia abajo el n煤mero resultante asegurando as铆 que sea un entero. El valor que devuelve la funci贸n es ese n煤mero aleatorio entero dentro del rango que se le especifico.

Soy novato en el tema, pero nunca me imagin茅 lo interesante que es programar. Espero aprender mucho m谩s y ser un experto como veo de muchos ac谩.
Excelente instructor Freddy Vega

Por ahora estoy viendo el material y lo repetire hasta que aprenda, por ahora no hago aportes

[ ] 鈥> corchetes
{ } 鈥> llaves
( ) 鈥> par茅ntesis

aqui esta la mia, totalmente funcional

!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8"/>
	<title>jueguito de 馃 馃Щ 鉁</title>
	<script>
		//intro
	    alert("Bienvenido a tu juego 馃榾")	
		let choice = ""
		choice = prompt("驴Deseas jugar?, si o no" )
		if(choice == "si"){
		

			//corre el juego
			// 1 roca, 2 papel, 3 cuchilla
				// inicio de funciones
				function aleatorio(min,max){
					return Math.floor(Math.random() * (max - min + 1) + min)
				}

				function opcion (move){
					let resultado = ""
				  if (move == 1){
				  	 resultado = "馃"
				  }else if (move == 2){
				  	 resultado = "馃Щ"
				  }else if (move == 3){
				  	 resultado = "鉁"
				  } else alert("el " + player + " no se vale, tramposo")
				  return resultado 
				}
                // fin de funciones

			//declaracion de variables
			let player = 0
			let pc = aleatorio(1,3)
			// eleccion del player
			  player = prompt("elige tu tirada: 1 piedra, 2 papel, 3 tijera")

			  //BATTALLA 
			     if (player == 1 || player == 2 || player == 3){

			  		alert("pc elige: " + opcion(pc) + " mientras que tu elegiste: " + opcion(player))
				   if (player == pc){
				   	alert("entonces es EMPATE 馃槷")
				   	m = "hum, empate, mayor suerte la prosima vez 馃"
				   } else if (player == 1 && pc == 3){	   	
				   	alert("entonces GANASTE馃榾")
				   	m = "Felicidades, eres un 隆CAMPEON! 馃槑"
				   } else if (player == 3 && pc == 2){			   
				   	alert("entonces GANASTE馃榾")
				   	m = "Felicidades, eres un 隆CAMPEON! 馃槑"
				   } else if (player == 2 && pc == 1){			   
				   	alert("entonces GANASTE馃榾")
				   	m = "Felicidades, eres un 隆CAMPEON! 馃槑"
				   }  else {
				   	alert("entonces PERDISTE馃槳")
				   	m = "Felicidades, eres un 隆PERDEDOR, PERRA! 馃槨"
				   }
			       alert(m)
			   } else { alert("no puedes jugar con esa opcion")}

			  //final del juego
			// despedida 
			let bye = ""
			bye = prompt("驴Deseas volver a jugar? 馃: si o no")
			if (bye == "si"){
				alert("recarga la pagina 馃榾")
			}else {
				alert("cierra esta pagina, hasta luego 馃槝")
			}

		}else if (choice == "no"){
		alert("tienes miedo de que te gane, 隆PERRA!" )
		}else{
		 alert("(" + choice + ") no es valido 馃し馃徎鈥嶁檪锔")
		}



	</script>
</head>

<body>
	<p>espero que les halla gustado mi aporte</p>
</body>
</html>
	

Segui la misma logica para poder sintentizar en una funcion la parte del combate en el juego, cualquier sugerencia estare abierto a leerla

function combate(jugador,pc){
         let desicion
         if (pc == jugador) {
        desicion="Empate"
      } else if (jugador == 1 && pc == 3) {
        desicion="Haz ganado"
      } else if (jugador == 2 && pc == 1) {
        desicion="Haz ganado"
      } else if (jugador == 3 && pc == 2) {
        desicion="Haz ganado"
      } else {
        desicion="Perdiste"
      }
      return desicion
      }
alert(combate(jugador,pc))

Como 20 minutos en un error, pero con mucha atenci贸n al detalle logre que funcionara.

function randomm(max,min){ 
            return Math.floor(Math.random()*(max-min+1)+min);
        }

        function pchoise(choise){
            let resultado = "";
            if(choise==1){
                resultado = "Stone 馃";
                return resultado;
            }else if(choise==2){
                resultado = "Paper 馃Щ";
                return resultado;
            }else{
                resultado = " Scissors 鉁";
                return resultado;
            }
        }

        function match(home,player){
            if(player == home){
                alert('EMPATEE 馃幃馃挜');
            }else if((player == 1 && home == 3) || (player == 2 && home == 1) || (player == 3 && home == 2) ){
                alert('GANADORA 馃帀馃コ馃');
            }else {
                alert('Perdiste 馃槶馃樋馃');}
        }
        //1 馃Щ |2 馃 |3 鉁
        let jugador = 0;
        let pc = randomm(3,1);
        
        jugador = prompt('1 Piedra, 2 Papel, 3 Tijera');
        
        alert("PC elige: " + pchoise(pc));
        alert("Tu eliges: " + pchoise(jugador));

        match(pc , jugador);

definitivamente si le toca a uno mirar bien entre may煤sculas puntos comas y dem谩s y tener mucha paciencia para encontrar el error ya me paso y gracias a los comentarios lo pude solucionar

El proceso de refactoring en un proceso sistem谩tico, en el cual vamos a conseguir mejorar nuestro c贸digo sin crear nuevas funcionalidades.

Esto 煤ltimo es muy importante, ya que por una parte mejoramos el c贸digo, y las funcionalidades se hacen por otro lado.

Hola. En Colombia son llaves { }
Los corchetes son: [ ]

asi quedo mi codigo refactorizado

 function aleatorio(Min, Max){

                return Math.floor(Math.random() * (Max - Min + 1 ) + Min);
             }
             function AgregarJugada(jugada){
                if(jugada == 1) return "piedra馃";
                if(jugada == 2) return "papel馃搫";
                else return "tijera 8<";
             }
            /*elige 
            1 para piedra馃, 
            2 para papel馃搫, 
            3 para tijera 8< */


            let jugador = prompt("hola, elige 1 para piedra, 2 para papel, 3 para tijeras");
            let pc = aleatorio(1,3);   
            let resultado = jugador - pc;     

            alert("la jugada del jugador es " + AgregarJugada(jugador))
            alert("la jugada del Pc es " + AgregarJugada(pc))

             if (resultado == 1 || resultado == -2 ){
                alert("jugador Gana");
             }
             
            else if(resultado == -1 || resultado == 2){
                alert("pc gana");
                
             }
             else{
                alert("empate");
             }```

No era necesario porque este c贸digo no se repite, pero aun as铆 quise hacerlo a modo de pr谩ctica:

				function combate(objeto1, objeto2){
					if(objeto1 == objeto2){
						alert("EMPATE 馃し")
					} else if(objeto1 == 1 && objeto2 == 3){
						resultado = "GANASTE 馃コ"
					} else if(objeto1 == 2 && objeto2 == 1){
						resultado = "GANASTE 馃コ"
					} else if(objeto1 == 3 && objeto2 == 2){
						resultado = "GANASTE 馃コ"
				    } else{
						resultado = "PIERDISTE 馃槩"
					}
					return resultado
				}
				
				alert(combate(jugador, ia))

![](

Sabia que las funciones pueden reducir la simplificacion del codigo, pero me confundia cuando trataba de armarlo y ejecutarlo. Ahora, con la clase de Freddy me ilumino como se trabaja con las funciones y cual seria el metodo correcto.

Me gusta que me expliquen con palitos y bolitas. Gracias se帽or fred

let opciones = 
{
    piedra: 1, papel: 2, tijera: 3
}

let pc = aleatorio(3, 1);

jugador = prompt("combate contra la IA, elige: 1 piedra, 2 papel, 3 tijeras");

alert("IA elige " + eleccion(pc))

//COMBATE
if(pc == jugador)
{
    alert("EMPATE");
}
else if((jugador == 1 && pc == 3) || (jugador == 2 && pc == 1) || (jugador == 3 && pc == 2))
{
    alert("GANASTE");
}
else
{
    alert("perdiste");
}

function eleccion(jugador)
{
    let resultado = "";
    switch(jugador)
    {
        case 1: opciones.piedra
        resultado = "Piedra";
        break;
        case 2: opciones.papel
        resultado = "Papel";
        break;
        case 3: opciones.tijera
        resultado = "Tijera";
    }
    return resultado;
}

function aleatorio(max, min)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

Estuve rompi茅ndome la cabeza mirando el c贸digo y me di cuenta que no me mandaba resultados porque en un lado escrib铆 鈥渆lection鈥 y en otro lado 鈥渆leccion鈥 xD

Prueben mi p谩gina, les pido su opinion:
Copien el codigo en su archivo .html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Juego</title>
    <style>
        body
        {
            background-color:greenyellow;
            font-family:Helvetica;
        }
        strong
        {
            background-color:gold;
        }
        img
        {
            color:gold;
        }
    </style>
</head>
<body>
    <h1><strong>隆Juguemos Piedra, Papel o Tijera!</strong></h1>
    <h2><strong>Presiona la opci贸n que quieres elegir para jugar.</strong></h2>
    <p><strong>(</strong>Webpage en desarrollo.<strong>)</strong></p>
    <input type="button" value="Papel馃搵" id="botoncito1">
    <input type="button" value="Tijera鉁" id="botoncito2">
    <input type="button" value="Piedra馃寶" id="botoncito3">
    <img src="game_image.jpg" height="50%" width="100%" align="center" border="3">
    <input type="text" placeholder="Escogiste" size="12%" id="EleccionJugador1" readonly>
    <input type="text" placeholder="PC escogi贸" size="13%" id="EleccionPC1" readonly>
    <input type="text" placeholder="Resultado" size="6%" id="Resultado1" readonly>
    <input type="text" placeholder="Tu puntuaci贸n" size="10%" id="ContadorJugador" disabled>
    <input type="text" placeholder="CPU puntuaci贸n " size="10%" id="ContadorPC" disabled>
<script>

// FUNCTIONS

//JUGADA
function eleccion(jugada) {
    let resultado = "";
    if (jugada == 1) {
        resultado = "Papel 馃搵";
    } else if (jugada == 2) {
        resultado = "Tijera鉁";
    } else if (jugada == 3) {
        resultado = "Piedra馃寶";
    }
    return resultado;
}

//Numero Random
function random_number(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

// OBJETOS DEL JUEGO
function Papel_juego()
{
    player_choice = 1;
    pc_choice = random_number(1,3);
    EleccionJugador.value = "Elegiste " + eleccion(player_choice);
    
    if (pc_choice == 3) {
        EleccionPC.value = "CPU eligi贸 " + eleccion(pc_choice);
        Resultado.value = "隆Ganaste!馃ぉ";
        Usern = Usern + 1;
        texto_Usern.value = "Tus puntos: " + Usern;
    } else if (pc_choice == 1) {
        EleccionPC.value = "CPU eligi贸 " + eleccion(pc_choice);
        Resultado.value = "隆Empate!馃槢";
    } else if (pc_choice == 2) {
        EleccionPC.value = "CPU eligi贸 " + eleccion(pc_choice);
        Resultado.value = "Perdiste馃挬";
        PCn = PCn + 1;
        texto_PCn.value = "CPU puntos: " + PCn;
    }
}

function Tijera_juego()
{
    player_choice = 2;
    pc_choice = random_number(1,3);
    EleccionJugador.value = "Elegiste " + eleccion(player_choice);

    if (pc_choice == 3) {
        EleccionPC.value = "CPU eligi贸 " + eleccion(pc_choice);
        Resultado.value = "Perdiste馃挬";
        PCn = PCn + 1;
        texto_PCn.value = "CPU puntos: " + PCn;
    } else if (pc_choice == 1) {
        EleccionPC.value = "CPU eligi贸 " + eleccion(pc_choice);
        Resultado.value = "隆Ganaste!馃ぉ";
        Usern = Usern + 1;
        texto_Usern.value = "Tus puntos: " + Usern;
    } else if (pc_choice == 2) {
        EleccionPC.value = "CPU eligi贸 " + eleccion(pc_choice);
        Resultado.value = "隆Empate!馃槢";
    }
}

function Piedra_juego()
{
    player_choice = 3;
    pc_choice = random_number(1,3);
    EleccionJugador.value = "Elegiste " + eleccion(player_choice);

    if (pc_choice == 3) {
        EleccionPC.value = "CPU eligi贸 " + eleccion(pc_choice);
        Resultado.value = "隆Empate!馃槢";
    } else if (pc_choice == 1) {
        EleccionPC.value = "CPU eligi贸 " + eleccion(pc_choice);
        Resultado.value = "Perdiste馃挬";
        PCn = PCn + 1;
        texto_PCn.value = "CPU puntos: " + PCn;
    } else if (pc_choice == 2) {
        EleccionPC.value = "CPU eligi贸 " + eleccion(pc_choice);
        Resultado.value = "隆Ganaste!馃ぉ";
        Usern = Usern + 1;
        texto_Usern.value = "Tus puntos: " + Usern;
    }
}



//Elementos
var boton1 = document.getElementById("botoncito1");
boton1.addEventListener("click", Papel_juego);
var boton2 = document.getElementById("botoncito2");
boton2.addEventListener("click", Tijera_juego);
var boton3 = document.getElementById("botoncito3");
boton3.addEventListener("click", Piedra_juego);

var EleccionJugador = document.getElementById("EleccionJugador1");
var EleccionPC = document.getElementById("EleccionPC1");
var Resultado = document.getElementById("Resultado1");

//Variables
var texto_Usern = document.getElementById("ContadorJugador");
var texto_PCn = document.getElementById("ContadorPC");
var Usern = 0;
var PCn = 0;

var player_choice;
var pc_choice;


</script>
</body>
</html>