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

Aleatoriedad

10/84
Recursos

Ya programamos lo b谩sico para que el juego funcione. Pero es momento de hacer que el computador elija por si solo entre piedra, papel, o tijera. Necesito compartirte algunos fundamentos para que realices la pr谩ctica de hoy. Estos son:

El objeto 鈥淢ath鈥 en JavaScript

En JavaScript existen entidades llamadas 鈥淥bjetos鈥 que guardan dentro de ellas variables (que se llaman 鈥減ropiedades鈥 cuando viven dentro de un objeto) y funciones (que se llaman 鈥渕茅todos鈥 cuando viven dentro de un objeto.

En este sentido, Math es un objeto especial en JavaScript que contiene dentro de 茅l numerosas funciones y valores que son esenciales para hacer c谩lculos matem谩ticos, como el n煤mero PI o la funci贸n de redondear n煤meros decimales.

驴C贸mo usar el objeto Math de JavaScript?

Debes escribir 鈥淢ath鈥 (atenci贸n a la 鈥淢鈥 en may煤scula), luego un punto (鈥.鈥) y finalmente la propiedad o m茅todo que desees invocar.

Si deseas invocar un m茅todo, recuerda que debes escribir los par茅ntesis 鈥( )鈥 para que el m茅todo se ejecute.

Ejemplos de propiedades

Propiedades de Math Para qu茅 sirve
Math.PI Cu谩ndo el c贸digo se ejecuta, el navegador sustituye esto por el n煤mero PI.
Math.E Cu谩ndo el c贸digo se ejecuta, el navegador sustituye esto por la constante de Euler.

Ejemplos de m茅todos

M茅todos de Math Para qu茅 sirven
Math.ceil() Redondea hacia arriba el n煤mero decimal que est茅 entre los par茅ntesis, hasta convertirlo en un n煤mero entero.
Math.floor() Redondea hacia abajo el n煤mero decimal que est茅 entre los par茅ntesis, hasta convertirlo en un n煤mero entero.
Math.round() Redondea el n煤mero decimal entre par茅ntesis hacia el entero m谩s cercano.
Math.random() Retorna un n煤mero decimal aleatorio entre el 0 (incluido) y el 1 (excluido).

Prueba estos valores y m茅todos en la consola del navegador 馃檪

驴C贸mo declarar funciones en JavaScript?

Cuando encuentras un segmento de c贸digo que puede repetirse dentro del programa, o que ejecuta un proceso muy espec铆fico dentro de tu c贸digo, entonces lo ideal es encapsularlo en una funci贸n.

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 utilizar 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).

Haz algunos experimentos con esto en la consola antes de continuar 馃槈

Generando una elecci贸n aleatoria para el computador

Intentemos ahora emplear lo aprendido para hacer que la computadora elija piedra, papel o tijera por si sola. Para hacerlo, primero tenemos que entender c贸mo funcionar铆a el algoritmo que le permite hacer la selecci贸n, y luego tendr铆amos que introducirlo en nuestro c贸digo.

Algoritmo de selecci贸n aleatoria

Primero necesitamos generar un n煤mero aleatorio. Ya sabemos que Math.random() nos entrega un n煤mero aleatorio entre 0 y 1. Sin embargo, nuestro juego necesita un n煤mero aleatorio entre 3 y 1 para funcionar. 驴Se te ocurre c贸mo podr铆as crearlo con c贸digo?

Para lograrlo, la operaci贸n ser铆a esta:

Math.random() * ( max - min + 1 ) + min

Si consideramos que nuestro valor m谩ximo es 3 y el m铆nimo es 1, esto nos garantiza que siempre obtendremos un n煤mero entre 3.9999鈥 y 1. Por lo tanto, solo tendr铆amos que meter todo dentro de un Math.floor() para obtener un valor aleatorio entre 3 y 1.

Formula para emitir n煤meros aleatorios en un rango

Por lo tanto, para conseguir que la computadora elija aleatoriamente, necesitar铆amos el siguiente c贸digo:

//OBTENIENDO LA ELECCI脫N DEL COMPUTADOR
let max = 3;
let min = 1;
let eleccionDelComputador = Math.floor( Math.random() * ( max - min + 1 ) + min );

Introduce esto en tu c贸digo, y prueba a ver como funciona 馃檪

Convirtiendo el algoritmo en una funci贸n

Ahora, 驴por qu茅 no intentas convertir eso en una funci贸n? Te dejar茅 una posible soluci贸n aqu铆 abajo para que compares, pero intenta hacerlo por tu cuenta antes de fijarte en ella 馃槈

//OBTENIENDO LA ELECCI脫N DEL COMPUTADOR
function numeroAleatorio( min , max ) {
    return Math.floor( Math.random() * ( max - min + 1 ) + min );
}
let eleccionDelComputador = numeroAleatorio( 1 , 3 );

Haz el cambio y prueba tu juego 馃榿 Sin embargo, 驴Crees que podr铆as escribir el mismo c贸digo en menos l铆neas? 馃 No hablo de borrar espacios o l铆neas, hablo de emplear una l贸gica diferente para llegar al mismo resultado. Una que requiera menos pasos, y que aun as铆 llegue al mismo sitio 馃檪

Piensa un poco al respecto, experimenta un poco, y cuando est茅s satisfecho y todo funcione, acomp谩帽ame a aprender m谩s sobre como usar funciones para mejorar la calidad de tu c贸digo 馃槈 Nos vemos all谩 馃榿

Contribuci贸n creada por Jhonkar Sufia (Platzi Contributor).

Aportes 760

Preguntas 330

Ordenar por:

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

o inicia sesi贸n.

Para el reto de hacer menos l铆neas de c贸digo tu que d茅 el mismo resultado, tienen que tener en cuenta que no siempre tienen que achicar el c贸digo y que quede un c贸digo que no se pueda entender.
Recuerden 鈥淯n buen programador no es el que hace menos l铆neas de c贸digo, es el que hace c贸digo que se pueda entender鈥.

Aqu铆 esta como yo achiqu茅 el c贸digo.

Utilic茅 un booleano llamado 鈥渙鈥, que en c贸digo se expresa 鈥渱|鈥.
Espero haya sido de ayuda mi comentario.

驴C贸mo se obtiene la f贸rmula con la clase Math?

  • Para geeks que les encanta saber m谩s.

Supongamos que queremos n煤meros aleatorios entre 1 y 5:

  1. Definimos nuestro rango:
    En papel ser铆a hacer 5 - 1= 4
    En nuestro c贸digo hacemos:
(max - min)      _
  1. Generamos un numero aleatorio con Math.random y lo multiplicamos por el rango anterior.
    Recuerda que Math.random() devuelve un n煤mero aleatorio entre 0 (incluido) y 1 (no incluido)
Math.random() * (max - min)       _
  • El m铆nimo resultado que obtendremos ser谩 0 x 4 = 0

  • Por simplicidad supongamos que el m谩ximo ser谩 0.999 x 4 = 3.996

OjO -> Como Puedes ver, nos falta algo ya que queremos que el valor m铆nimo sea 1 y el m谩ximo 5,
y si le quitamos los decimales a estos resultados el m铆nimo ser铆a 0 y el m谩ximo ser铆a 4.

  1. Para corregir el m铆nimo, podemos sumar al resultado final el l铆mite inferior:
(Math.random() * (max - min)) + min      _
  • El m铆nimo resultado que obtendremos ser谩 (0 x 4) + 1 = 1

  • El maximo resultado que obtendremos ser谩 (0.999 x 4) + 1 = 4.996

OjO -> De nuevo estamos en problemas porque si bien ahora el m铆nimo es 1, el m谩ximo sigue siendo 4

  1. Es evidente que en lugar de multiplicar 0.999 x 4, necesitamos generar algo para que el valor m谩ximo sea 0.999 x 5
    La 煤nica forma de hacerlo es que el Rango sea 5

Aqu铆 surge la idea de sumar 1 al rango:

(Math.random() * (max - min + 1)) + min      _

RECAPITULEMOS:

  • El m铆nimo resultado que obtendremos ser谩 0 x 5 + 1= 1

  • El maximo resultado que obtendremos ser谩 (0.999 x 5) + 1 = 5.995

Yay! Lo hemos conseguido鈥racias por leer hasta aqu铆

Tuve la oportunidad de terminar el anterior curso de programaci贸n justo antes del lanzamiento de este鈥 El lenguaje ha cambiado y esta es una gran raz贸n para no parar de aprender.
Ac谩 les dejo mi aporte y el enlace a GitHub. se acepta todo tipo de feedback

馃憖 tu si tu, tambien te equivocaste escibiendo math.ramdon en el codigo y por eso no te salio xd tmr
es: Math.random

鉁嶐煆

me costo entender pero nah como el explica me da hasta entender por que me dejo mi ex :麓(

10 - Aleatoriedad

  • Math.floor() 鈫 Quita los decimales a cualquier numero. La clase es Math y el punto . trae la funci贸n floor()
  • Math.random() 鈫 Genera un numero aleatorio, con la funci贸n random() Nunca es 0 pero tampoco 1 ejem: 0.1545615
  • Para programar un Nro aleatorio en un rango:
  1. Declarar el rango 鈫 min = 1 y max = 3
  2. Generamos el Nro aleatorio invocando Math.random()
  3. Ese Nro lo multiplicamos por (max-min+1)
  4. A toda la expresi贸n le quitamos los decimales con Math.floor()
  • Podemos convertir todo este bloque de c贸digo en una FUNCION con:
    • Las variables se declaran dentro del parametro
    • return 鈫 retorna la funcion,
    • Esta funcion se puede invocar las veces que quiera
function *nombre* (*parametro*) {
    return 
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Piedra, papel o tijera</title>
    <script>
        function aleatiorio (min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
        // 1 es piedra, 2 es papel, 3 es tijera
        let jugador = 0
        let pc =  aleatiorio(1,3)

        jugador = prompt("Elije: 1 para piedra, 2 para papel, 3 para tijera ")
        //alert("Elejista " + jugador)
        if(jugador == 1) {
            alert("Elejiste 馃")
        } else if(jugador == 2){
            alert("Elejista 馃Щ")
        } else if(jugador == 3){
            alert("Elejiste 鉁")
        } else{ // Si elije otra opcion que no sea 1,2 o 3. mostrar:
            alert("ELEJISTE PERDER!!")
        }
        // para saber que eligio la pc
        if(pc == 1) {
            alert("PC elije 馃")
        } else if(pc == 2){
            alert("PC elije 馃Щ")
        } else if(pc == 3){
            alert("PC elije 鉁")
        } else{ // Si elije otra opcion que no sea 1,2 o 3. mostrar:
            alert("PC ELIJE PERDER!!")
        }

        // COMBATE
        // 1. verificar que no empatamos
        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>
</head>

<body>
    <h1>Piedra, papel o tijera</h1>
</body>

</html>

**驴Math de donde sale y porque? **
Te cuento, Math es un _objeto _integrado en el lenguaje JavaScript por defecto e incluye bastantes _funciones _como los que vemos en esta clase (floor y random) entre otras m谩s, y existen ah铆 en el lenguaje para que las uses cuando las necesites, donde sea dentro de JavaScript.
.
As铆 como Math, hay una gran variedad de otros objetos que puedes usar y que est谩n all铆, listos y disponibles, entenderlos o por lo menos saber que existen, te ayudara en multiples situaciones para que hagas magia programando. Un ejemplo es el m茅todo Date para usar fechas. 馃憣
.
M谩s Info: En este enlace

Buenas Practicas


Simplificar codigo no es reducir las lineas solamente, tambien es aumentar su comprensi贸n al ser leido.
Al final de esta clase a todos nos queda un codigo muy redundante en su logica y un poco largo, eso complica su lectura y comprensi贸n, una buena practica al programar es evitar las redundancias.


驴Como lo hacemos?

Con las funciones, estas nos permiten encapsular codigo que vayamos a utilizar multiples veces, esto significa que no tendremos que escribir una sentencia una y otra vez, sino solo una vez reutilizando ese codigo solamente cambiando sus parametros.


<h5>Aqui mi ejemplo:</h5>

Vas a pasar mas tiempo leyendo codigo de otra persona que escribiendo codigo.

Siento que el jugador 鈥淧C鈥 sabe lo que hace porque me ha ganado en 7 ocasiones seguidas 馃槷

Si no les sale a la primera Recuerden que se trata m谩s de leer c贸digo que de programar! 馃憣

Si eres de lo que fue trolleado por el factor 鈥渁leatorio鈥 pensando que tu codigo estaba mal y resulta que tu codigo estaba bien solo que la pc tiro 10 veces seguidas el mismo valor, ven铆 que te doy un abrazo xq me paso lo mismo!

馃槄 Bueno, Freddy dijo lo m谩s comprimido posible.

Buenas tardes, me he tomado la libertad de hacer el famoso juego de piedra, papel, tijeras, lagarto, spock que sale en la seri The big bang theory. Espero que est茅 todo bien:

<html>
<head>
<meta charset=鈥渦tf-8鈥 />
<title>Mi primera programada</title>
<script>
// 1 es piedra, 2 es papel, 3 es tijera
let jugador = 0
let pc = Math.floor(Math.random() * 5);
jugador = prompt(鈥淓lige: 1 para piedra, 2 para papel, 3 para tijera, 4 para lagarto y 5 para spock鈥)

  //Elecci贸n del jugador

  if(jugador == 1) {
    alert("Elegiste 馃")
  }else if (jugador == 2) {
    alert("Elegiste 馃搵")
  }else if (jugador == 3) {
    alert("Elegiste 鉁傦笍")
  }else if (jugador == 4) {
    alert("Elegiste 馃")
  }else if (jugador == 5) {
    alert("Elegiste 馃枛")
  } else {
    alert("Elegiste 馃懝")
  }

  //Elecci贸n del ordenador

  if (pc == 1){
    alert("El ordenador eligi贸 馃")
  }else if (pc == 2){
    alert("El ordenador eligi贸 馃搵")
  }else if(pc == 3){
    alert("El ordenador eligi贸 鉁傦笍")
  }else if (pc == 4) {
    alert("El ordenador eligi贸 馃")
  }else if (pc == 5) {
    alert("El ordenador eligi贸 馃枛")
  }

  //Combate

  if(pc==jugador){
    alert("Empate")
    resultado="empate"
  } else if (jugador == 3 && pc == 2 || jugador == 2 && pc == 1 || jugador == 1 && pc == 4 || jugador == 4 && pc == 5 || jugador == 5 && pc == 3 || jugador == 3 && pc == 4 || jugador == 4 && pc == 2 ||  jugador == 2 && pc == 5 || jugador == 5 && pc == 1 || jugador == 1 && pc == 3) {
    alert("GANASTE")
    resultado = "victoria"
  } else {
    alert("PERDISTE")
    resultado = "derrota"
  }

</script>

</head>
<body>
<h1>Piedra, papel, tijeras, lagarto, spock</h1>
<script>
if(resultado==鈥渧ictoria鈥){
document.write("<p>隆Ganaste! 鉂わ笍</p>");
}else if(resultado==鈥渄errota鈥){
document.write("<p>隆Perdiste! 馃懝</p>");
}else{
document.write("<p>隆Empate! 馃き</p>");
}
</script>
</body>
</html>

Sin darme cuenta estoy aprendiendo y jugando con JavaScript ** :3 **

Con funciones se puede reducir el codigo un ejemplo de ello.

Se me apago el cerebro鈥 tengo que reiniciarlo jajajajajaja

FUNCIONES

隆Estas le dan vida a JavaScript y a nuestro c贸digo!

Debemos usar la palabra function y luego el nombre de esta funci贸n. Luego par茅ntesis () seguido de llaves {}.
Entonces en la memoria se va a guardar esta funci贸n. Ese espacio tendr谩 el nombre que ya le asignamos.

Dentro de los par茅ntesis colocamos par谩metros que son los datos que necesita nuestra funci贸n para procesarlos y devolver un resultado. La funci贸n puede funcionar sin par谩metros, si no los necesita. Por ejemplo, la funci贸n random() (que viene por defecto en el navegador) no necesita par谩metros para devolvernos un n煤mero decimal aleatorio, pero la funci贸n alert() necesita que le enviemos la cadena de texto que se va a mostrar en pantalla, o no saldr谩 nada.

**Dentro de las llaves ** escribimos la l贸gica de nuestro c贸digo. Podemos escribir funciones dentro de otras funciones y devolver el resultado usando la palabra return. Puede que la funci贸n no necesite devolver resultado y puede entonces no tener la palabra return.

Las llaves {} Se pueden ver en diferentes expresiones de JavaScript, y sirven para encerrar c贸digo. Se usa en las funciones, condicionales y siclos, y podemos llamar a todo lo que est谩 dentro un Objeto. Mientras avances sabr谩s por qu茅.

Invocar a la funci贸n es muy sencillo.
Solo hay que escribir el** nombre** que le asignamos al espacio de memoria de la funci贸n seguido de ().

nombre()
``` Y dentro de los par茅ntesis escribimos la informaci贸n que necesita la funci贸n para procesarla. Cuando se coloca aqu铆 esta informaci贸n se le llama **argumentos**. Es necesario enviar _argumentos_ para que sean recibidos en los _par谩metros_ de la funci贸n.

Con la menor cantidad de l铆neas posibles(solo reduje la condici贸n del combate y simplifique las condiciones en una sola l铆nea, tambi茅n es otra forma de ver el c贸digo)

Pas茅 una hora buscando porque no me sal铆a
Hab铆a escrito 鈥淢atch鈥 en lugar de 鈥淢ath鈥

Math.floor(Math.random() * (max - min + 1) + min);

prendiendo de nuevo programaci贸n y la tercera es la vencida

Casi me saco un ojo con la batalla pero lo logre jajajaj Muchas gracias! fue divertido 馃槈

      // BATALLA
      if (jugador == pc) {
        alert("EMPATE");
      } else if (
        (jugador == 1 && pc == 3) ||
        (jugador == 2 && pc == 1) ||
        (jugador == 3 && pc == 2)
      ) {
        alert("GANASTE! 馃帀馃帀馃コ馃馃帄");
      } else {
        alert("Perdiste 馃槶馃樋馃");
      }

Mi c贸digo comprimido manteni茅ndolo entendible:

    <script>
        // Funci贸n para generar numeros aleatorios entre un rango asignado
        function generateRandomInteger(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        // La computadora elige aleatoreamente un n煤mero entre 1 y 3
        let eleccionpc = GenerarNumerosEnterosAleatorios(1,3)
        if(eleccionpc == 1) {  
            eleccionpc = "piedra"
        } else if(eleccionpc == 2) {  
            eleccionpc = "papel"
        } else if(eleccionpc == 3) {  
            eleccionpc = "tijera"
        }

        //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")
        if(eleccionjugador == 1) {  
            eleccionjugador = "piedra"
        } else if(eleccionjugador == 2) {  
            eleccionjugador = "papel"
        } else if(eleccionpc == 3) {  
            eleccionjugador = "tijera"
        }

        //variable resultado
        let resultado = 0

        //Cuando el jugador gana
        if((eleccionjugador == "piedra" && eleccionpc == "tijera")
        || (eleccionjugador == "papel" && eleccionpc == "piedra") 
        || (eleccionjugador == "tijera" && eleccionpc == "papel")) {  
            resultado = "GANASTE"                 
        } else if(eleccionjugador == eleccionpc) {
            resultado = "EMPATARON"  
        //Cuando el jugador pierde
        } else {
            resultado = "PERDISTE"  
        }        
        
        //Imprimir resultado
            alert("Elegiste " + eleccionjugador + "\nLa computadora eligi贸 " + eleccionpc + "\nResultado: " + resultado)         
    </script>

Para volver a invocar una funcion en consola solamente presionen flecha arriba 馃槂

Yo estoy iniciando la carrera de JavaScript y vengo del curso b谩sico de JavaScript (muy bueno por cierto 馃槈) y en uno de los retos hicimos el mismo juego鈥 aqu铆 comparto la l贸gica de mi juego para comparar la opci贸n del jugador y del CPU.

Sin los comentarios serian 15 lineas de c贸digo pero los a帽adi para que sea m谩s f谩cil comprenderlo (yo tambi茅n voy iniciando). Tambi茅n las variables de los nombres son descriptivas pero en el c贸digo final serian remplazadas por la elecci贸n del usuario. Esto es 煤nicamente la l贸gica para comparar las elecciones y determinar qui茅n gana.

Gist link: https://gist.github.com/rookiecarlos/44f64892d41438fdf957f471afc0cd19

function startGame(user, gpu) {
    // != siginifica Si no son iguales... haz esto, basicamente lo contrario a si son iguales :)
    if (user != gpu) {
        // Como dijo Freddy en clases pasadas solo hay tres maneras en el que el usuario gana
        // A continucion tenemos dichos tres escenarios
        if (user == rock && gpu == scissor) {
            console.log('You win!');
        } else if (user == paper && gpu == rock) {
            console.log('You win!');
        } else if (user == scissor && gpu == paper) {
            console.log('You win!');
        // Si ninguno de los tres escenarios de arriba se cumple entonces gana la GPU
        } else {
            console.log('You lost!');
        }
    // Si las elecciones del usuario y del GPU son iguales cae en este else, quedaria en empate
    } else {
        console.log('Draw!');
    }
}

Podr铆a ser un aporte para c贸digo mas peque帽o, o tal vez no, que un experto me lo diga si es que estoy mal o esa forma es una mala practica o algo. Es para el numero aleatorio lo que hice fue.
var aleatorio=Math.floor((Math.random() * 3)+1);

Ejemplo si el Math.random me genera 0.5; seria
0.5 * 3=1.5+1=2.5, con el floor se convierte en 2; y pueden probar con cualquier numero aleatorio, siempre te dar谩 un numero del 1 al 3.

Tengan cuidado al escribir 鈥渞andom鈥 y 鈥渇unction鈥

ramdon 鉂
random 鉁

funtion 鉂
function 鉁

Estuve por 15 minutos intentando ejecutar el ultimo c贸digo con 鈥渇unction鈥 y al final me di cuenta que olvid茅 ponerle una 鈥渃鈥 TT

Este apunte te va ayudar mucho si quedaste, con dudas con el Math.random, otra cosa si ves las letras con rojo es que es may煤scula esos peque帽os detalles a veces son dif铆cil de en encontrar.

Me est谩 encantando el curso. Es genial. La habilidad de Freddy para compartir conocimiento es admirable.
Pero existe algo que en ocasiones me distrae un poco. Al principio, y en determinadas ocasiones, me provocaba risa. Ya no.
Sucede que constantemente Freddy utiliza una frase: 鈥淣o apagues el cerebro鈥. Al igual que otras formas de incitar a las personas, que probablemente tienen asociaciones negativas con las matem谩ticas, a continuar aprendiendo.
A m铆, francamente, me distrae un poco.
Comprendo que ciertas personas necesiten un 鈥榚mpuj贸n鈥. Pero en mi caso, sucede que estoy plenamente concentrado en lo que est谩 explicando y de un momento a otro hace alguna puntualizaci贸n para aquellas personas. En esos momentos me encuentro bastante estimulado por entender algo que desconozco (estado de flujo) y esas pausas, por breves que puedan ser, me desconcentran un poco.
Desconozco si soy la 煤nica persona que experimenta esto, pero me es inc贸modo. Suele hacerlo con frecuencia en diversos cursos o en v铆deos de otras plataformas.
Pierdo la concentraci贸n, al punto de motivarme a escribir 茅ste comentario. :麓)

Esta fue mi soluci贸n.

siguiendo estas pautas:

-No sacrificar funcionalidad con reducci贸n de l铆neas de c贸digo
-Ofrecer una mayor comprensi贸n e interacci贸n al usuario
-no sobrepasarme de lo aprendido en las clases anteriores

En la l贸gica creo estar bien, pero en la funcionalidad, veo necesario mostrar el valor de cada elecci贸n

let player = prompt("Elige una opci贸n\n 1 Piedra \n 2 Papel \n 3 Tijeras");
let pc = Math.floor(Math.random()*(3 - 1 + 1)+1);
console.log(pc);
let winner = player == pc ? alert("Empate") : 
             player == 1 && pc == 2 ? alert(`Elegiste ${player} y Pc eligio ${pc} perdiste`):
             player == 3 && pc == 1 ? alert(`Elegiste ${player} y Pc eligio ${pc} perdiste`):
            alert("Numero erroneo") 

esto es lo mas que pude hacerlo con menos lienas de codigo (me tarde mas de 1 hora porque intente reescribirlo apoyandome del codigo que ya hice en la clase)

Aqu铆 les dejo mi aporte. Aunque no simplifiqu茅 mucho el c贸digo, lo mejor茅 un poco.

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

        // 1 es piedra, 2 es papel, 3 es tijera
        let jugador = 0;
        let pc = random(1, 3);
        jugador = prompt("Elige: 1 es 鉁, 2 es  馃搫, 3 es 鉁傦笍")


        function condition(name, variable) {
            if (variable == 1) alert(`${name} eligi贸 鉁奰);
            else if (variable == 2) alert(`${name} eligi贸  馃搫`);
            else if (variable == 3) alert(`${name} eligi贸 鉁傦笍`);
            else alert("Elije una opci贸n v谩lida");
        }

        condition("Elkin", jugador);
        condition("PC", pc);
        kombat(jugador, pc);

        // COMBATE 
        function kombat(player1, player2) {
            if (!player1 || !player2) {
                alert("BATALLA CANCELADA");
                return;
            }

            if (player1 == player2) alert("Es un EMPATE")
            else if (
                (player1 == 1 && player2 == 2) ||
                (player1 == 2 && player2 == 3) ||
                (player1 == 3 && player2 == 1)
            ) alert("PERDISTE");
            else alert("GANASTE :D")
        }
    </script>

Hola a todos, aqui les mando mi juego, le meti algunas cosas para que quedara mejor, es mi primera vez codeando, pero estoy aprendiendo mucho, espero alguna retroalimentaci贸n 馃槂
PD: Perd铆 jsjs :v

Como Jhon Freddy Vega habla tan r谩pido, le baj茅 la revoluci贸n al video, ahora tengo a un Freddy extra帽o, pero puedo comprender mejor.

Hola Chicos, veo que muchos se estan preguntando sobre el uso de esta formula

Math.floor(Math.random() * (max-min+1) + min)

Y queria pasar a explicarla segun mi concepcion que me sirvio mucho, basado en mi matematica del colegio :

  1. Comenzamos sabiendo que el Math.random() me enviara como resultado numeros aleatorios entre 0 y 1 (Tengamos en cuenta que coge incluso al cero pero no al 1)
    Esto lo podemos representar de la siguiente forma:

0 <= x < 1

  1. Luego lo multiplicamos por la diferencia entre el maximo y el minimo sumado con uno.
    Lo cual muchos podran recordar la formula del colegio para contar cuantos numeros existen entre dos numeros (valga la redundancia)
  • Vamos a asumir, por ejemplo, que queremos numeros aleatorios entre 5 y 10, entonces necesitamos saber cuantos numeros existen entre ambos.
  • cantidad de numeros = (10-5 +1) = 6
  1. Ahora esto lo multiplicamos por lo observado en el punto 1.

    todo multiplicado por 6
    0 <= 6 x < 6

  2. Como podemos ver hasta este punto tendriamos los numeros aleatorios mayores o iguales que cero y menores que 6. Lo cual no queremos 馃槮

  3. Es por ello que se le agrega el minimo que va a marcar mi punto minimo para concretar la tarea aleatoria.

  • Sumamos 5 a ambos lados:

    5 <= 6x + 5 < 11

  1. En este punto vemos que garantizamos que los numeros aleatorios iniciara con el 5 y llegaran hasta antes del 11. Pero como lo explico Freddy, el Math.floor lo reducira todo a un entero. Incluso saliendo como resultado 10.99999999
    Esto satisface nuestra premisa de aleatoriedad requerida

Espero esta explicacion pueda servir a alguien, no soy tan bueno explicando pero trato de hacerlo. Cualquiera sugerencia escribirla 馃槂

Hasta mas vernos
[Todas las tildes han sido omitidas]

Math.floor le quita los decimales a cualquier n煤mero.

Mi peque帽o aporte fue una funci贸n que convirtiera el numero en icono.

 function icon(number){
                if(number == 1) {
                    return("鉁 馃")
                } else if(number == 2) {
                    return("鉁 馃搫")
                } else { return("鉁 鉁")}
            }
            
            alert("Elegiste " + icon(jugador))
            alert("El PC eligio " + icon(pc))

Lo m谩s conciso que pude. Aunque no logr茅 optimizar la parte de combate, me fue bien con la de selecci贸n

En vez de tener un bloque de c贸digo para mandar la alerta de la elecci贸n del jugador y otro para la elecci贸n de la pc, cre茅 una funci贸n de las opciones del juego (piedra, papel y tijera), que ser铆a como tener los dos bloques en uno.
Solo har铆a falta, como se ve en el c贸digo, invocar la funci贸n 2 veces: uno para enviar la alerta del la elecci贸n del jugador y otro para la alerta de la pc.

// Peque帽o juego de priedra, papel o tijera
function aleatorio (min, max) {
    return Math.floor( Math.random() * (max - min + 1) + min );
}
function seleccion (opcion) {
    switch (parseInt(opcion)) {
        case 1:
            return "Priedra 馃";
        case 2:
            return "Papel 馃搫";
        case 3:
            return "Tijeras 鉁";
        default:
            return "Perder.";
    }
}
function resultado(pc, jugador) {
    if (pc == jugador) {
        return "Empate!";
    } else if ((jugador == 1 && pc == 3) || (jugador == 2 && pc == 1) || (jugador == 3 && pc == 2)) {
        return "Ganaste!!!";
    } else {
        return "Perdiste :C";
    }
}

// 1 es piedra, 2 es papel, 3 es tijera
let continuar = 1;
let jugador, pc = 0;
while (continuar == 1) {
    pc = aleatorio (1, 3);
    jugador = prompt("Elige 1 para piedra, 2 para papel y 3 para tijeras.");
    alert("Elegiste: " + seleccion(jugador) + ". La PC eligi贸: " + seleccion(pc) + ". El resultado es: " + resultado(pc,jugador));
    continuar = confirm("驴Volver a jugar?");
}

Nunca cre铆 que a mis 42 a帽os iba a estar programando as铆鈥 驴me cuesta? (del 1 al 10) Me cuesta un mont贸n鈥 pero lo estoy logrando de a poco.
Gracias Freddy por ser tan claro!
Todo un logro para mi

El profe nos tiene mucha fe 驴como que comprimir ?馃様

yo estaba teniendo un problema con la f贸rmula y era que mi variable pc val铆a cero siempre, le ped铆 ayuda a mi hermano y resulta que en vez de poner max - min puse min - max jajsjsjdjs tengan mucho cuidado con esos detalles 馃槄

Tantas formas diferentes para lograr el mismo resultado.

yo casi me voy hasta que freddy dijo: ! No te vayas no te vayas vuelve隆 馃ぃ馃ぃ馃ぃ馃槀

Pas茅 1 hora buscando el error de mi c贸digo por no pensar en las may煤sculas.
d铆ganme que no solo me pasa a mi 馃槀馃槀馃槀馃槀

        let jugador = 0
        let min     = 1
        let max     = 3
        let pc      = Math.floor(math.random() * (max - min + 1) + min)

        jugador = prompt("Elige:1 para 馃П, 2 para 馃搩, 3 para 鉁");

Hola a todos, he intengado optimizar un poco y reutilizar una funcion para el caso de que eligio la pc y el jugador y la funcionalidad de 3 vidas para salirse del juego.

   function aleatorio(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
        function choose(propiedad, valor) {
            let tipo
            if (valor == 1) {
                tipo = 'Piedra'
            } else if (valor == 2) {
                tipo = 'Papel'
            } else if (valor == 3) {
                tipo = 'Tijera'
            } else {
                tipo = 'Perder!!!'
            }
            return alert(propiedad + 'elige: ' + tipo);}

        let num1 = 1
        let num2 = 3
        let pc = aleatorio(num1, num2);
        contador = 3
        // 1 = Piedra, 2 = Papel, 3 = Tijera.
        while (contador > 0) {
            let jugador = prompt('Piedra, Papel o Tijera 1,2,3!!');
            choose('Jugador ', jugador);
            choose('pc ', pc);
            if (jugador == pc) {
                alert('Es un empate')
                status = false
            } else if (jugador == 1 && pc == 3) {
                alert('GANASTE!!')
                status = false
            } else if (jugador == 2 && pc == 1) {
                alert('GANASTE!!')
                status = false
            } else if (jugador == 3 && pc == 2) {
                alert('GANASTE!!')
                status = false
            } else {
                alert('HAS PERDIDO');
                contador--
            }
            document.write('Te quedan ' + contador + ' vidas!!')

Les comparto mis notas de clase, por ahora estan en construcci贸n mientras voy avanzando!

Enjoy

me tarde un muy buen rato, pero con un arreglo puedes eliminar muchos condicionales IF

Ayudandome con aportes de otra gente pude reducir la parte de combate.

<!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)
        }
        //1 es piedra, 2 es papel, 3 es tijera
        let jugador = 0
        let pc = aleatorio(1,3)
        jugador = prompt ("Elije:1 para piedra, 2 para papel, 3 para tijera")
        //alert("elejiste "+ 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 elige 馃拵")
        }
        else if(pc==2) {
            alert ("pc elige 馃搫")
        }
        else if(pc==3) {
            alert ("pc elige 鉁")
        }
      //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")
        }
     </script>
</head>
<body>
    <h1> Piedra papel o tijera</h1>
    
</body>
</html>

Declaraci贸n de funciones

  1. Nombre clave鈥> function
  2. Nombre de la funci贸n
  3. Par谩metros (entre par茅ntesis y separados por comas)
  4. Abrir llaves {aqui colocar las declaraciones que definen a funcion }

Math.floor() (redondea hacia abajo al entero m谩s cercano)
Math.ceil() (redondea hacia arriba al entero m谩s cercano).
Math.random() devolver谩 un n煤mero de coma flotante mayor o igual que 0 y menor que (pero nunca igual a) 1

Para generar un numero entero del 1 al 3, a mi me funciono lo siguiente:

let pc = Math.floor(Math.random()*3 + 1);

El reto

const promptText = "1:Rock, 2:Paper, 3:Scissors";
const options = {
  1: "馃椏",
  2: "馃搫",
  3: "鉁傦笍",
};

/**
 * Return a random interger number between the given range
 * @param {int} min Lowest number of the range
 * @param {int} max Highest number of the range
 * @returns {int} Random Number between min and max
 */
function randomPick(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
let jugador = 0;
let pc = randomPick(1, 3);

jugador = prompt("Choose: " + promptText);
if (jugador == 1) {
  alert("You choose 馃椏");
} else if (jugador == 2) {
  alert("You choose 馃搫");
} else if (jugador == 3) {
  alert("You choose 鉁傦笍");
} else {
  alert('Your Lose "L" ');
}

// Bender choose what?
alert("馃 Bender pick " + options[pc]);

if (pc == jugador) {
  alert("Tie");
} else if (
  (jugador == 1 && pc == 3) ||
  (jugador == 2 && pc == 1) ||
  (jugador == 3 && pc == 2)
) {
  alert("You win");
} else {
  alert("Hahaha GAME OVER 馃拃");
}

a penas entiendo lo que escribi

La compuerta l贸gica or en JavaScript es as铆 ||, dos palitos que est谩n arriba del tab y con ese or, se puede condicionar en una sola l铆nea de c贸digo as铆:

if (player == pc){
  alert("Empate")
}else if (player == 1 && pc == 3 || player == 2 && pc == 1 || player == 3 && pc == 2){
  alert("Ganaste")
}else {
  alert("Perdiste")
} 

Quiero mostrarles esta peque帽a correcci贸n que realic茅; la funci贸n logout(), antes hab铆a compartido un video de un bug en el programa donde despu茅s de ingresar una opci贸n diferente a 1, 2 y 3 en el c贸digo de Piedra, Papel y Tijeras el programa me segu铆a mostrando otras ventanas, creo haberlo corregido y lo comparto con vosotros, me alegro porque la verdad es que no se mucho. recibo retroalimentaci贸n, thank.

https://youtu.be/Hsg9cB-2ZlI

Bueno, les cuento que me autosupere, logre ubicar los emojis, colocarlo en los alerts. Despues de casi llorar 馃槀馃槀.
Desde que comenc茅 el curso he logrado encontrar los emojis, cortar la pantalla y pegar para mostrar mis errores y adivinar cual es la tecla WIN. Por ah铆 para la maypr铆a es una pavada, para mi fue un gran esfuerzo y me siento autosuperada!!! Gracias por el aguante.

Hola! Saben como adjunto imagenes a este chat?

Un punto a mejorar, en la plataforma como tal, es que, en tu dashboard de la semana te indique los minutos estudiados contando si volviste a repasar el curso o si lo retrocediste. Me pasa mucho que primero veo la clase y presto atencion e intento ir a la par en el VScode luego rebobino para tomar notas de los conceptos como tal e inclusive a veces vuelvo a rebobinar para hacer la practica pura y dura y en eso una clase de 10min se me convierten en 40min de los cuales 30 fuera volviendo a repasar conceptos en el video y no me los cuenta platzi 馃槥

Una de las mejores maneras de aprender un poco m谩s es con los comentarios de los otros compa帽eros, hay algunos que tienen m谩s conocimientos y lo comparten con nosotros
que apenas estamos iniciando. 馃

鈥淧C鈥 me hizo revisar 20 veces el c贸digo (que estaba bien), porque se le dio la gana de elegir tijera como 5 veces seguidas.

Alguien sabe porque no me funciona el return?? me vi el video otra vez y lo tengo todo como debe estar.

Hola 馃槉

Mis aportes son los siguientes:

  1. Yo opt茅 por crear una FUNCI脫N llamada 鈥渆leccion鈥 para dar a conocer, valga la redundancia; la elecci贸n del usuario y la PC, ya que de esta manera NO NECESITAMOS ESCRIBIR DOS VECES las mismas instrucciones.

  2. Implementar en una sola condicional if, las comparaciones necesarias para saber cu谩ndo resultamos ganadores, apoyandome de los operadores l贸gicos AND ( &&) y OR ( || ) para obtener las posibles jugadas ganadoras en una sola condici贸n. En caso de no cumplirse esta condicional, se da por hecho que hemos perdido.
    Cuando el usuario y la PC realizan la misma elecci贸n, se genera un empate.

Aqu铆 mi c贸digo:

Un compa帽ero los compartio antes, pero ya no encontre el comentario cuando lo codifique, por si no lo vieron.
La parte izquierda del cuadrante es el Jugador y la superior es el PC. Los escenarios 鈥淕ana鈥 y 鈥淧ierde鈥 hacen referencia al Jugador

Aqui el codigo con la seccion COMBATE

//COMBATE

        if (resta == 0) {
            alert("EMPATE")
        }else if (resta == -2 || resta == 1){
            alert("El Jugador GANA")
        }else if (resta == -1 || resta == 2){
            alert("El PC GANA")
        }

Aqui el codigo completo

<!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) 
        }
        
        //1.Piedra 2.Papel 3.Tijera
        
        let jugador = 0
        let pc = 0
        let min = 1
        let max = 3
        let resta = 0

        jugador = prompt("Elige: 1.Piedra 2.Papel 3.Tijera")
        pc = aleatorio(1,3)
       
        if (jugador == 1) {
            
            alert("Usted eligio piedra 馃")
        }else if (jugador == 2){

            alert("Usted eligio Papel 馃搩")
        }else if (jugador == 3){
            
            alert("Usted eligio tijera 鉁傦笍")
        }else { 

            alert("Debe elegir entre las opciones dadas anteriormente: \n馃 馃搩 鉁傦笍")
        }

        if (pc == 1) {
            
            alert("El pc eligio piedra 馃")
        }else if (pc == 2){

            alert("El pc eligio papel 馃搩")
        }else if (pc == 3){
            
            alert("El pc eligio tijera 鉁傦笍")
        }else{

            alert("El pc esta bien BRUTO " + pc)
        }

        resta = jugador - pc 

        //COMBATE

        if (resta == 0) {
            alert("EMPATE")
        }else if (resta == -2 || resta == 1){
            alert("El Jugador GANA")
        }else if (resta == -1 || resta == 2){
            alert("El PC GANA")
        }else {
            alert("Algo salio mal!")
        }
        
    </script>
</head>
<body>
    <h1>
        Piedra, papel o tijera
    </h1>
</body>
</html>

//COMBATE
if(pc == jugador){
alert(鈥淓MPATE鈥);
} else if ((jugador == 1 && pc == 3) || (jugador == 2 && pc == 1) || (jugador == 3 && pc == 2)){
alert(鈥淕ANASTE鈥);
} else {
alert(鈥淧ERDISTE鈥);
}

Aqu铆 est谩 mi contribuci贸n鈥 me tom茅 el tiempo de hacerlo un poco distinto y con multijugador. Se puede pulir bastante pero lo importante es aprender jeje

https://gitlab.com/JesusMohali/piedrapapeltijera

Aleatorio en HTML

<!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)
            }
            //1 es piedra, 2 es papel, 3 es tijera
            let jugador = 0
            let pc = aleatorio(1, 3)
            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 eligi贸 馃")   
            }
            else if(pc == 2) {
                alert("Pc eligi贸 馃搩")   
            }
            else if (pc == 3) {
                alert("Pc eligi贸 鉁傦笍")   
            }
            //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 if((jugador == 1 && pc ==3) || (jugador == 2 && pc == 1) || (jugador == 3 && pc == 2)) {
                alert("GANASTE")
            }
            else{
                alert("PERDISTE")
            }
        </script>
    </head>
    <body>
        <h1>Piedra, Papel o tijera</h1>
    </body>
</html>

Aleatorio en Python

import random
#1 es piedra, 2 es papel, 3 es tijera
comienza = random.randint(1, 3)
jugador = 0
pc = comienza
jugador = int(input("Elige: 1 para piedra , 2 para papel , 3 para tijera: "))           
#alert("Elegiste "+ jugador)
if jugador == 1:
  print("Elegiste piedra")
elif jugador == 2:
  print("Elegiste papel")
elif jugador == 3:
  print("Elegiste tijera")
else:
  print("Perdiste")  
  
if pc == 1:
  print("Pc eligi贸 piedra")
elif pc == 2:
  print("Pc eligi贸 papel")
elif pc == 3:
  print("Pc eligi贸 tijera")

#combate
if pc == jugador:
  print("EMPATE")
elif ((jugador == 1 and pc == 3) or (jugador == 2 and pc == 1)or (jugador == 3 and pc == 1)):
  print("GANASTE")
else:
  print("PERDISTE")
    

馃 Creo que logr茅 cumplir el reto
Estuve intentando por varios d铆as, finalmente llegu茅 una forma de 鈥渙ptimizar鈥 el c贸digo. Lo que hice fue unir las tres condicionales en una sola eliminando algunos pasos, aunque la desventaja es que no es pr谩ctico. Luego vi el aporte de Ronny ( @ronnyjm06 ), que de hecho ayud贸 a simplificar incre铆blemente el c贸digo por el uso de booleanos.
馃幃 Intenta jugarlo: https://fernanshay.github.io/rock-paper-scissor/

  • 1/4- Este es el c贸digo para el combate inspirado en la soluci贸n de Ronny 鈫

  • 2/4 - Y as铆 quedar铆a el c贸digo con las alertas de las selecciones (鈥渆legiste tijera鈥 鉁) 鈫

  • 3/4 - Y ahora este el c贸digo que yo hice, si lo observas con detenimiento es sencillo de entender 鈫

    Finalmente, descart茅 mi soluci贸n por ser poco pr谩ctica y me qued茅 con la soluci贸n de Ronny鈥

  • 4/4 - Este es el c贸digo completo junto al resultado 鈫

    Puedes ver el repositorio en GitHub, espero les guste mi aporte. 馃挌

eh aqui mi aporte馃檧:

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

    //FUNCION PARA MOSTRAR ELECCIONES
   function mostrar(turno,quien){
    if(turno==1) {
        alert(quien + "馃")
    }else if(turno==2) {
        alert(quien + "馃Щ")
    }else if(turno==3){
        alert(quien + "鉁")
    }else{
        alert("Elegiste perder")
    }
   }

   //FUNCION DE COMBATE Y RESULTADOS
   function combate(persona1,persona2){
    if(persona1==persona2) {
        alert("Es un empate 馃槩")
    }else if(persona1==1&&persona2==3 || persona1==2 && persona2==1||persona1==3 && persona2==2 ){
        alert("ganaste 馃槝")
    }else{
        alert("Perdiste 馃槩")
    }
   }

    //VARIABLES
    let jugador=0
    let pc=aleatorio(1,3)
    jugador=prompt("Elige: 1 para piedra, 2 es papel y 3 es tijera")
    
    //EJECUCION DEL ALGORITMO
   mostrar(jugador,"Elegiste: ")
   mostrar(pc,"El pc eligi贸: ")
   combate(jugador,pc)

Dejo mi aporte con menos l铆neas de c贸digo, saludos.

<!DOCTYPE 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 elige(ppt) {
            switch (ppt) {
                case 1:
                    alert("La PC elige 馃")
                    break
                case 2:
                    alert("La PC elige 馃摪")
                    break
                case 3:
                    alert("La PC elige 鉁傦笍")
                    break
            }
        }

        function combate(jugador, pc) {
            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")
            }
        }
        let pc = aleatorio(1, 3)
        let jugador = prompt("Elige 1 es piedra, 2 es papel, 3 es tijera")
        elige(pc)
        combate(jugador, pc)
    </script>
</head>

<body>
    <h1> Piedra, papel o tijera</h1>
</body>

</html>
if(jugador == pc){
            alert("Empate!!, juguemos nuevamente"
        }
        else if ((jugador == "馃" && pc == "馃摑") || (jugador == "馃摑" && pc == "鉁") || (jugador== "鉁" && pc == "馃")){
            alert("Has perdido!!")
        else if ((jugador == "馃" && pc == "鉁") || (jugador == "馃摑" && pc == "馃") || (jugador == "鉁" && pc == "馃摑")) {
            alert("Has ganado!!")
        }
        else{
            alert("PERDISTE!!")

Aqui mi aporte de codigo realizado en python

import random
jugador = 0
pc = 0
print("""Bienvenido al juego de piedra papel o tijeras
      Instrucciones para jugar:
      1 para piedra
      2 para papel
      3 para tijera
      """)
# Ingreso de datos
jugador = int(input("Ingresa un numero: "))

pc: int = random.randint(1,3)

print("Usted elgio ", jugador)
print("Pc eligio ", pc)

#inicio del juego
if jugador == pc:
      print("Esto fue un empate!")
elif jugador == 2 and pc == 1:
      print("Felicidades Ganaste!")
elif jugador == 1 and pc == 3:
      print("Felicidades Ganaste!")
elif jugador == 3 and pc == 2:
      print("Felicidades Ganaste!")
else:
      print("Perdiste")
<!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 elige(participante)
            {
                let mensaje = ""
                if(participante == 1){
                    mensaje = "馃"
                }
                else if(participante == 2){
                    mensaje = "馃搫"
                }
                else if(participante == 3){
                    mensaje = "鉁"
                }
                else{
                    mensaje = "PERDER"
                }
                return mensaje
            }
            // 1 es piedra, 2 es papel, 3 es tijera
            let jugador = 0
            let pc = aleatorio(1, 3)
            jugador = prompt("Elige: 1 para piedra, 2 para papel y 3 para tijera")
            //alert("Elegiste " + jugador)
            alert("Elegiste " + elige(jugador))
            alert("PC elige " + elige(pc))
            //COMBATE
            if(jugador == pc)
            {
                alert("EMPATE")
            }else if((jugador == 1 && pc == 3) || (jugador == 2 && pc == 1) || (jugador == 3 && pc == 2))
            {
                alert("GANASTE")
            }
            else{
                alert("PERDISTE")
            }
        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

Justo en el curso anterior quede donde explicaba lo de generar n煤meros aleatorios(clase 18), eso me quemo la cabeza :p. Ahora entiendo un poco mejor as铆 que genial, esta vez s铆 lo probare a ver que tal me sale.

Les comparto mi c贸digo humildemente, seguimos aprendiendo!

Siempre tuve la duda de como hacer que el computador escogiera algo al azar, en este caso los n煤mero y me parece excelente. Me voy a poner un poco creativo en el juego a ver que tal me va. De repente pedir al usuario que diga si va a jugar contra la computadora o un versus contra un amigo en la misma pc jajajaja

Excelente curso ya estaba pensando en retirarme de la programaci贸n

tiene toda la raz贸n cuando dice que es m谩gico, me cae tan Bien El profe 鈾ワ笍

Con lo que he aprendido as铆 me sali贸 mi c贸digo con la m铆nima cantidad de c贸digo

      //Variables globales del juego
      jugador = 0;
      pc = Math.floor(Math.random()*3)+1;

      //Capturar desici贸n
      jugador = prompt ("1.Piedra, 2.Papel, 3.Tijeras");

      //Proporcionar desiciones 
      if(jugador == 1)
      {
        alert("Escogiste piedra");
      }
      else if(jugador == 2)
      {
        alert("Escogiste papel");
      }
      else if(jugador == 3)
      {
        alert("Escogiste tijeras");
      }
      else
      {
        alert("Opci贸n no valida");
      }

      if(pc == 1)
      {
        alert("Pc escogi贸 piedra");
      }
      else if(pc == 2)
      {
        alert("Pc escogi贸 papel");
      }
      else if(pc == 3)
      {
        alert("Pc escogi贸 tijeras");
      }

      //Combate
      if(jugador != 1 && jugador != 2 && jugador != 3)
      {
        alert("Perdiste por defecto")
      }
      else if (jugador == pc)
      {
        alert("Empate");
      }
      else if ((jugador == 1 && pc == 2) || (jugador == 2 && pc == 3) || (jugador == 3 && pc == 1))
      {
        alert("Perdiste");
      }
      else
      {
        alert("Ganaste");
      }

Intente hacer un algoritmo de n煤meros aleatorios sin ver la clase.
Tal vez no es la mejor manera ni la m谩s eficiente, pero hice mi mejor intento.
驴Qu茅 opinan de mi c贸digo?

    let numeroMin = parseInt(prompt('pon el numero minimo'));
    let numeroMax = parseInt(prompt('pon el numero maximo'));
    let promedio = ((numeroMin + numeroMax)/2)*5;
    let numeroDefinitivo = numeroMax + 1;
    let condicion = false;

    while (condicion == false) {
        let aleatorio = Math.random();
        numeroDefinitivo = promedio*aleatorio;
        if(numeroMax > numeroDefinitivo && numeroDefinitivo > numeroMin){
            document.write(numeroDefinitivo + '</br>')
            condicion = true;
        }
        
    }

Fantastic!

  • Bueno esta es una opci贸n f谩cil pero algo enga帽osa pues el juego ya esta arreglado porque tu le das que opci贸n sacar al jugador y al pc. 馃槓
var jugador = "tijeras";
var cpu = "piedra";

if (jugador == cpu) {
    console.log("Perdiste");
} else if (jugador == "piedra" && cpu == "papel") {
    console.log("Perdiste");z
} else if (jugador == "papel" && cpu == "tijeras") {
    console.log("Perdiste");
} else if (jugador == "tijeras" && cpu == "piedra") {
    console.log("Perdiste");
} else {
    console.log("Ganaste");
}
  • Esta pues es casi lo mismo del video, solo que unas 6 lineas menos xd
var jugador = prompt("馃 es 1, 馃搩 es 2, 鉁傦笍 es 3. 驴Que eliges?");
var cpu = aleatorio(1, 3);

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

if(cpu == 1) {
  alert("La maquina eligio 馃")
} else if (cpu == 2) {
  alert("La maquina eligio 馃搩")
} else if (cpu == 3) {
  alert("La maquina eligio 鉁傦笍")
}

if (jugador == cpu) {
  alert("empate");
} else if (jugador == 1 && cpu == 2) {
  alert("Perdiste");
} else if (jugador == 2 && cpu == 3) {
  alert("Perdiste");
} else if (jugador == 3 && cpu == 1) {
  alert("Perdiste");
} else {
  alert("Ganaste");
}

![](https://static.platzi.com/media/user_upload/image-be87cfca-cf64-414d-b7cc-9843d81c2e1e.jpg)

De tan aleatorio que est谩, la m谩quina se pasa ganando jaja

Les presento mi aporte, es un ejercicio excelente para aprender lo b谩sico de programaci贸n.

Juega a piedra, papel o tijeras aqu铆

// Selecting elements
const result = document.getElementById('result_txt');
const modal = new bootstrap.Modal(document.getElementById('resultModal'));
const options = [null, document.getElementById("opt1"), document.getElementById("opt2"), document.getElementById("opt3")];
const pcOptions = [null, document.getElementById("pc1"), document.getElementById("pc2"), document.getElementById("pc3")];

// Function to set the display of options
function setDisplay(elements, display) {
  elements.forEach((element) => {
    if (element) {
      element.style.display = display;
    }
  });
}

// Function to handle the player's choice
function selection(opc) {
  if (opc >= 1 && opc <= 3) {
    setDisplay(options, 'none');
    setDisplay([options[opc]], 'block');
    humanOpt = opc;
  }
}

// Function to handle the PC's choice
function pcSelection() {
  const opc = pcChoice(1, 3);
  if (opc >= 1 && opc <= 3) {
    setDisplay(pcOptions, 'none');
    setDisplay([pcOptions[opc]], 'block');
    pcOpt = opc;
  }
}

// Function to generate a random PC choice
function pcChoice(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function game() {
  pcSelection();
  const human = humanOpt;
  const pc = pcOpt;
  console.log(`${human} vs ${pc}`);

  // Determine the game result
  if (human === pc) {
    result.textContent = "DRAW";
  } else if ((human === 1 && pc === 3) || (human === 2 && pc === 1) || (human === 3 && pc === 2)) {
    result.textContent = "HUMAN WINS";
  } else {
    result.textContent = "PC WINS";
  }

  setTimeout(() => {
    modal.show();
  }, 2000);
}
Cuando renuevo me dice escogiendo cualquier variable Pc elige: MAL ELEGIDO JUGADOR ELIGE: LO QUE ALL脕 ELEGIDO Y SIEMPRE PIERDO Y NO ENCUENTRO EL ERROR 馃槱
Utilizando lo aprendido hasta ahora, he modificado el c贸digo agregando una funci贸n que permite imprimir la elecci贸n del jugador, ya sea el humano o la maquina, logrando con 茅sto cumplir con el reto de reducir el c贸digo ![](https://static.platzi.com/media/user_upload/reduccion_code-bce8068e-8191-4998-b883-34731025e30b.jpg)![](https://static.platzi.com/media/user_upload/reduccion_code-6851cefa-c741-4a6d-994b-807c9940e8ca.jpg)

La verdad no se como hacerlo ams peque帽o ya que es mi primer contacto con programacion y no me quiere enredar con informacion que puede que me confunda 馃槩 pero aun asi lo intentare

Acabo de leer un comentario de que le costo entender, bueno a mi me costo tanto que hasta me quede dormida lo tuve que ver 2 veces pero realmente es bastante sencillo.

xd no te vallas

Yo tambi茅n us茅 el operador 鈥渙鈥 para hacerlo m谩s corto. Otra cosa ser铆a evitar usar la funci贸n aleatorio() como tal; si tienes en cuenta que las reglas del juego no van a cambiar, puedes usar la f贸rmula directamente al declarar la variable 鈥渓et pc = Math.floor(Math.random()*(3) + 1)鈥. No necesitas variables para min y max si estos valores no vana variar.

Agregu茅 un ciclo While para que te vuelva a pedir la opci贸n si es que ingresaste algo que no sea 1, 2 o 3.

PD: no tengo idea de c贸mo se suben im谩genes aqu铆 as铆 que 馃槮 disculpen que no ponga una captura jaja

Que vaina tan buena! aprender de esta manera! Genial!

solo puede optimizarlo 4 lineas menos
<script>
function aleatorio (min,max){
return Math.floor(Math.random() * (max - min + 1) + min)
};
let jugador = 0;
let pc = aleatorio(1,3)
jugador = prompt("elije 1 para Piedra 2 para Papel o 3 Para tijera ")
if(jugador == 1 ){
alert(鈥渆lejiste piedra鉁娾湂鈥)
}else if(jugador == 2 ){
alert(鈥渆lejiste papel鉁嬸煆烩湅馃徎鈥)
}else if(jugador == 3){
alert(鈥渆lejiste Tijera 鉁岎煆烩湆馃徑鈥)
}else{
alert(鈥渙pcion invalida鈥)
}
if(pc == 1 ){
alert(鈥減c elije鉁娾湂鈥)
}else if(pc == 2 ){
alert(鈥減c elije鉁嬸煆烩湅馃徎鈥)
}else if(pc == 3){
alert(鈥減c elije 鉁岎煆烩湆馃徑鈥)
}
if(jugador == pc){
alert(鈥淓mpate鈥)
}else if(jugador == 1 && pc == 3 || jugador == 2 && pc == 1 || jugador == 3 && pc == 2 ){
alert(鈥淕ANASTE鈥)
}else{
alert(鈥減erdiste鈥)
}

    </script>