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

Algoritmo avanzado de piedra, papel o tijera

9/84
Recursos

Ya construimos la base de nuestro juego de piedra, papel o tijera. Ahora pong谩moslo a funcionar. Esta es la segunda parte del ejercicio de programar un juego de piedra, papel o tijera que planteamos la clase anterior. Visita la clase si deseas ver c贸mo llegamos hasta aqu铆 馃槈

驴D贸nde nos quedamos?

Aqu铆 nos quedamos. Comp谩ralo con tu c贸digo, o construye el tuyo para continuar la clase 馃檪

馃挕 Ojo, no copies y pegues si no lo has hecho a煤n. Al contrario, aprovecha la oportunidad para practicar 馃槈

Sin embargo, si tienes problemas para visualizarlo por el tama帽o de la ventana, prueba copiandolo y pegandolo en un archivo HTML diferente al tuyo en Visual Studio Code. Ah铆 deber铆as poder verlo bien 馃憤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Algoritmo piedra, papel o tijera</title>
        <script>
            //OBTENIENDO LA ELECCI脫N DEL JUGADOR
            let eleccionDelJugador = 0;
            eleccionDelJugador = prompt( "Elige: 1 para piedra, 2 para papel, 3 para tijera" );
            // alert( "Elegiste " + jugador );

            //INFORMANDO LA ELECCI脫N DEL JUGADOR
            if ( eleccionDelJugador == 1 ) {
                alert( "Elegiste piedra" );
            } 
            else if ( eleccionDelJugador == 2 ) {
                alert( "Elegiste papel" )
            } 
            else if ( eleccionDelJugador == 3 ) {
                alert( "Elegiste tijera" )
            } 
            else {
                alert( "Elegiste otra cosa, as铆 no puedes jugar >-<" )
            }
        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

La elecci贸n de la computadora

Necesitamos un oponente para este juego, as铆 que primero debemos trabajar en la elecci贸n de la computadora.

L贸gico quieres que la computadora elija una opci贸n al azar para el juego. Pero eso lo construiremos en la clase de aleatoriedad 馃槈 Mientras tanto, usa comentarios y espacios para crear un apartado d贸nde escribiremos este c贸digo m谩s tarde; y escribe en una l铆nea que la computadora. Elige una de las tres opciones (puede ser la que t煤 quieras, con los n煤meros que empleamos para la elecci贸n del jugador).

驴Ya lo hiciste? Int茅ntalo por tu cuenta, y luego comp谩ralo con el c贸digo aqu铆 abajo 馃槈

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Algoritmo piedra, papel o tijera</title>
        <script>
            //OBTENIENDO LA ELECCI脫N DEL JUGADOR
            let eleccionDelJugador = 0;
            eleccionDelJugador = prompt( "Elige: 1 para piedra, 2 para papel, 3 para tijera" );
            // alert( "Elegiste " + jugador );

            //INFORMANDO LA ELECCI脫N DEL JUGADOR
            if ( eleccionDelJugador == 1 ) {
                alert( "Elegiste piedra" );
            } 
            else if ( eleccionDelJugador == 2 ) {
                alert( "Elegiste papel" )
            } 
            else if ( eleccionDelJugador == 3 ) {
                alert( "Elegiste tijera" )
            } 
            else {
                alert( "Elegiste otra cosa, as铆 no puedes jugar >-<" )
            }

            //OBTENIENDO LA ELECCI脫N DEL COMPUTADOR
            let eleccionDelComputador = 1;
			
        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

Anunciando la elecci贸n del computador

Antes de proceder, planteemos un momento como queremos que se produzca el juego:

  1. El juego pide su elecci贸n al jugador, y luego le informa cu谩l fue su elecci贸n.
  2. El juego asigna una elecci贸n a la computadora, y luego le informa al jugador la elecci贸n de la computadora.
  3. El juego eval煤a ambas elecciones, decide el ganador, y muestra un mensaje informando el veredicto.

Por lo tanto, ahora que la computadora ya eligi贸, crea un apartado que informe la elecci贸n de la computadora con un alert() 馃檪 crea un apartado para esto, y recicla el c贸digo que usaste para informar la elecci贸n del jugador para que muestre ahora la elecci贸n del computador 馃槈

馃挕 隆Por cierto! Tambi茅n puedes usar emojis en los mensajes. Puedes utilizarlos desde la emojipedia o, si est谩s en windows, puedes pulsar Win+鈥.鈥 para abrir la ventana de emojis 馃檪

Hazlo t煤 y pru茅balo en el navegador para validar que est茅 funcionando bien. Luego comp谩ralo con el c贸digo de abajo antes de continuar 馃槈

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Algoritmo piedra, papel o tijera</title>
        <script>
            //OBTENIENDO LA ELECCI脫N DEL JUGADOR
            let eleccionDelJugador = 0;
            eleccionDelJugador = prompt( "Elige: 1 para 馃, 2 para 馃搫, 3 para 鉁傦笍" );
            // alert( "Elegiste " + jugador );

            //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 馃槪" )
            }

            //OBTENIENDO LA ELECCI脫N DEL COMPUTADOR
            let eleccionDelComputador = 1;
			
            //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 馃檭" )
            }
			
        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

驴Qui茅n gana y qui茅n pierde?

Crea un nuevo apartado para saber si ganas o pierdes. All铆 debes escribir condiciones para evaluar:

  • Cu谩ndo empatas.
  • Cu谩ndo ganas.
  • Cu谩ndo pierdes.

Luego de evaluar esto, utiliza un alert() para informarle al jugador si gan贸, empat贸 o perdi贸 馃憤

馃挕 Ojo, puedes evaluar varias condiciones a la vez en un solo if si separas las condiciones con un &&. Por ejemplo:

if ( eleccionDelJugador = 1 && eleccionDelComputador = 3 ) {
    alert( "隆GANASTE! 馃コ" );
}

Empieza escribiendo la condici贸n de empate (que es la m谩s f谩cil) y luego escribe las dem谩s. Int茅ntalo, pru茅balo en el navegador, cambia la elecci贸n del computador para validar que en serio todo funciona, y luego compara tu c贸digo con el ejemplo de abajo 馃憤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Algoritmo piedra, papel o tijera</title>
        <script>
            //OBTENIENDO LA ELECCI脫N DEL JUGADOR
            let eleccionDelJugador = 0;
            eleccionDelJugador = prompt( "Elige: 1 para 馃, 2 para 馃搫, 3 para 鉁傦笍" );
            // alert( "Elegiste " + jugador );

            //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 馃槪" )
            }

            //OBTENIENDO LA ELECCI脫N DEL COMPUTADOR
            let eleccionDelComputador = 1;
			
            //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 馃檭" )
            }
			
            //DECIDIENDO EL GANADOR
            if ( eleccionDelJugador == eleccionDelComputador ) {
                alert( "隆EMPATE! 馃ぜ" );
            }
            else if ( eleccionDelJugador == 1 && eleccionDelComputador == 3 ) {
                alert( "隆GANASTE! 馃コ" );
            }
            else if ( eleccionDelJugador == 2 && eleccionDelComputador == 1 ) {
                alert( "隆GANASTE! 馃コ" );
            }
            else if ( eleccionDelJugador == 3 && eleccionDelComputador == 2 ) {
                alert( "隆GANASTE! 馃コ" );
            }
            else {
                alert( "PERDISTE... 馃槩" );
            }

        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

驴Te divertiste?

Existen muchos caminos para llegar a la misma soluci贸n. Puedes abordar el problema de varias formas y personalizarlo a tu gusto. Si te dio error en alg煤n lado, no te preocupes. Resolver errores en el c贸digo es la mitad del trabajo de un programador. Desarrolla tu tolerancia a la frustraci贸n, y t贸malo como parte del oficio.

Experimenta un poco con tu c贸digo, personal铆zalo y cuando est茅s listo contin煤a a la clase de aleatoriedad para que aprendas a hacer que la computadora elija por si misma lo que va a jugar 馃榿

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

Aportes 623

Preguntas 354

Ordenar por:

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

o inicia sesi贸n.

Para insertar emojis en VisualStudio:
Windows: Windows + . (punto)
Mac : Control + Command + Space

Existe una manera de simplificar los if statements y es usando (Voz tenebrosa activada) 鈥淎LGEBRAAAA鈥 y 鈥淢ATEMATICASSS鈥
.
Pero tranquilo o tranquila, la idea es sencilla: Restar los n煤meros del PC contra el jugador.
.
Hagamos un cuadro viendo c贸mo funciona el juego de esta forma:
.

Si podemos notar, 0 es empate, y los n煤meros -2 y 1 son cuando el jugador gana contra el PC (-1 y 2 ser铆an justo sus contrarios y ser铆a cuando el PC gana el combate).
.
Ahora con este descubrimiento podemos desarrollar en 2 if statements en vez de 3. El jugado gana si se obtiene 1 o -2 cuando restamos la variable su n煤mero contra el de la PC.
.
Nuestro c贸digo quedar铆a as铆:

if (jugador == pc) {
    alert("EMPATE") 
} else if ((jugador - pc) == 1) {
    alert("GANASTE")
} else if ((jugador - pc) == -2) {
    alert("GANASTE")
} else {
    alert("PERDISTE")
}

Ahora te preguntar谩s. 驴Pero esto no es un enredo para solucionar 1 l铆nea de c贸digo? Y la respuesta es que s铆 en este caso, pero en situaciones m谩s avanzadas de programaci贸n te vas a dar cuenta que usar matem谩ticas puede optimizar MUCHO tu trabajo y el de la computadora en el programa.
.
De no hacerlo te podr铆a quedar un c贸digo ineficiente, poco profesional y no escalable. (Cualidades que ninguna empresa quisiera ver)

Les dejo los emojis para que los peguen! 鉁傦笍 鉁 馃搫

Programar es aprender a manejar la frustraci贸n y no rendirse

Velocidad de desarrollo: Cuando tienes en VS Code un mont贸n de variables que se llaman igual como en el siguiente c贸digo (jugador), podr谩s cambiar todas estas variables al mismo tiempo con el comando: CTRL + D

if (jugador == 1) {
	alert("Elegiste piedra")
} else if (jugador == 2) {
	alert("Elegiste papel")
} else if (jugador == 3) {
	alert("Elegiste Tijera")
}

Mi primer video juego 鉂わ笍 muy pronto hare gta vII

Para tenerlo presente:

Un aportesito:
Cuando necesite cambiar la palabra jugador por pc lo hice sombreando la palabra jugador y despues con control + D podia sombrear la misma palabra hacia abajo, luego de sombreado se pueden cambiar a la palabra PC al mismo tiempo

Una de las opciones para que la pc elija de manera aleatoria una de las opciones es con:

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

Para agregar los emojis, descarguen en la extensi贸n directamente en Visual Studio Code , y luego de instalada es solo oprimir la tecla CONTROL + I

Y listo ya te aparece el listado de los emojis.

Mi peque帽o aporte, el unico cambio es en la condicion del combate, que engloba en un solo 鈥渋f鈥 las 3 maneras de ganar

隆Hola a todos! Para los que quieran agregar un salto de l铆nea dentro del Sting pueden hacerlo agregando
\n Dentro de su l铆nea de texto, por ejemplo:

jugador = prompt("馃枛隆Hola! ingresa el n煤mero de tu elecci贸n:\n馃 PIEDRA es 1, 馃搫 PAPEL es 2 y 鉁傦笍 TIJERA es 3")

Espero les sirva

En lugar de emojis le puse caras ASCII ( 汀掳 蜏蕱 汀掳) ( 藰 鲁藰) 鈾 鈼擾鈼 aunque ya no se cual es cual :,v

Programar es aprender a manejar la frustraci贸n y no rendirte

He aqu铆 mi c贸digo con las condicionales (del combate), lo 煤nico diferente es que lo decor茅 con unos emojis. 馃憣

Tengo mi hija de 13 a帽os con una discapacidad, no habla bien, Sue帽o con poder hacer o encontrar a un desarrollador que pueda hacer que el lenguaje de mi hija sea identificado por Alexa Amazon, porque ella se pone triste porque no le puede decir 鈥淎LEXA PRENDE LA LUZ鈥. -------------Ella dice 鈥淟ESHA PENDE US鈥, ----OJALA USTEDES CON SU GENIALIDAD PROGRAMADORA ANALIZARAN UN DESARROLLO PARA QUE CADA PALABRA DE UNA PERSONA COMO MI HIJA FUERA TRADUCIDA PARA QUE SE PUDIERA ENTENDER POR ALEXA AMAZON U OTRA. (espero haberme dado a entender)

馃馃摐鉁傦笍馃悵馃枛
Les comparto el codigo de la versi贸n de Piedra, Papel, Tijera, Lagarto Spock con consulta de volver a jugar y tambien pide ingresar el valor nuevamente si este fue puesto err贸neo.
Espero les guste, los leo en sus comentarios 馃槉.

<script>
      let player = 0;
      let pc = Math.floor(Math.random() * 5) + 1;

      function setPlayer() {
        return prompt(
          "Elije una opci贸n: 1 = piedra 馃, 2 = papel 馃摐, 3 = tijera 鉁傦笍, 4 = lagarto 馃悵, 5 = spock 馃枛"
        );
      }

      player = setPlayer();

      if (player == 1) {
        alert("Elegiste piedra 馃");
      } else if (player == 2) {
        alert("Elegiste papel 馃摐");
      } else if (player == 3) {
        alert("Elegiste tijera 鉁傦笍");
      } else if (player == 4) {
        alert("Elegiste lagarto 馃悵");
      } else if (player == 5) {
        alert("Elegiste spock 馃枛");
      } else {
        alert("Elige una opci贸n v谩lida");
        player = setPlayer();
      }

      if (pc == 1) {
        alert("El PC eligi贸 piedra 馃");
      } else if (pc == 2) {
        alert("El PC eligi贸 papel 馃摐");
      } else if (pc == 3) {
        alert("El PC eligi贸 tijera 鉁傦笍");
      } else if (pc == 4) {
        alert("El PC eligi贸 lagarto 馃悵");
      } else if (pc == 5) {
        alert("El PC eligi贸 spock 馃枛");
      } else {
        alert("El PC eligi贸 una opci贸n no v谩lida");
      }

      if (player == pc) {
        alert("Empate");
      } else if ((player == 1 && pc == 2) || (player == 1 && pc == 5)) {
        alert("Gana el PC");
      } else if ((player == 1 && pc == 3) || (player == 1 && pc == 4)) {
        alert("Gana el jugador");
      } else if ((player == 2 && pc == 1) || (player == 2 && pc == 5)) {
        alert("Gana el jugador");
      } else if ((player == 2 && pc == 3) || (player == 2 && pc == 4)) {
        alert("Gana el PC");
      } else if ((player == 3 && pc == 1) || (player == 3 && pc == 5)) {
        alert("Gana el PC");
      } else if ((player == 3 && pc == 2) || (player == 3 && pc == 4)) {
        alert("Gana el jugador");
      } else if ((player == 4 && pc == 1) || (player == 4 && pc == 3)) {
        alert("Gana el PC");
      } else if ((player == 4 && pc == 2) || (player == 4 && pc == 5)) {
        alert("Gana el jugador");
      } else if ((player == 5 && pc == 1) || (player == 5 && pc == 3)) {
        alert("Gana el jugador");
      } else if ((player == 5 && pc == 2) || (player == 5 && pc == 4)) {
        alert("Gana el PC");
      } else {
        alert("Elige una opci贸n v谩lida");
        player = setPlayer();
      }

      let answer = confirm("quieres jugar de nuevo?");
      if (answer == true) {
        window.location.reload();
      } else {
        alert("gracias por jugar");
      }
    </script>

Ahora dejen de avanzar el curso, abran un html en blanco y traten de realizar el ejercicio desde 0!!! M谩s pr谩ctica y menos avanzar por avanzar (y)

Una manera sencilla de hacer que la pc elija cualquiera de las tres opciones:

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

Yo si dec铆a que faltaba una opci贸n, pens茅 que estaba loca y me andaba matando la cabeza durante la primera parte de la clase.

PORQUE SE ADELANTAN? MEJOR HAGAN COMO MEJORAR EL CODIGO DE FREDDY QUE EXPONE EN ESTA CLASE , ALGUN APORTE IMPORTANTE O UN ATAJO CON LOS COMANDOS!
tiempo al tiempo que siempre hay algo mas que aprender de esta clase y no saben. Yo aprendi de los comentarios a introducir los emojis, a seleccionar varias veces la misma variable en todo el codigo( CTRL+D) o a reducir el codigo de freddy con ejemplos matematicos!

Con este codigo nos aseguramos que el PC escoge un numero entre 1 y 3 de forma aleatoria鈥

PC = Math.floor(Math.random() * (3 - 1 + 1) + 1)

Todas las combinaciones posibles son 9:
3 EMPATES se necesita un solo if:
3 GANASTE se necesita 3 else if:
3 PERDISTE se necesita 2 else if y un else:

Una vez le铆 un recurso acerca de esto ya que hay varias maneras de resolver o programar este problema y es lo hermoso de la programaci贸n y el pensamiento l贸gico.

Les dejo este excelente recurso

9 - Algoritmo avanzado de piedra, papel o tijera

<aside>
馃挕 +Agregar un emoji al c贸digo 鈫 WIN + .

</aside>

  • && 鈫 Operador l贸gico AND. devuelve true si ambas expresiones son true
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Piedra, papel o tijera</title>
    <script>
        // 1 es piedra, 2 es papel, 3 es tijera
        let jugador = 0
        let pc =  1
        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(jugador == 2){
            alert("PC elije 馃Щ")
        } else if(jugador == 3){
            alert("PC elije 鉁")
        } else{ // Si elije otra opcion que no 1sea 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>

Chicos nuevos como yo para los que han tenido problemas para memorizar les dejo unos tips que esta incluso en un video del mismo Fredy, 1. procuren hacer los ejercicios vistos en clase varias veces sin mirar apuntes. 2.hacer examenes libres de respuestas abiertas y 3. ense帽ar a otros lo aprendido, yo entre a comunidades de facebook de personas que quieren aprender a programar, hay otros tips que ya tienen que ver con dormir bien. hacer ejercicio y leer en voz alta, incluso formar canciones de las lecciones pero para este tema me han servido mas las 3 que les comente.

Buen d铆a a todos, mi algoritmo en la parte de combate me qued贸 as铆:

//combate
if (jugador == pc){
                alert("empate 馃槀馃槀馃槀馃槀")
            } else if (jugador == 3 && pc == 1){
                alert("perdiste馃槶馃樋馃槩")
            } else if(jugador == 1 && pc == 3){
                alert("T煤 ganaste 馃槑馃槑馃帀馃帀")
            }else if (jugador > pc){
                alert("T煤 ganaste 馃槑馃槑馃帀馃帀")
            } else{
                alert("perdiste馃槶馃樋馃槩")
            }

<!DOCTYPE html>
<html>
<head>
<meta charset=鈥渦tf-8鈥 />
<title> Piedra papel o tijeras</title>
<script>

        let jugador = 0;
        let pc = 1;

        jugador = prompt("Elije: 1 es piedra, 2 es papel, 3 es tijera: ");

        //jugador
        if(jugador == 1){
            alert("elejiste piedra");
        } else if(jugador == 2){
            alert("elejiste papel");
        } else if(jugador == 3){
            alert("elejiste tijera");
        } else {
            alert("Escoge bien aweonao!!!");            
        }

        //pc
        if(pc == 1){
            alert("pc eligi贸 piedra");
        } else if(pc == 2){
            alert("pc eligi贸 papel ");
        } else if(pc == 3){
            alert("pc eligi贸 tijera");
        }

        //jjuego
        if ((jugador == 1 && pc == 1) || (jugador == 2 && pc == 2) || (jugador == 3 && pc == 3)  ) {
            alert("Empataste cabr贸n");
        } else if ((jugador == 3 && pc == 2) || (jugador == 2 && pc == 3) || (jugador == 2 && pc == 1) )    {
            alert("Ganaste hijo de tu puta madre");
        } else {
            alert("Perdiste");
        }
        
    </script>
</head>
<body>
    <h1>Piedra, papel o tijeras</h1>

</body>

</html>

Dejo mi aporte con una soluci贸n m谩s corta, 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>

Les contar茅 algo gracioso que me pas贸 en esta clase, llegu茅 al momento donde defini贸 las dos opciones de ganar y mi l贸gica dec铆a que faltaba una, pens茅 鈥渁lgo no estoy viendo鈥 y paus茅, cog铆 mi libreta y me puse a jugar en mi cuaderno cada caso con un diagrama de flujo, apuntaba a que ten铆a raz贸n, pero dec铆a Freddy " ya est谩" y no lo entend铆a, luego de como media hora de hacer pruebas en el navegador me di por vencido y segu铆 viendo el v铆deo y efectivamente faltaba un caso, jsjsjsjs gracias por su atenci贸n. NUNCA PAREN DE APRENDER 鉂わ笍

Les comparto lo que puse de combate, usando <||> que en javaScript significa 鈥渙鈥 igual como el <&&> significa 鈥測鈥

//combate
        if (pj == pc) {
            alert("Empate")
        } else if (pj == 1 && pc == 3 || pj == 2 && pc == 1 || pj == 3 && pc == 2) {
            alert("Ganaste!!")
        } else {
            alert("Perdiste :(")
        }

Una de las opciones que se me ocurrio para hacer mas corta la parte de victorias y derrotas fue la siguiente
if(pc==jugador){
alert(鈥淓mpate鈥)
}else if((jugador == 1 && pc == 3) || (jugador == 2 && pc == 1) || (jugador == 3 && pc == 2)) {
alert(鈥済anaste鈥)

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

Lo que hice fue poner cada uno de los if en uno solo, tanto para la variable jugador como la de pc, haciendo uso del operador logico 鈥渙r鈥

BUEN DIA COMPA脩EROS VAMOS QUE S SE PUEDE

OPERADORES DE JAVASCRIPT

Es importante que memorices los operadores en JavaScript.
El profesor Freddy usa el operador &&, que pertenece a los operadores l贸gicos y significa Y o AND.

Puedes aprender sobre los operadores de JavaScript aqu铆:
Operadores de JavaScript

O investiga y aprende donde te parezca m谩s c贸modo 馃槉

Esta es la forma que yo encontr茅 驴Es correcto usar el if de esa menera o solo importa el resutado?

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

Lo importante en la programaci贸n es que se obtenga el resultado esperad.

La forma y el camino que se tome no importa, todos estar谩n bien mientras el resultado sea el correcto鈥

Una propuesta de algoritmo para el juego Piedra-Papel-Tijera en formato multijugador para la web.

soy un ni帽o de 11 a帽os y me husta programar y con esto es muy facil nunca pares de aprender

Hola soy Pietro de Argentina, tengo 12 a帽os y me gustan mucho los videos explicativos, explican muy bien.
Gracias 馃槂鈥

En Linux tengo instalado en KDE Neon la app Selector de emojis. 馃槺馃挕馃帀

Este te da la opcion de corregir tu decision si habias elegido otra opcion o te deja irte

<code> 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Piedra, papel o tijera</title>
    <script>
        //1 es piedra, 2 es papel, 3 en tijera 
        let jugador = 0
        let pc = 2
        jugador = prompt("Elige: \n1.-Piedra\n2.-Papel\n3.-Tijera")
        do{
                if(jugador == 1) {
                    alert("Elegiste piedra")
                } else if(jugador == 2) {
                    alert("Elegiste papel")
                } else if(jugador == 3)  {
                alert("Elegiste tijera")
                } else {
                    jugador = prompt("La opcion no es valida, por favor elija una de las siguientes.\n1.-Piedra\n2.-Papel\n3.-Tijera\n4.-Es que no quiero jugar")
                }
             }
             while(jugador<1||jugador>4);//verifica que el jugador haya elegido una de las opciones o la opcion de salirse
if(jugador!=4){      //Si el jugador eligio salirse el juego no sigue y se despide
        if(pc == 1) {
            alert("PC eligio piedra")
        } else if(pc == 2) {
            alert("PC eligio papel ")
        } else if(pc == 3)  {
        alert("PC eligio tijeras")
        }

        //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")
        }
    } 
    else
    alert("Adios")
            
        
    </script>
</head>
<body>
    <h1>Piedra, papel o tijera</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset=鈥渦tf-8鈥 />
<title>Piedra, papel o tijeras</title>
<script>
//1 piedra, 2 papel, 3 tijera
let jugador = 1
let pc = 2
jugador = prompt(鈥淓lige: 1 para piedra, 2 para papel, 3 para tijera鈥)
//alert("Elegiste " + jugador)
if(jugador == 1) {
alert(鈥淓legiste 鉁娾)
} else if(jugador == 2) {
alert(鈥淓legiste 馃枑鈥)
} else if (jugador == 3) {
alert(鈥淓legiste 鉁屸)
} else {
alert(鈥淓legiste PERDER馃拃鈥)
}
if(pc == 1) {
alert(鈥淧C elige 鉁娾)
} else if(pc == 2) {
alert(鈥淧C elige 馃枑鈥)
} else if (pc == 3) {
alert(鈥淧C elige 鉁屸)
}
//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 馃拃鈥)
}
</script>
</head>
<body>
<h1>Piedra, papel y tijera</h1>
</body>
</html>

La soluci贸n a la que llegu茅 con todo el apoyo del team 鉂わ笍

Para quien lo quiera que no deje pasar hasta que no elija la opcion correcta

<code> 
do{
   jugador =prompt("Elige 1 es piedra, 2 es papel, 3 es tijera")
   switch (jugador) {
   case "1":
      tjugador="Piedra 鉁"
      jugador=1
      break;
   case "2":
      tjugador="Papel 鉁"
      jugador=2
      break;
   case "3":
      tjugador="Tijera 鉁岋笍"
      jugador=3
      break;
   default:
      jugador=0
      break;
    }
 }while (jugador==0)
alert("elegiste "+tjugador)

A mi tambien me gusto programarlo con restas, se hace compacto usando lo que hemos visto hasta esta clase. ( y aun le falta) 馃槑

Vengo del futuro 馃

Le hice dos cambios importantes, el primero separe el html del java script y lo otro es que simplifique en un if la opcion de ganar.

        if(pc==jugador){
            alert('EMPATE');
        }  else if(jugador==1 && pc==3 || jugador==2 && pc==1 || jugador==3 && pc==2){
            alert('GANASTE!');
        } else{
            alert('PERDISTE');
        }

Lo unico quie pude reducir en el codigo fue el de combate 馃槮, dure pensando como reducir todo el codigo se me hizo dificil.

Hola comunidad, hice un ajuste agregando una condicional para volver a comenzar sin darle recargar, se que es f谩cil tambi茅n darle Ctrl + r o F5 pero creo es una buena practica , adem谩s de aprender que con la clase location.reload() traes la funci贸n reload que nos permite recargar la pagina.

as铆 quedo el c贸digo:

//preguntar si desea seguir jugando
            let jugar = prompt("Ingrese 1 Jugar de nuevo, 2 Dejar de jugar")
            if (jugar == 1){
                alert("El juego c贸menzara nuevamente")
                location.reload()
            }else if (jugar==2){
                alert("Gracias por jugar , si desea jugar nuevamente recargue la pagina nuevamente con F5 o Ctrl + r")
            }

tambi茅n note que se puede asignar valores o prompt en el momento en que creas la variable con 鈥渓et鈥

if (pc==jugador){
        alert("EMPATE")
       }else if(pc>jugador){
        alert("PERDISTE")
       }else if(pc<jugador){
        alert("HAS GANADO")
       }

Entonces las reglas del algoritmo son las siguientes:

  1. Si el jugador elige lo mismo que el PC (EMPATE)
  2. Si 茅l,
    Jugador elige: [PIEDRA] [PAPEL] [TIJERA]
    Y el PC elige: [TIJERA] [PIEDRA] [PAPEL]
    EL JUGADOR GANA
  3. Si no (EL JUGADOR PIERDE)
  • En este caso lo hice solo con JS por medio de la consola, seria solo cambiarle las variables de arriba, para recorrer los diferentes resultados del juego 馃槃
var jugador = "tijeras";
var cpu = "piedra";

if (jugador == cpu) {
    console.log("Empate");
} else if (jugador == "piedra" && cpu == "papel") {
    console.log("Perdiste");
} else if (jugador == "papel" && cpu == "tijeras") {
    console.log("Perdiste");
} else if (jugador == "tijeras" && cpu == "piedra") {
	console.log("Perdiste");
} else {
    console.log("Ganaste");
}

Me pasaba que cuando escribia otra opcion diferente a 1, 2 o 3 me mandaba al else de perdiste y luego procedia a decir que eligio el pc y el combate, para solucionarlo puse un end en el else de perdiste para termionar el programa y que no siguiera ejecutando, recordemos que el codigo en este caso se lee de arriba a abajo y si nada lo detiene sigue ejecutando.
Saludos!!!

Consejo no solicitado: Usen Git, este curso es largo y uno la puede embarrar, se vuelve feo y frustrante cuando el c贸digo funciona en los videos de los profes y en el caso de uno no. Git es una herramienta para controlar las versiones y ver donde se hizo un cambio para saber espec铆ficamente que est谩 mal. Asi que nada, usen Git para este curso

Casi se me revienta una vena del cerebro de la rabia que me daba ver que no estaba funcionando y Freddy segu铆a diciendo que estaba todo bien. Despu茅s de tanto devolver el v铆deo decid铆 seguir viendo y ah铆 si confirmo lo que yo dec铆a.

Eso me lleno de m谩s confianza en m铆.

Mi aporte, primero lo realic茅 y despu茅s vi el video de la clase.

    <script>
        // 1 Rock, 2 Paper, 3 Scissors
        let optionPlayer = 0
        let pc = 1

        namePlayer = prompt("驴Cu谩l es tu nombre?")
        optionPlayer = prompt("Bienvenido: " +namePlayer + "\nElije una opci贸n: 1: Piedra, 2: Papel, 3; Tijera.")
        //Options player 
        if (optionPlayer == 1) {
            alert(namePlayer + " escogi贸: 馃.")
        }else if (optionPlayer == 2) {
            alert(namePlayer + " escogi贸: 馃Щ.")
        }else if (optionPlayer == 3) {
            alert(namePlayer + " escogi贸: 鉁傦笍.")
        }else{
            alert("隆PERDISTE!\n No seleccionaste una opci贸n valida")
        }
        //Option PC
        if (pc == 1) {
            alert("La PC es: 馃.")
        }else if (pc == 2) {
            alert("La PC es: 馃Щ.")
        }else if(pc == 3){
            alert("La PC es: 鉁傦笍.")
        }
        /*Versus*/
        if(optionPlayer == 1 && pc == 2 || optionPlayer == 2 && pc == 3 || optionPlayer == 3 && pc == 1){
            alert("隆PERDISTE!")
        }else if(optionPlayer == 1 && pc == 3 || optionPlayer == 3 && pc == 2 || optionPlayer == 2 && pc == 1){
            alert("隆GANASTE!")
        }else if(pc == optionPlayer){
            alert("Empate")
        }
    </script> 

uni todos los casos donde el jugador pierde en una linea de codigo y en otra donde el jugador gana use un solo alert y me ayude con el operador logico or

Mi modificaci贸n en el c贸digo:

//JUEGO
            if (jugador==pc){
                alert("EMPATE")
            }
            else if(jugador ==1 && pc ==2 || jugador==2 && pc ==3 || jugador==3 && pc ==1){
                alert("PERDISTE")
            }
            else if(jugador ==1 && pc ==3 || jugador==3 && pc ==2 || jugador==2 && pc ==1){
                alert("GANASTE")
            }

Si al igual que yo, les gusta The Big Bang Theory y pensaron en Sheldon Cooper con este juego, ah铆 esta Roca, Papel, Tijeras, Rata o Spock

<!DOCTYPE html>
<html>
<head>
<meta charset = utf-8 />
<title>

    </title>
    <script>
        // 1 es Piedra, 2 es Papel, 3 es Tijeras, 4 es Rata, 5 es Spock
        let jugador = 0 
        let pc = 3
        let nombre = ""
        nombre = prompt("Vamos a jugar Piedra, Papel, Tijeras, Rata o Spock, Cu谩l es tu nombre?")
        alert("Bienvenidx " + nombre + ", Lets go")
        jugador = prompt("Elige: 1 para Pierda, 2 para Papel, 3 para Tijeras, 4 para Rata, 5 para Spock")
        //alert("Elegiste " + jugador)
        if(jugador == 1) {
            alert("Elegiste 馃")
        }
        if(jugador == 2) {
            alert("Elegiste 馃搫")
        }
        if(jugador == 3) {
            alert("Elegiste 鉁")
        }
        if(jugador == 4) {
            alert("Elegiste 馃悁")
        }
        if(jugador == 5) {
            alert("Elegiste 馃枛")
        }
        if(pc == 1) {
            alert("PC elige  馃")
        }
        if(pc == 2) {
            alert("PC elige 馃搫")
        }
        if(pc == 3) {
            alert("PC elige 鉁")
        }
        if(pc == 4) {
            alert("PC elige 馃悁")
        }
        if(pc == 5) {
            alert("PC elige 馃枛")
        }
        // COMBATE
        if(pc == jugador) {
        alert("EMPATE")
        }
        if(jugador == 1 && pc == 3) {
        alert("GANASTE")
        }
        if(jugador == 1 && pc == 2) {
        alert("PERDISTE")
        }
        if(jugador == 1 && pc == 4) {
        alert("GANASTE")
        }
        if(jugador == 1 && pc == 5) {
        alert("PERDISTE")
        }
        if(jugador == 2 && pc == 1) {
        alert("GANASTE")
        }
        if(jugador == 2 && pc == 3) {
        alert("PERDISTE")
        }
        if(jugador == 2 && pc == 4) {
        alert("PERDISTE")
        }
        if(jugador == 2 && pc == 5) {
        alert("GANASTE")
        }
        if(jugador == 3 && pc == 1) {
        alert("PERDISTE")
        }
        if(jugador == 3 && pc == 2) {
        alert("GANASTE")
        }
        if(jugador == 3 && pc == 4) {
        alert("GANASTE")
        }
        if(jugador == 3 && pc == 5) {
        alert("PERDISTE")
        }
        if(jugador == 4 && pc == 1) {
        alert("PERDISTE")
        }
        if(jugador == 4 && pc == 2) {
        alert("GANASTE")
        }
        if(jugador == 4 && pc == 3) {
        alert("PERDISTE")
        }
        if(jugador == 4 && pc == 5) {
        alert("GANASTE")
        }
        if(jugador == 5 && pc == 1) {
        alert("GANASTE")
        }
        if(jugador == 5 && pc == 2) {
        alert("PERDISTE")
        }
        if(jugador == 5 && pc == 3) {
        alert("GANASTE")
        }
        if(jugador == 5 && pc == 4) {
        alert("PERDISTE")
        }
    </script>

</head>
<body>
    <h1>Piedra, Papel. Tijeras, Rata o Spock</h1>
</body>

</html>

"Programar es aprender a manejar la frustraci贸n y no rendirte." Freddy Vega

y en HTML quedar铆a algo as铆 jeje.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Dise帽o.css">
    <link rel="shortcut icon" href="icono.png">
    <title> JUEGO PIEDRA PAPEL Y TIJERA</title>
</head>
<body>
    <h1> JUEGO PIEDRA , PAPEL Y TIJERA 馃  馃搩  鉁傦笍  </h1>
    <br />
    <center> <img src="gamergif.png" class="imagen-gif" alt="imagen-game" /> </center>
    <script src="juego.js"> </script>
    <h2 class="texto"> GRACIAS POR JUGAR. </h2>
</body>

</html>

no se olviden de revisar antes de ejecutar una comparacion que si querer borre un " = " y estuve 15 minutos buscando que fue lo que hice mal xD

Con ustedes la nueva actualizaci贸n PIEDRA, PAPEL, TIJERA , LAGARTO, SPOCK

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Piedra, Papel, Tijera, Lagarto, Spock</title>
        <script>
            // 1 es piedra, 2 es papel y 3 es tijera
            let jugador = 0
            let pc = 2
            // prompt es como el alert que recibe info
            jugador = prompt(" Elige 1 para PIEDRA, 2 para PAPEL, 3 para TIJERA, 4 para LAGARTO, o 5 para SPOCK")
             //alert("Elegiste "+jugador)
            if(jugador == 1) {
                alert("Elegiste PIEDRA馃")
            } else if(jugador == 2) {
                    alert("Elegiste PAPEL 馃搫")
            } else if(jugador == 3){
                    alert("Elegiste TIJERAS 鉁傦笍")
            } else if(jugador == 4){
                    alert("Elegiste LAGARTO 馃")
            }else if(jugador == 5){
                    alert("Elegiste SPOCK 馃枛")
            } else {
                alert("PERDISTE")
            }

            if(pc == 1) {
                alert("PC elige PIEDRA 馃")
            } else if(pc == 2) {
                    alert("PC elige PAPEL 馃搫")
            } else if(pc == 3){
                    alert("PC elige TIJERAS 鉁傦笍")
            }else if(pc == 4){
                    alert("PC elige LAGARTO 馃")
            }else if(pc == 5){
                    alert("PC elige SPOCK 馃枛")
            } else {
                alert("PERDISTE")
            }
           // COMBATE
           if (pc == jugador){
                alert("EMPATE")
           } else if (jugador == 1 && (pc == 3 || pc == 4)){
                alert("GANASTE")
           } else if (jugador == 2 && (pc == 1 || pc == 5)){
                alert("GANASTE")
           } else if (jugador == 3 && (pc == 2 || pc == 4)){
                alert("GANASTE")
           } else if (jugador == 4 && (pc == 5 || pc == 2)){
                alert("GANASTE")
           } else if (jugador == 5 && (pc == 3 || pc == 1)){
                alert("GANASTE")
           } else {
                alert("PERDISTE")
           }
        </script>
    </head>
    <bosy>
        <h1>Piedra, Papel, tijera, Lagarto, Spock</h1>

    </bosy>
</html>

Esta seria mi versi贸n, me costo un poco al principio pero al final logr茅 hacerlo sin ayuda:

<script>
//1 para piedra, 2 para papel y 3 para tijera
let jugador = 0
let pc = 3
jugador = prompt(鈥淓lige 1 para piedra, 2 para papel y 3 para tijera鈥)
if(jugador == 1) {
alert(鈥淓legiste piedra 馃П鈥)
} else if(jugador == 2) {
alert(鈥淓legiste papel 馃搫鈥)
} else if(jugador == 3) {
alert(鈥淓legiste tijera 鉁傗)
} else {
alert(鈥淧or favor introduzca alguno de los d铆gitos indicados鈥)
} if(pc == 1) {
alert(鈥淧C elige piedra 馃П鈥)
} else if(pc == 2) {
alert(鈥淧C elige papel 馃搫鈥)
} else if(pc == 3) {
alert(鈥淧C elige tijera 鉁傗)
}
//combate
if(jugador == pc) {
alert("隆Es un empate! 馃憤")
} else if(jugador == 1 && pc == 3) {
alert("隆Ganaste! 馃帀馃檶")
} else if(jugador == 3 && pc == 2) {
alert("隆Ganaste! 馃檶馃帀")
} else if(jugador == 2 && pc ==1) {
alert("隆Ganaste! 馃檶馃帀")
} else {
alert("隆Perdiste! 馃槩")
}
</script>

yo solo le agregue el vuelve a intentarlo y los emojis :3

![](

Programar es aprender a manejar la frustraci贸n y no rendirte.

Existen miles de formas de resolver un problema y esa es la magia de la programaci贸n, que nunca hay un solo camino. Experimenta 馃槂

const TIJERA = 3;
const PAPEL = 2;
const PIEDRA = 1;

/** @type {number} jugador */
let jugador = 0;
/** @type {number} pc */
let pc = getRandomInt(3);

jugador = Number(prompt("Elige:1 piedra, 2 papel, 3 tijera"));

let selectedNameJugador = optionSelectByThePlayer(jugador);
alert(`Elejiste ${selectedNameJugador}`);

let selectedNamePC = optionSelectByThePlayer(pc);
alert(`PC elige ${selectedNamePC}`);

if (jugador === pc) {
  alert("Empate");
} else if (jugador == PIEDRA && pc == TIJERA) {
  alert("GANASTE");
} else if (jugador == PAPEL && pc == PIEDRA) {
  alert("GANASTE");
} else if (jugador == TIJERA && pc == PAPEL) {
  alert("GANASTE");
} else {
  alert("Perdiste");
}
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

/** @param {number} player */
function optionSelectByThePlayer(player) {
  let optionSelect = "";
  switch (player) {
    case PIEDRA:
      optionSelect = "馃";
      break;
    case PAPEL:
      optionSelect = "馃摪";
      break;
    case TIJERA:
      optionSelect = "鉁";
      break;
    default:
      alert("Elejiste perder");
      throw new Error("PERDER");
  }
  return optionSelect;
}

excelente forma de desarrollar el ejercicio para entenderlo y sobre todo por que pasan las cosas.
1 dise帽o mi algoritmo
2 lo llevo a practica
3 pruebo mis resultados
4 verifico si algo falta en poner.
5 hacer cambios pertinentes.

o no!!! Perdiste jajajaj que buen curso.

Despu茅s de un rato de estar investigando como insertar emojis en VS CODE en ubuntu, esta es la soluci贸n que me funcion贸 a m铆:

  • Instalar la extensi贸n :emojisense:
  • Dentro de las configuraciones de la extensi贸n hay que editar el archivo 鈥渟ettings.json鈥, dentro de los lenguajes hay que agregar html y LISTO!
    NOTA: Es importante prestar atenci贸n a la coma despu茅s de git-commit para indicar que html se trata de otro lenguaje.
  • El archivo deber铆a quedar tal que as铆:
{
    "workbench.colorTheme": "Solarized Dark",
    "emojisense.languages": {
        

        "markdown": true,
        "plaintext": {
            "markupCompletionsEnabled": false,
            "emojiDecoratorsEnabled": false
        },
        "scminput": true,
        "git-commit": true,
        "html": true
    }
}

Mi c贸digo

let user_choose = prompt('Elige opci贸n 1: Piedra, 2: Papel, 3: Tijera');
let option = {1:'Piedra',2:'Papel',3:'Tijera'};

let pc_choose = Math.floor(Math.random() * Object.keys(option).length+1);
alert(option[user_choose]);
alert(option[pc_choose]);

function play(user_choose, pc_choose) {
    if (user_choose == pc_choose) {
        return 'Equals';
    } else if (user_choose == 1 && pc_choose == 2) {
        return 'PC winner';
    } else if (user_choose == 2 && pc_choose == 3) {
        return 'PC winner';
    } else if (user_choose == 3 && pc_choose == 1){
        return 'PC winner';
    } else {
        return 'User winner';
    }
}
alert(play(user_choose,pc_choose));2

Este es mi codigo

<!DOCTYPE html>
<head>
<meta charset=鈥渦tf-8鈥>
<title>Piedra, papel o tijera</title>
<script>
let jugador = 0
let pc = 2
jugador = prompt(鈥淓lige 1 si es piedra, 2 si es papel, 3 si es tijera鈥);

if(jugador == 1) {
alert(鈥淓legiste piedra鈥)
}else if(jugador == 2) {
alert(鈥淓legiste papel鈥)
}else if(jugador == 3) {
alert(鈥淓legiste tijera鈥)
}

if(pc == 1) {
alert(鈥淧C eligio piedra鈥)
}else if(pc == 2) {
alert(鈥淧C eligio papel鈥)
}else if(pc == 3) {
alert(鈥淧C eligio tijera鈥)
}

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>

</head>
<body>
<h1>Mi primer juego</h1>
<p>Juguemos a piedra, papel o tijera</p>
</body>

![](

para sacar los emojis a mi me toco oprimir la tecla Windows sostenida con el . ahi sale un cuadro de dialogo donde podia escribir que emoji queria, y como tengo antes del <head> la etiqueta <html lang=鈥渆s鈥> puedo escribir el emoji que necesitaba en espa帽ol

    let pc = parseInt(Math.ceil(Math.random() * 3));

Con esto puede hacer que saliera cualquier opci贸n, por si alguien m谩s tambi茅n lo quiere hacer

Que pasa si elijo un 4? Como hacer para que se pueda volver a elegir sin que los de m谩s comandos se sigan ejecutando

Pero falto otra condici贸n si elijo bot贸n Cancelar, me responde elegiste Perder, y seleccionas bot贸n Aceptar, te dice PC elige Papel le nuevamente seleccionas Aceptar y responde PERDISTE鈥 ahi seria cachar los valores Prompt yo pensar铆a que todo lo diferente de 1,2,3 NO entra en el IF, pero no es asi.

Les comparto mi c贸digo, saludos.

<html>

<head>
    <meta charset="utf-8" />
    <title>Piedra, Papel o Tijera</title>

    <script>

        //Proceso de Elecci贸n del Jugador
        do {
            var eleccionUsuario = prompt("Bienvenido. Escoja su arma: \n(1) <--> Piedra  \n(2) <--> Papel  \n(3) <--> Tijera \n(0) <--> Salir");
            switch (parseInt(eleccionUsuario)) {
                case 1: alert("Escogi贸 Piedra")
                    break;

                case 2: alert("Escogi贸 Papel")
                    break;

                case 3: alert("Escogi贸 Tijera")
                    break;

                case 0: alert("Gracias por jugar")
                    break;

                default: alert("Su opci贸n no es v谩lida, ingrese un n煤mero del 1 al 3");
                    break;
            }

            //Proceso de Elecci贸n de la Computadora
            if (eleccionUsuario == 1 || eleccionUsuario == 2 || eleccionUsuario == 3) {
                var eleccionPC = Math.floor(Math.random() * (3 - 1 + 1) + 1);
                switch (eleccionPC) {

                    case 1: alert("La M谩quina escogi贸 Piedra");
                        if (eleccionUsuario == 1) {
                            alert("Hay un empate");
                        }
                        else if (eleccionUsuario == 2) {
                            alert("Ganaste");
                        }
                        else if (eleccionUsuario == 3) {
                            alert("Perdiste");
                        }
                        break;

                    case 2: alert("La M谩quina escogi贸 Papel");
                        if (eleccionUsuario == 2) {
                            alert("Hay un empate");
                        }
                        else if (eleccionUsuario == 3) {
                            alert("Ganaste");
                        }
                        else if (eleccionUsuario == 1) {
                            alert("Perdiste");
                        }
                        break;

                    case 3: alert("La M谩quina escogi贸 Tijera");
                        if (eleccionUsuario == 3) {
                            alert("Hay un empate");
                        }
                        else if (eleccionUsuario == 1) {
                            alert("Ganaste");
                        }
                        else if (eleccionUsuario == 2) {
                            alert("Perdiste");
                        }
                        break;
                }
            }
        } while (eleccionUsuario != 0);

    </script>
</head>

<body>
</body>

</html>
PROGRAMAR ES APRENDER A MANEJAR LA FRUSTRACI脫N Y NO RENDIRTE

se me ocurri贸 hacerlo as铆 :>

AQUI UNA MANERA DE HACERLO

//@evhernandezh
//Entrada del usuario
let usuario = prompt("Seleciona una opcion: 1 = PIEDRA, 2 = PAPEL, 3 = TIJERA");

//Seleccion aleatoria de la maquina.
let machine = Math.ceil(Math.random()*3)

//Mostrar la seleccion de los participantes
if(usuario == 1){
  alert("Elegiste > 馃憡PIEDRA馃憡")
} else if(usuario == 2){
  alert("Elegiste > 馃PAPEL馃")
} else if(usuario == 3){
  alert("Elegiste > 鉁孴IJERA鉁")
} else {
  alert("Tu selecci贸n no es valida: PERDISTE")
}
//Eleccion de la MAQUINA.
if(machine == 1){
  alert("Bot eligio > 馃憡PIEDRA馃憡")
} else if(machine == 2){
  alert("Bot eligio > 馃PAPEL馃")
} else if(machine == 3){
  alert("Bot eligio > 鉁孴IJERA鉁")
} else {
  alert("Bot genero error: El usuario gana!")
}

//PELEA
if(usuario == machine){
  alert("EMPATE");
} else if (usuario == "1" && machine == "3"){
  alert("Usuario GANA!");
} else if (usuario == "2" && machine == "1"){
  alert("Usuario GANA!");
} else if (usuario == "3" && machine == "2"){
  alert("Usuario GANA!");
} else {
  alert("Bot WIN!");
}

//FIN DEL JUEGO

Pueden agregar un 鈥渆xit()鈥 para que el programa termine justo despu茅s de mostrar el mensaje 鈥淓legiste PERDER鈥, en caso de que el usuario agregue cualquier otro valor que no sea 1, 2 o 3:

Hola, mil gracias por este curso, es un gran inicio, comprim铆 un poco el codigo y funciono, se los comparto

if(pc == 1)
{alert(鈥減c elige piedra馃鈥)}
else if ( pc ==2)
{alert(鈥減c elige papel馃Щ鈥)}
else if ( pc ==3)
{alert(鈥減c elige tijera鉁傦笍鈥)}
//COMBATE
if (pc == jugador){alert(鈥淓MPATE鈥)}
else if(jugador == 1,2,3 && pc == 3,1,2){alert (鈥淕ANASTE鈥)}

        else {alert("PERDISTE ")}

Se que por ahora estamos aprendiendo If- else if - else
pero quer铆a dejarles la manera en la que se me ocurri贸 resolverlo.

// Operadores ternario 鈥?鈥

Sintaxis:
( CONDICION ) ? ("en el caso que se cumpla") : ("en el caso que no se cumpla")

Primero preguntamos si ( PC == jugador )
si esto es correcto => ?
alerta(鈥楨MPATE鈥)
en el caso de que esto no sea correcto = > :
vamos a la siguiente pregunta

Antes de eso quiero dejarles esta tabla la cual lo saque de un compa帽ero

Sabemos que nuestra 煤nica manera de ganar se reduce a 2 posibles razones, si nuestra resta es 1 o -2 en ese caso continuamos con el c贸digo :
Primer caso
(jugador - pc == 1) 鈥渟i esto es correcto鈥 => ? alert(鈥楪ANASTE鈥)
Segundo caso

(jugador - pc == -2) 鈥渟i esto es correcto鈥 => ? alert(鈥楪ANASTE鈥)

como vemos en los dos casos es lo mismo, podemos reducir esto con un => ||
(jugador - pc == 1)
en el caso de que no sea esto prueba con esto => ||
(jugador - pc == 2)
si uno de los dos es correcto
alert(鈥楪ANASTE鈥)
en el caso de que ninguno de los dos sea correcto => :
alert('PERDISTE)

馃拵 Puse ese en vez de piedra porque el del video parece sushi

yo lo puse en menos lineas de codigo y me qued贸 as铆 utilizando el operador 鈥渙r鈥

if(jugador == pc) {
            alert ("Empate!!!");
        } else if (jugador == 1 && pc == 3 || jugador == 2 && pc == 1 || jugador == 3 && pc == 2) {
            alert ('Ganaste!');
        } else {
            alert ('Perdiste :(');
        }

los otros cursos velocidad X2
los cursos de Freddy x0.75

Cuando estuve programando la parte de las opciones donde ganaria , puse las 3 formas de como ganaria , no me fije que el puso solo 2 al principio xd, estoy emocionado que estoy aprendiendo 鈥

hay un visual studio code online para no instalarlo 鈥渧scode.dev鈥

<!DOCTYPE html>
<head>
<meta charset=鈥渦tf-8鈥>
<title>Piedra, papel o tijera</title>
<title>鉂わ笍Rock,paper and scissor</title>
<script>
// 1 es piedra, 2 es papel, 3 es tijera
let jugador = 0
let pc = 2
jugador = prompt (鈥淓lige 1 para pidra, 2 para papel,3 para tijera鈥)
jugador = prompt (鈥淓lige 1 para piedra, 2 para papel,3 para tijera鈥)
// alert(鈥淓legiste " + jugador)
if(jugador == 1) {alert(鈥淓legiste piedra鈥)} else if(jugador == 2) {alert(鈥淓legiste papel鈥)} else if(jugador == 3) {alert(鈥淓legiste tijera鈥)} else {alert (鈥澛LEGISTE PERDER!")}
</script>
</head>
<body>
<h1 style=鈥淐OLOR: violet鈥>Piedra, papel o tijera</h1>
</body>
</html>
if(jugador == 1) {alert(鈥淓legiste 馃鈥)} else if(jugador == 2) {alert(鈥淓legiste 馃搫鈥)} else if(jugador == 3) {alert(鈥淓legiste 鉁傦笍鈥)} else {alert ("隆ELEGISTE PERDER, SELECCIONA BIEN馃う鈥嶁檧锔!")}

        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) {alert("GANASTE 馃槉")}
        else if(jugador == 2 && pc == 1) {alert("GANASTE 馃槉")}
        else if(jugador == 3 && pc == 2) {alert("GANASTE 馃槉")}
        else{alert("PERDISTE 馃様")}

esta es mi forma:

function juego({p1}){
  const pc = Math.ceil(Math.random()*3)
  const winCase = {
    1: (pc) => pc===3?"GANASTE":"PERDISTE",
    2: (pc) => pc===1?"GANASTE":"PERDISTE",
    3: (pc) => pc===2?"GANASTE":"PERDISTE",
  }  
  if(p1 === pc) return "EMPATE"
  else if(winCase[p1](pc) === "GANASTE") return {P:"GANASTE", p1, pc}
  else return {P:"PERDISTE", p1, pc}
}
juego({p1:2})

Muestro mi soluci贸n para quien le sirva:

    // 1 es piedra, 2 es papel, 3 es tijera
    let jugador = 0
    let pc = 2
    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 ESTAR EQUIVOCADO")
    }
    
    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) {
        alert("GANASTE, REY 馃馃槑")
    } else if(jugador == 2 && pc == 1) {
        alert("GANASTE, REY 馃馃槑")
    } else if(jugador == 3 && pc == 2) {
        alert("GANASTE, REY 馃馃槑")
    } else{
        alert("HIII PERDISTE 馃ぁ")
    }

<script >
/1 para papel, 2 piedra; 3 tijera/
jugador=0;
pc=3;
jugador=prompt(鈥淓lige 1 para piedra, 2 para papel, 3 para tijera鈥);
//alert(鈥淓leg
iste鈥+juador);
if (jugador1){
alert(鈥淓legiste piedra馃鈥);
} else if (jugador
2){
alert(鈥淓legiste papel馃Щ鈥);

         }else if(jugador==3){
            alert("Elegiste tijera鉁傦笍 ");
         }else{
            alert("Elegiste perder");
         }
         // codigo para el pc
         if (pc==1){
            alert("El pc eligio piedra馃");
         } else if (pc==2){
            alert("El pc eligio papel馃Щ");
            
         }else if(pc==3){
            alert("El pc elegio tijera鉁傦笍");
         }else{
            alert("Elegiste perder");
         }
         // combate entre el usuario el pc
         if (jugador==pc){
            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>

Por aqu铆 he visto un aporte en el cual usan Algebra para seleccionar los escenarios en los cuales uno gana y me pareci贸 muy interesante, por lo cual, yo quer铆a dar mi aporte el cual es usando una Estructura de Datos llamada Hash Table ( O un simple Objeto ).

const UnSimpleObjeto= {
	clave : "Valor"
}

const valor = UnSimpleObjeto[clave]

驴 Qu茅 es un Objeto/Hash Table ? :
Es un tipo diccionario en el cual manejamos una clave y 茅sta clave tiene asociada un valor, en nuestro caso tenemos 3 claves, las distintas opciones de juego ( Piedra, Papel, Tijera ) y qu茅 opci贸n mata a qui茅n jaja.

const manos = {
  Piedra: "Tijera",
  Papel: "Piedra",
  Tijera: "Papel",
};

Como sabemos Piedra mata Tijera, Papel mata a Piedra, Tijera mata papel, dicho coloquialmente.

Entonces, le pedimos al usuario que nos d茅 qu茅 opci贸n quiere, mediante el nombre de la opci贸n que eligi贸.

Puedes usar Prompt, pero en mi caso yo use ReadLine, que es un modulo de NodeJS

Entonces, verificamos que la opci贸n que recibimos por parte del usuario exista en el Objeto que hemos creado anteriormente.

/*El m茅todo que usaste para recibir la opci贸n del  jugador*/
const jugador = prompt("驴 Qu茅 opci贸n quieres ? (Piedra, Papel, Tijera)")

const manoQueLeGanaAlUsuario  = manos[jugador]

Digamos que el jugador se le di贸 por molestar y el escribi贸 鈥渁sdasdasd鈥, lo cual, obviamente no es una clave de nuestro Objeto, por lo cual, vamos a verificar si tenemos un valor valido por parte del usuario.

const manoQueLeGanaAlUsuario  = manos[jugador]

if(!manoQueLeGanaAlUsuario) /*Si es nulo o indefinido*/ 
{
	alert("Elegiste PERDER")
}

Okey, 驴 Qu茅 acaba de pasar aqu铆 ?, primero, recuerdas que te dije que tenemos un objeto con las posibles opciones de qu茅 le gana a a qui茅n ( Est谩 algo m谩s arriba ), resulta que cada vez que nosotros elegimos una mano, la mano que elegimos la vamos a usar como clave, si ponemos un texto random como : 鈥渁sdasdasdas鈥, no vamos a tener ninguno valor de nuestro objeto, encambio, si introducimos una clave la cual es exactamente igual a la clave que tiene nuestro objeto, el nos va a devolver el valor y el valor es qu茅 opci贸n nos gana a nosotros.

const manos  = {
	/*Las Opciones*/
	laOpcionQueElegiste : "loQueLeGanaATuOpcion"
}

const loQueLeGanaATuOpcion = manos[laOpcionQueElegiste]

/**El S铆mbolo ( ! ), significa NO, 
en nuestro caso, verifica si algo existe,
osea que no es nulo o indefinido **/

/**Si loQueLeGanaATuOpcion no existe, eso quiere decir que el usuario no puso bien la clave, osea la opci贸n que eligi贸 es incorrecta**/
if(!loQueLeGanaATuOpcion)  {
	alert("PERDISTE JUAJAJA")
}

Ahora 驴 C贸mo har铆amos para tener la opci贸n del computador ?, pues, vamos a usar n煤mero aleatorios, para esto, vamos a usar dos m茅todos de un Elemento llamado Math, que nos da funciones Matem谩ticas.

Math.floor(x) // Le quita los decimales a x
Math.random() // Nos devuelve un n煤mero con muchos decimales entre 0 y 1

// Ponemos 3 porque es el m谩ximo que queremos que nos salga, y sabes que el n煤mero m谩ximo de opciones es 3 (Piedra, Papel, Tijera)
const numeroAltEntre1y3 = Math.floor(Math.random() * 3) // ->  0 , 1 , 2

Ahora necesitamos que un grupo de opciones, para ser m谩s especifico, vamos a usar algo muy parecido a las matrices, que llamamos arreglos, en este caso, vamos a sacar todas las claves de nuestro Objeto de modo que tengamos todas las opciones, y lo usamos espec铆ficamente porque tiene una propiedad y acceder a cada uno de los elementos dentro del arreglo mediante su posici贸n ( Inicia en 0 )

const opciones = ["Piedra", "Papel", "Tijera"] // Si usas 茅sta opci贸n, recuerda que cada opci贸n debe estar exactamente escrita en la forma que lo escribiste en el Objeto.

// Lo mismo pero de una manera m谩s elegante.
const opciones = Object.keys(manos) // ["Piedra", "Papel", "Tijera"]

Y aplicando todo lo que te he explicado, quedar铆a as铆:

const numeroAleatorio  = Math.floor(Math.random() * 3)
const opcionDelPc = opciones[numeroAleatorio]
const opcionQueLeGanaAlPc = manos[opcionDelPc]

Chequeamos el empate:

if(jugador == opcionDelPc) {
	alert("Empataron!")
}

Chequeamos si ganas o pierdes:

if(jugador == opcionQueLeGanaAlPc) {
	alert("Ganaste !")
} else if (opcionDelPc == manoQueLeGanaAlUsuario) {
	alert("Jajajja, malo, te gan贸 la pc 馃槀")
}

S铆 le铆ste todo esto, te agradezco mucho!, quiz谩s sea algo confuso al inicio, pero s茅 que vas a dominar esto!, solamente ponle cuidado jsjs

Para que sea un poquito mas interesante y divertido鈥
les facilito un codigo para que la pc genere numeros aleatorios de entre el 1 y el 3, asi nos divertimos mas!!!:
function getRandomInt(min, max)
{
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let jugador = 0
let pc = getRandomInt(1,3);