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 de piedra, papel o tijera

8/84
Recursos

Ahora que conoces lo m谩s b谩sico de programar 驴te animas a crear un peque帽o juego de piedra papel o tijera con tu navegador?

Esta clase requiere que sepas lo fundamental sobre crear archivos HTML y escribir c贸digo JavaScript. Si a煤n no lo sabes, entonces visita la primera clase del curso y empieza desde all铆 馃檪 Esta es la clase n煤mero 9 del curso gratis de programaci贸n b谩sica de Platzi 馃挌

Tips para aprender a programar

Ahora, antes de empezar, d茅jame darte algunos tips que seguro te ayudar谩n 馃槈

Escribe comentarios con 鈥//鈥

La computadora ignora todo lo que escribas despu茅s de un 鈥//鈥 en una l铆nea de c贸digo. As铆 que puedes usar esto para dejar mensajes 煤tiles para ti (o tus compa帽eros) a lo largo del c贸digo.

Por ejemplo:

//RECOGIENDO LA ELECCI脫N DEL JUGADOR
let eleccionJugador = prompt(); // Aqu铆 el jugador elije piedra, papel o tijera

Nombra variables

Se recomienda fuertemente usar nombres que dejen claro el prop贸sito de la variable. Evita usar nombres sencillos como 鈥渁鈥, porque puedes olvidar que es lo que hace cuando trabajas con muchas variables a la vez.

La pr谩ctica m谩s com煤n es utilizar nombres compuestos por varias palabras en Camel Case (sin espacios, empezando en min煤scula, y colocando en may煤scula la inicial de todas las palabras despu茅s de la primera).

Ojo, recuerda no emplear acentos ni 鈥溍扁 en tu c贸digo para evitar errores de lectura.

Por ejemplo:

eleccionUsuario
nombreUsuario
primerApellidoUsuario
fechaNacimientoUsuario

Utiliza condicionales

Si lo piensas bien, el juego de piedra, papel y tijera requiere de condiciones como 鈥渟i el jugador elije piedra y la computadora elije piedra, entonces el jugador gana鈥.

Para hacer eso en JavaScript debes seguir una formula sencilla:

if ( variableAComparar == ValorDeComparacion ) {
    //C贸digo a ejecutar si la condici贸n se cumple
}
else if ( variableAComparar == ValorDeComparacion2 ) {
    //C贸digo a ejecutar si la condici贸n 1 no se cumple, pero la segunda s铆
}
else ( variableAComparar == ValorDeComparacion3 ) {
    //C贸digo a ejecutar si ninguna condici贸n se cumple
}

En resumen:

  1. Usas if para evaluar la primera condici贸n. else if, para evaluar m谩s condiciones si la primera no se cumple, y else para decir lo que ocurrir谩 si ninguna otra condici贸n se cumple.
  2. Entre los par茅ntesis escribes la condici贸n que deseas evaluar. Por lo general se compara una variable con un valor.
  3. Recuerda que = se utiliza para asignar valores a las variables. Si deseas comparar variables con valores dentro de un if, entonces debes emplear un ==. Tambi茅n puedes emplear un ===si quieres comparar tanto el valor como el tipo de dato (n煤mero, string, o *boolean).
  4. El c贸digo que escribas entre {} es el c贸digo que se va a ejecutar si la condici贸n entre par茅ntesis se cumple.

馃挕 Los datos tipo Boolean son datos 鈥淰erdadero o falso鈥. Puedes escribirlos como true / false o 1 / 0. Por lo regular son muy 煤tiles 馃憤

Escribiendo el algoritmo

Esto lo vamos a hacer en dos partes. Y lo primero es crear el archivo HTML d贸nde vamos a escribir nuestro c贸digo, abrirlo en nuestro editor de c贸digo, y escribir la base en HTML.

Intenta hacerlo sin ayuda 馃槈 Y si te pierdes, aqu铆 te dejo el c贸digo que deber铆as preparar de primeras.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Algoritmo piedra, papel o tijera</title>
        <script>
	      
        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

Luego escribiremos un c贸digo que nos permita saber si el jugador elije piedra papel o tijera. Intenta crear una variable que capture la elecci贸n del jugador usando un prompt(). Expl铆cale que escriba 1 para piedra, 2 para papel o 3 para tijera, y luego recu茅rdale el n煤mero que eligi贸 con un alert().

Intenta hacerlo sin ver la soluci贸n. Cuando termines, compara lo que obtuviste con el c贸digo de abajo y sigue leyendo:

<!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);
        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

Bien, ahora probemos con la condici贸n. Primero convierte el recordatorio en un comentario. Vamos a crear un recordatorio m谩s preciso, uno que le diga al usuario si eligi贸 piedra, papel, tijera, o algo m谩s.

Para hacerlo, inicia una condici贸n d贸nde vas a hacer tres comparaciones. Primero usa un if para evaluar si el jugador eligi贸 piedra. Si lo hizo, env铆ale un alert() indic谩ndole que eligi贸 piedra. Luego usa un par de else if para evaluar si eligi贸 papel o tijeras, y env铆ale un alert() en cada uno inform谩ndole de su decisi贸n.

Finalmente, emplea un else para evitar que el jugador quiera pasarse de listo al escribir algo que no sea 1, 2 o 3. En ese caso, env铆ale un alert() indic谩ndole que elija 1, 2 o 3 (o juegale una broma. Es tu juego despu茅s de todo 馃槈).

Intenta hacerlo por tu cuenta. Y cuando termines, comp谩ralo con el c贸digo de abajo antes de continuar.

隆Recuerda probar tu c贸digo en el navegador y pulirlo hasta que funcione!

<!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>

Dej茅moslo hasta aqu铆 por ahora. Intenta reproducir este c贸digo por tu cuenta ahora que sabes c贸mo funciona. Y cuando est茅s listo, acomp谩帽ame a terminar este peque帽o juego en: Algoritmo avanzado de piedra, papel o tijera

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

Aportes 355

Preguntas 251

Ordenar por:

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

o inicia sesi贸n.

Hice mi juego de piedra papel o tijera, espero les guste []Piedra papel y tijera(https://anyilojr.github.io/piedra-papel-tijera.html)
Nunca pares de aprender! 馃槂

Algo m谩gico de la programaci贸n es que hay MUCHAS formas de hacer lo mismo. En los aportes de esta clase abajo encontrar谩s varias alternativas para hacer este mismo algoritmo 馃憞

No hay una mejor o peor, solo son diferentes. As铆 es la creatividad del software 馃挌

馃挌馃挌馃挌En el anterior curso de Programaci贸n hab铆a personas que ya ten铆an experiencia programando y los ejercicios los hac铆an de una manera m谩s elaborada solo para lucirse, gente por favor si van a hacer aportes que sean sobre esta clase y que sean 煤tiles para que nos apoyemos entre todos 馃挌馃挌馃挌

Tip: el atajo que usa Freddy al inicio de la clase para abrir un nuevo archivo r谩pido es Ctrl + N 馃槃 y luego lo guarda con Ctrl + S Usar comandos es r谩pido y es Genial!

Existe otra manera en la que podemos expresar una condicional y es haciendo uso de la sentencia switch la cual puede tener una sintaxis m谩s limpia que las sentencias** if else** complicadas馃槄.

let jugador = 0
let pc = 2

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

switch (jugador) {
    case "1":
        alert("Elegiste piedra")
        break;
    case "2":
        alert("Elegiste papel")
        break;
    case "3":
        alert("Elegiste piedra")
        break;

    default:
        alert("elegiste PERDER")
        break;
}

Si quieres m谩s detalles sobre como funciona la sentencia switch solo haz clic aqu铆

Les dejo mi juego de piedra, papel, o tijera, espero que les guste 馃槂 Link
Y tambi茅n les dejo el repositorio para que puedan observar el c贸digo GitHub

Algoritmo de piedra, papel o tijera



La etiqueta <!DOCTYPE html> informa al navegador la versi贸n de HTML, 煤til para compatibilidad con navegadores antiguos.

Se usa // para colocar comentarios en JavaScript, estos no son le铆dos por el navegador.

Una condicional es el c贸digo que solo se ejecuta si se cumplan cierta condici贸n.

El == es el s铆mbolo que se usa para comparaci贸n. Se usa el s铆mbolo = para asignaci贸n de valores.

8 - Algoritmo de piedra, papel o tijera

  • <!DOCTYPE html> 鈫 se usa para tener compatibilidad con navegadores viejos
  • // 鈫 doble slash se usa para comentar codigo, no afecta la codigo
  • Para ajustar texto largo en VS se utiliza: view 鈫 Word Wrap (ajustar palabra) o CTRL + Z
  • == 鈫 Comparaci贸n. esto es igual a esto
  • = es de asignaci贸n. esto entra dentro de esta variable
  • Condicional: Es un c贸digo que solo se ejecuta si la condici贸n se cumple 鈫 if()
    • Es posible anidar if() pero no se ve bien y es una mala practica. la mejor opcion es ejecutarlo en cascada con else if()
<!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 =  2
        jugador = prompt("Elije: 1 para piedra, 2 para papel, 3 para tijera ")
        //alert("Elejista " + jugador)
        if(jugador == 1) {
            alert("Elejiste piedra")
        } else if(jugador == 2){
            alert("Elejista papel")
        } else if(jugador == 3){
            alert("Elejiste tijera")
        } else{ // Si elije otra opcion que no sea 1,2 o 3. mostrar:
            alert("ELEJISTE PERDER!!")
        }
    </script>
</head>

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

</html>

Si se quieren simplificar la vida pongan Html 5 en Visual Estudio Code eso ya establece toda la estructura. Pero les recomiendo que lo escriban manualmente como lo hace Freddy si est谩n aprendiendo!!! 馃槂 馃槂 馃槂

2 preguntas que me estaba haciendo y encontr茅 las respuestas. Se los dejo aqu铆 para que les sea de utilidad.

  1. 驴 Por qu茅 la variable 鈥 jugador 鈥 es cero?
    Al ponerle 0 , estamos creando una variable vac铆a para que luego pueda tomar un valor ingresado por el jugador.

  2. 驴 Por qu茅 la variable jugador de prompt al ser comparado con n煤mero no da error?
    Javascript hace una conversi贸n autom谩tica entre los string y n煤meros, en este caso el valor de prompt se cambiar谩 autom谩ticamente a un n煤mero por la comparaci贸n que hicimos en el if.

Si ejecutamos el siguiente c贸digo en la consola ver谩n que esto es verdadero

鈥2鈥 == 2 (true)

var jugador = "tijeras";
var cpu = "piedra";

if (jugador == "tijeras" && cpu == "piedra") {
    console.log("Perdiste");
} else if (jugador == "piedra" && cpu == "papel") {
    console.log("Perdiste");
} else if (jugador == "papel" && cpu == "tijeras") {
    console.log("Perdiste");
} else {
    console.log("Ganaste");
}
  • Hice este piedra papel o tijeras con condicionales, la idea no es que te pierdas as铆 que tratare de explic谩rtelo lo mas resumido posible. Si crees que aun as铆 despu茅s de explic谩rtelo es muy dif铆cil de entender no te preocupes guarda esto y mas adelante lo entender谩s, solo es cuesti贸n de 鈥淣unca para de aprender鈥
    .
  • tenemos dos variables una 鈥渏ugador鈥 y otra 鈥渃pu鈥 cpu es la maquina, que ya de por si les estoy asignando con cual objeto empezar 鈥渢ijeras y piedra鈥
var jugador = "tijeras";
var cpu = "piedra"; 
  • el operador == es para comparar que se este cumpliendo estrictamente la comparaci贸n es decir: Si el jugador equivale a tijeras y cpu equivale a piedra, entonces la consola retornara 鈥淧erdiste鈥 驴Por qu茅?
    porque tijeras no puede ganarle a piedra, los IF son para hacer un 鈥淨ue pasar铆a si鈥︹ y el operador && es simplemente para poner una 鈥測鈥 en forma de c贸digo 馃槃
if (jugador == "tijeras" && cpu == "piedra") {
    console.log("Perdiste");
  • Ahora viene el ELSE IF, tranquilo esto t茅malo como si, si no se cumpli贸 la condici贸n de arriba entonces entra a esta otra y lo que esta haciendo esta es decir, si jugador equivale a 鈥減iedra鈥 y cpu a 鈥減apel鈥 entonces la consola gira 鈥減erdiste鈥 hasta ahora ya tenemos dos casos cubiertos
else if (jugador == "piedra" && cpu == "papel") {
    console.log("Perdiste"); 
  • Ahora viene la ultima condici贸n, si el jugador equivale a 鈥淧apel鈥 y la cpu a 鈥淭ijeras鈥 tambi茅n retornara perdiste pues la explicaci贸n es obvia porque gana la maquina, tijeras mata a papel
else if (jugador == "papel" && cpu == "tijeras") {
    console.log("Perdiste");
  • Ahora viene las opciones del ganador, pues entonces si, no son ninguna de las anteriores la consola gira ganaste, pues ya cubrimos todos los casos en la que la maquina podia ganar y si no se cumple ninguna de esas es porque el jugador ganara.
else {
    console.log("Ganaste");
  • Vamos a ejecutarlo en el console del navegador
    .

    .

  • Como puedes ver retorno perdiste, porque se cumpli贸 la primera condici贸n, pero si cambiamos nuestras variables en un caso donde el jugador gane deber铆a retornar esto.
    .

    .
    Porque no se cumpli贸 ninguna condici贸n donde la maquina ganara. espero te haya servido, si no lo entendiste del todo, tranquilo, mas adelante lo har谩s, guarda este c贸digo te servir谩 mas adelante 馃槃

Gente nueva! les recomiendo que a medida que el curso nos vaya ense帽ando cosas nuevas como por ejemplo esta 鈥渃ondicionales鈥 traten de buscar por su cuenta en youtube o donde sea sobre estos temas, para que lo que aprendieron ac谩 lo entiendan todav铆a mejor y lo refresquen! a mi me sirvi贸 mucho los cursos de youtube de SoyDaltto en youtube, les dejo este https://www.youtube.com/watch?v=z95mZVUcJ-E en la descripci贸n de su video est谩n todos los temas y ense帽a y explica bastante bien los temas como funciones, condicionales, ciclos etc que se van a dar en el curso a mi me sirvi贸 para apoyarme en lo que estudiaba en el curso!

MIS APUNTES馃槑馃榿

  • <DOCTYPE html> es para la compatibilidad con navegadores viejos.
  • // es un comentario ( el navegador no lo ejecuta)
  • Una condicional es un c贸digo que s贸lo se ejecuta s铆 la condici贸n se cumple ( If)
  • Las llaves son bloques de c贸digo que s贸lo se ejecuta a partir de la condici贸n que est谩 ({}.
  • Else ( s铆 no鈥)
  • El doble igual es de comparaci贸n ( == )
  • Un s贸lo igual ( = ) es de asignaci贸n.

Ya me siento un crack aunque sea un poquito :3

Condicionales

Una condici贸n es un bloque de c贸digo que permite comparar distintas variables, y en base a los resultados decidir el flujo de un programa. Recuerda que estas se conforman de if, else if, y else.
*
Cuando comencemos con las condiciones, en la primera usaremos if que significa "si"
Ejemplo:

 if (jugador == 1) //Si la variable juagador vale uno 
 {
  	alert ("Elegiste piedra")
 } 

Para agregar m谩s condiciones abajo utilizamos else if

Ejemplo:

else if (jugador == 2) //Si la variable jugador vale dos 
{
	alert ("Elegiste papel") 
}
else if (jugador == 3) //Si la variable jugador vale tres
{
	alert ("Elegiste tijera") 
}

Al 煤ltimo de las condiciones si es necesario podemos usar else , que entrara en funci贸n si la variable jugador no es igual a ninguna de las condiciones anteriores
Ejemplo:

  else  //Si la variable no vale uno, dos o tres
  {
  	alert("Elegiste PERDER!!!!!!") 
  } 

As铆 quedar铆a la estructura completa


if (jugador == 1) //Si la variable juagador vale uno 
{
 	alert ("Elegiste piedra")
}
else if (jugador == 2) //Si la variable jugador vale dos 
{
	alert ("Elegiste papel") 
}
else if (jugador == 3) //Si la variable vale tres
{
	alert ("Elegiste tijera")  
}
else  //Si la variable no vale uno, dos o tres
{
	alert("Elegiste PERDER!!!!!!") 
}

No olvides los par茅ntesis para los par谩metros donde ira la condici贸n y las llaves la iniciar y terminar cada bloque. 隆Suerte! 馃槈

En los ajustes de File pueden activar la opci贸n 鈥淎uto guardar鈥 para que el editor de texto guarde los cambios autom谩ticamente cada vez que hacen alg煤n cambio 馃槈

Me pareci贸 muy valido un comentario de un profesor en la clase anterior, en donde hacia la sugerencia de colocar al inicio 鈥渉tml:5鈥, ahorra bastante tiempo al iniciar. Es super 煤til.

Puedes comentar en diferentes tipos de archivo con el shortcut:

ctrl + k + c 

y para desmarcar lo comentado;

ctrl + k + u

Este es mi aporte, les comparto el link para que entren a jugar, se recibe cualquier tipo de critica, tod@s estamos aprendiendo,

https://alejo022.github.io/Piedra-papel-tijera-js-/

Tambien les comparto el repositorio de github por si desean hacer un Fork y enviar un Pull requests, se recibe cualquier tipo de contribuci贸n,

https://github.com/alejo022/Piedra-papel-tijera-js-

Aca una foto del juego, Saludos 鉁ㄢ湪

De esta clase no pienso avanzar hasta entender bien los condicionales

Solo espero que lo tomen con humor 馃榿. Saludos a todos los 鈥渆xpertos鈥

Hay fundamentos de JavaScript que ya debes ir reforzando. Como variables, funciones, ciclos y condicionales. Si aprendes estas sabr谩s hacer el programa que sea.
He aqu铆 los condicionales. Nuestras p谩ginas web necesitan tomar decisiones dependiendo de c贸mo interact煤a el usuario con ellas. Ejemplo鈥

SI (el video esten pausa){
	aparece_un_icono_de_Play()
} SINO SI (el video estcorriendo) {
	habilita_el_icono_de_Pausa()
}
if(videoEnPausa){
	mostrarIconoPlay()
} else if(videoEnPlay){
	mostrarIconoPausa()
}

Lo que est谩 ocurriendo es lo siguiente: la computadora pregunta
ES VERDAD QUE EL VIDEO EST脕 EN PAUSA ?
COLOCAR脡 EL ICONO DE PLAY SI ES VERDAD : COLOCAR脡 EL ICONO DE PAUSA SI ES FALSO

Es por eso que podemos usar una expresi贸n llamada, operador ternario, que funciona igual que usar if y else if. Usando el ejemplo de la clase ser铆a as铆:

let jugador = prompt("")
	 jugador==1 ? alert("Elegiste Piedra") :
	    jugador==2 ? alert("Elegiste Papel") :
	       jugador==3 ? alert("Elegiste Tijera") : alert("Elegiste otro numero")

Juega con los condicionales como quieras y aprende a usar el operador ternario.

馃槃 Este fue mi resultado al tratar de hacer el algoritmo por mi cuenta.

La etiqueta <!DOCTYPE html> no es para tener compatibilidad con buscadores antiguos, pasa lo contrario.
Al poner esta etiqueta le hacemos saber a los buscadores que estamos trabajando con la 煤ltima versi贸n de html, que es la 5, y al omitir esta etiqueta entramos al modo quirk .
Existen 3 modos que utilizan los navegadores web, quirk mode, almost standard mode y full standard mode.
Dejo las referencias para mejor consulta de esta informaci贸n.
https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
https://www.w3schools.com/tags/tag_doctype.asp

Alguien mas old school se dio cuenta que en el anterior curso gratis de programacion Freddy nos mandaba a poner el script al final del body y ahora lo pone al final del head jajajaj

Hola chicos, si eres un principiante en programaci贸n como yo; no leas los comentarios en profundidad por tu salud mental y por cuidar tu RITMO de aprendizaje, saludos especiales. Atte: Miss Alegra.

Cuando Freddy pregunt贸 鈥渃贸mo se dice si en ingl茅s鈥 yo disque YES. Menos mal que no estoy programando sola JAJAJA

La didactica con la que ense帽an es brutal. Es otro nivel.

Yo hice el m铆o tambi茅n 馃槃

https://crisleoc.github.io/rock-scissors-paper/

Esta es mi version simple de este algoritmo, espero les guste 馃槂, https://nnzthzpvl4w8vdqb0atpww.on.drv.tw/Piedra-Papel-Tijera/

Se debe prestar mucha atenci贸n a como el profe dispone los else if y los espacios donde quedan las llaves porque en mi caso si la llave que cierra no se encuentra en el renglon de abajo, aunque guarde, no se ejecuta el cuadro de dialogo que debe aparecer.
ps: estuve 10 minutos buscando las llaves en mi teclado de la laptop y me las dibuja como corchetes y no como llaves, pero toma la orden igual.
Saludos

Hola. Un poco tarde. El curso pasado no logr茅 terminarlo pues entre apagones y mal servicio de intertnet ac谩 en Venezuela pues no pude continuar. En esta oportunidad espero terminarlo.

location.reload()

Al final del c贸digo para que no tengas que recargar de manera manual, sino que se haga de manera autom谩tica.

oye que divertido
El l铆mite es uno mismo

Hola a todos! 馃槑

Vengo del futuro, osea de las clases posteriores y vengo a decirte que s铆 tienes dudas sobre las diferentes variables que utiliza Freddy, deberias darte un tiempo para poder llevar este curso de Javascript en el siguiente link.

Te cuento que yo lo estoy haciendo, son solo lecturas y practicas y son cosas muy muy basicas que te ayudaran mucho para poder entender y continuar con tus cursos, as铆 como a m铆.

Aqu铆 se los dejo y no paremos de aprender! Be brave 馃

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

P脿gina para consultar m谩s informaci贸n con respecto a temas relacionados de javascript

A que me vuelvo chango鈥 trato de no apagar el cerebro y siga funcionando no rendirse鈥 ahi voy

Me est谩 costando un poquito esta parte del curso, como es el juego Piedra, papel y tijera. Estoy revisando el proceso.

muchas gracias por este curso : ) para mi que no tengo ni idea de la programacion no me costo mucho. que bueno es poder poner pausa y regresar. lo importante es entender y aplicar no importa cuanto tardes . animooo

//

Todo lo que le coloque en frente es un comentario.
  1. If es una condicional
  2. todo lo que se encuentre dentro de las llaves { } se ejecuta dependiendo que la condici贸n sea verdadera
  3. El == es de comparaci贸n
  4. El = es de asignaci贸n

Me agrada mucho este curso, porque de cierta forma gracias a lo que aprend铆 en Excel, se me hace m谩s sencillo considero que sirve de base aprender Excel.

el curso esta increible鈥 lleve algunos por udemy y ninguno me ayudo como este!

Lo que aprend铆 aparte de crear mi primer algoritmo fue:
.
Que todo lo que yo coloque en el // se considera como comentario, esto es solamente para mi.
.
Cuando mi c贸digo se esta extendiendo puedo utilizar una herramienta de View, la cual es Word Wrap; que me permite ver todo en un solo lado.
.
C贸mo poder preguntar la opci贸n que eleg铆 en el juego a trav茅s de una condicional.Y esta es un c贸digo que solo se ejecuta **SI **la condici贸n se cumple, y todo esto lo coloco dentro de unas { }.
.
Colocar un doble == significa que estoy haciendo una comparaci贸n, mientras que uno solo = es de asignaci贸n.
.
Ejecutar un c贸digo en cascada, colo cando enfrente la llave del if la palabra else if e indicar la siguiente condici贸n.
.
Les comparto mi c贸digo espero les sirva.
.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Piedra, papel o tijeras</title>
        <script>
            // 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 piedra")
            } else if(jugador ==2) {
                alert("Elegiste papel")
            } else if(jugador ==3) {
                alert("Elegiste tijera")
            }else {
                alert("PERDISTE")
            }
        </script>
    </head>
    <body>
       <h1> Juego Piedra, papel o tijeras</h1>
    </body>
</html>

Algoritmo de piedra, papel o tijera


  • La programaci贸n es sutil y para programar algo debes entender lo que necesitas y como hace que la PC lo entienda en su lenguaje.
  • <!DONCTYPE html> sirve para darle compatibilidad a nuestro c贸digo con navegadores antiguos.
  • En el minuto 3:10, Freddy nos dice que para comentar nuestro c贸digo debemos usar dos slash seguidos (// comment) pero no nos dice que eso se debe hacer 煤nicamente dentro de la etiqueta <script>, ya que es una caracter铆stica espec铆fica (en este caso) de JavaScript.

HTML Comments
JavaScript Comments

<!DOCTYPE html> <!-- Compatibilidad con navegadores viejos -->
<html>
    <head>
        <meta charset="utf-8" />
        <title>Stone, paper or scissor</title>
        <script>
            // 1 = stone, 2 = paper, 3 = scissor
            let player = 0 // = s铆mbolo de asignaci贸n
            let computer = 2
            player = prompt("Choose: 1 for stone, 2 for paper or 3 for scissor.")
            // alert("You choose " + player)
            // == S铆mbolo de comparaci贸n
            if(player == 1){
                // Bloque que se ejecuta s铆 la comparaci贸n es verdadera
                alert("You choose stone") 
            } else if(player == 2){
                alert("You choose paper")
            } else if(player == 3){
                alert("You chose scissor")
            } else {
                alert("You choose an incorrect option, try again.")
            }
        </script>
    </head>
    <body>
        <h1>Stone, paper or scissor</h1>
    </body>
</html>

Mi ejemplo. Hice que la opci贸n elegida por el ordenador se genere de forma 鈥榓leatoria鈥.

Fredy va a 2000 por hora 馃槂 algo de humor a pesar de que es duro

Mi aporte a esta clase:

El uso de los = en programaci贸n con Javascript


= asignaci贸n
== igualaci贸n 
=== validaci贸n 
Ya hab铆a hecho el jueguito de Piedra, Papel o Tijera en otro curso hace poco, apenas inici茅 con Javascript ya m谩s seriamente. Me gust贸 mucho hacerlo. Les dejo aqu铆 mi codepen, estoy posteando esto desde el cel, as铆 que disculpen si no est谩 activo el link, pero comentar por cel a煤n es complicado igual la experiencia a una PC 鉃★笍 https://codepen.io/Janet11/pen/eYyxGbb

Mi cerebro explot贸鈥 jejeje
De aqui no avanzo hasta entenderlo bieeeen, as铆 dure d铆as, d铆as y d铆as鈥 馃槮

Tip 鉁匬ara comentar por atajos de teclado te paras sobre la linea que quieras comentar (No hace falta seleccionar el texto, lo hace por defecto) y apretas Ctrl + K e inmediatamente despu茅s Ctrl + C.
para deshacer lo comentado haces Ctrl + K y Ctrl + U

Me gustan las clases de Freddy, los aportes de la gente deber铆an ser acordes a la clase, hay quienes ponen cosas muy avanzadas para nosotros los principiantes.

jajajaja yo empesando el curso y ya todos terminaron

compa帽eros sus formas de modificar el juego est谩n muy buenas, a algunos nos falta tiempo para llegar a eso鈥enemos que seguir aprendiendo , gracias Freddy Vega por tus clases , FELIZ DIA DE REYES鈥

Yo quiero compartir el mio, lo hice en otras clases, pero me tomo mi tiempo hacerlo funcionar, espero les guste.

https://harvylopz.com/Piedra-Papel-Tijera.html

Buenas tardes!
Quiero comentar que al terminar el video 8 y llegar hasta ese punto, me sirvi贸 mucho abrir una ventana de Visual Studio Code y otra del navegador juntas, para ir probando con las opciones 1, 2 y 3 y ver, analizar y entender qu茅 es lo que me aparece en pantalla y qu茅 es lo que la computadora est谩 haciendo sin que lo veamos.
Me record贸 a los momentos en que intentaba entender y aprender las laaaaaargas f贸rmulas de Excel y fue siempre probando y probando.

In JavaScript we have the following conditional statements:

  • Use if to specify a block of code to be executed, if a specified condition is true

  • Use else to specify a block of code to be executed, if the same condition is false

  • Use else if to specify a new condition to test, if the first condition is false

  • Use switch to specify many alternative blocks of code to be executed

El entorno te permite instalar un plugin llamado LiveServer para poder optimizar a la hora de edici贸n y prueba en simult谩neo mediante el navegador. Bastante 煤til.

Gracias Platzi, excelente gancho un curso b谩sico gratuito, tengan por seguro mi suscripci贸n para cursos avanzados

![](

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Piedra Papel o tijeras</title>
    </head>
    <body>
        <script>
            //1 es piedra, 2 es papel, 3 es tireja
            var jugador = 0;
            var pc = 2;
            jugador = prompt("ELIGE: 1 es piedra, 2 es papel y 3 es tijera");
            
            //alert("elegiste " + jugador)
            if(jugador == 1)
            {
                alert("Felicidades, elegiste Piedra")
            } 
            else if(jugador == 2)
            {
                alert("Felicidades, elegiste Papel")
            }
            else if(jugador == 3)
            {
                alert("Felicidades, elegiste tijera")
            }
            else
            {
                alert("Elegiste perder imbecil")
            }
           
        </script>
        <h>Bienvenido al mundo de juego de Piedras, Papel o tijeras</h>
    </body>
</html>

Me salia un error por no separar las lineas de codigo de los dondicionales con ";" por si alguno le pasa, puede ser esto.

muy buenas noches quiero agradecer a Platzi por esta plataforma y todo lo que se ve aqu铆 espero seguir aprendiendo muchas cosas

= : asignaci贸n == : comparaci贸n

else ifif : si no si (efecto en cascasa). Delante de la 煤ltima llave

Una condicional es un c贸digo que solo se ejecuta si la condici贸n se cumple.

鈥==鈥 este doble igual que coloca en la condicionante es usado para realizar una comparaci贸n.

{} = estas llaves son especiales por que solo se ejecuta lo que tiene por dentro cuando la condici贸n que la precede se cumpla.

El 鈥==鈥 se usa para comparaci贸n, y 鈥=鈥 se usa para asignaci贸n.

EN RESUMEN 

AQU脥 APREND脥:

飪	<!DOCTYPE html> 鈫 se usa para tener compatibilidad con navegadores viejos
飪	Se usa // para colocar comentarios en JavaScript, estos no son le铆dos por el navegador.
飪	
飪	El == == Es Comparaci贸n. esto es igual a esto
飪	El = es de asignaci贸n. esto entra dentro de esta variable

飪	// 鈫 doble slash se usa para comentar codigo, no afecta la codigo
飪	Para ajustar texto largo en VS se utiliza: view 鈫 Word Wrap (ajustar palabra) o CTRL + Z
飪	El prompt en JavaScript es una funci贸n que muestra un cuadro de di谩logo que pide al usuario que ingrese alg煤n tipo de informaci贸n, y devuelve esa informaci贸n como una cadena de texto. 
飪	Condicional: Es un c贸digo que solo se ejecuta si la condici贸n se cumple 鈫 if()
1.	If es una condici贸n
o	{} Lo que este dentro de las llaves depende de que la condici贸n sea verdad
o	Para ejecutar en cascada:
2.	} else if (jugador == 2){ 
Alert(鈥渆legiste tal cosa鈥)
3.	} else :  aqu铆, si no se cumple ninguna de las anteriores 
Alert(鈥淧ERDISTE鈥)

messi

Dia 2 en el curso, aprendiendo cada vez mas. Le tengo fe al curso鈥

As铆 queda el <script> agregando la funci贸n para que la computadora elija de forma aleatoria y te de el resultado del juego:

<script>
        // Funci贸n para generar numeros aleatorias entre 1 y 3
        function generateRandomInteger(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        // La coputadora elige aleatoreamente un n煤mero entre 1 y 3
        let pc = generateRandomInteger(1,3)
               
        //El jugador elige: 1 es piedra, 2 es papel, 3 es tijera
        let jugador = 0
        jugador = prompt("Elige 1 para piedra, 2 para papel, 3 para tijera")
        if(jugador == 1) {
            alert("Elegiste piedra")
            if(pc == 1) {
            alert("La computadora eligi贸 piedra")
            } else if(pc == 2) {
            alert("La computadora eligi贸 papel")
            } else if(pc == 3) {
            alert("La computadora eligi贸 tijera")
            }
        } else if(jugador == 2) {
            alert("Elegiste papel")   
            if(pc == 1) {
            alert("La computadora eligi贸 piedra")
            } else if(pc == 2) {
            alert("La computadora eligi贸 papel")
            } else if(pc == 3) {
            alert("La computadora eligi贸 tijera")
            }        
        } else if(jugador == 3) {
            alert("Elegiste tijera")
            if(pc == 1) {
            alert("La computadora eligi贸 piedra")
            } else if(pc == 2) {
            alert("La computadora eligi贸 papel")
            } else if(pc == 3) {
            alert("La computadora eligi贸 tijera")
            }
        } else {
            alert("Por favor elije una opci贸n v谩lida")
        }

        //Resultados si el jugador elige 1-piedra
        if(jugador == 1 && pc == 1) {
                alert("EMPATE")
        } else if (jugador == 1 && pc == 2) {
                alert("PERDISTE")
        } else if (jugador == 1 && pc == 3) {
                alert("GANASTE")
        }

        //Resultados si el jugador elige 2-papel
        if(jugador == 2 && pc == 1) {
                alert("GANASTE")
        } else if (jugador == 2 && pc == 2) {
                alert("EMPATE")
        } else if (jugador == 2 && pc == 3) {
                alert("PERDISTE")
        }

        //Resultados si el jugador elige 3-tijera
        if(jugador == 3 && pc == 1) {
                alert("PERDISTE")
        } else if (jugador == 3 && pc == 2) {
                alert("GANASTE")
        } else if (jugador == 3 && pc == 3) {
                alert("EMPATE")
        }
    </script>

Gracias por los aportes directos al grano dijo el dermatologo.
Logre hacer mi primer Juego Gracias.

Me cost贸 sacar el c贸digo, no sab铆a que estaba sucediendo, pero no me sal铆a la casilla, solo el texto del t铆tulo. Afortunadamente, Freddy siempre menciona que el programar es un lenguaje exacto, pues bueno,ten铆a un par de par茅ntesis volando por ah铆, los descubr铆 y qued贸 perfecto. Poco a poco vamos entendiendo mejor este cuento. Me encanta

Siempre me hab铆a gustado la programaci贸n, pero no hab铆a tenido la oportunidad de participar en un curso. Felicitaciones Freddy, explicas muy bien.

No entiendo algunas cosas.
Porqu茅 fredy le asigna el n煤mero 0 a la variable jugador?

Porqu茅 m谩s abajo cita la variable jugador asignandole un comando? (Jugador = prompt( 鈥 )),

Porqu茅 "alert (鈥淓legiste鈥 + Jugador) no se ve en pantalla como 鈥淓legiste 0鈥 dado que a la variable Jugador se le fue asignado el n煤mero 0?

Yo intente hacer mi propio juego de piedra, papel y tijera antes de ver el v铆deo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PIEDRA PAPEL O TIJERA</title>
</head>
<body>
    <h1 id="result"></h1>
    <input type="button" id="repeat" value="Volver a jugar"></input>
    <script>
        let optionMe = ""
        let optionMachine = ""

        optionMe = prompt("Piedra(1), papel(2) o tijera(3) : ")

        function getRandom(min,max){
            return Math.random()*(max-min)+min
        }

        optionMachine = parseInt(getRandom(1,3.9)).toString()
        var h = document.getElementById('result')

        switch (optionMe) {
            case "1":
                if(optionMachine=="2"){
                    h.innerHTML="Perdiste"
                }
                else if(optionMachine=="3"){
                    h.innerHTML="Ganaste"
                }
                else h.innerHTML="Empate"
                break;
            case "2":
                if(optionMachine=="1"){
                    h.innerHTML="Ganaste"
                }
                else if(optionMachine=="3"){
                    h.innerHTML="Perdiste"
                }
                else h.innerHTML="Empate"
                break;
            case "3":
                if(optionMachine=="1"){
                    h.innerHTML="Perdiste"
                }
                else if(optionMachine=="3"){
                    h.innerHTML="Empate"
                }
                else h.innerHTML="Ganaste"
                break;
            default:
                alert("Opci贸n no valida...")
                break;
        }

        switch(optionMachine){
            case "1":
                document.write("La m谩quina sac贸 Piedra ("+optionMachine+")")
                break;
            case "2":
                document.write("La m谩quina sac贸 Papel ("+optionMachine+")")
                break;
            default:
                document.write("La m谩quina sac贸 Tijera ("+optionMachine+")")
                break;
        }

        var button = document.getElementById('repeat')

        button.addEventListener("click",()=>{
            location.reload()
        })
    </script>
</body>
</html> 

Para empezar creo que esta bien.

Logr茅 entenderle en menos de 10 minutos lo que lleva horas de clases

Practicando y aprendiendo.

  • !DOCTYPE.html: es un indicadores para ciertos navegadores antiguos

  • <h1> para colocar t铆tulos

  • los 鈥/鈥 al principio se utilizan para poder escribir un comentario.

  • Una condicional es una condici贸n que solo se ejecuta si esa condici贸n se cumple y para eso se emplea {}

  • else if, se usa para evaluar m谩s condiciones si la primera no se cumple.

  • Si se quiere comparar variables dentro de un if se debe emplear un ==. Tambi茅n se puede agregar un === si se quiere comparar tanto el valor como el tipo de dato. En cambio 鈥=鈥 se usa para asignar un valor.

  • Los datos tipo Boolean, son datos 鈥渧erdadero o falso鈥 se pueden escribir como true/ false o 1/0

Es el curso b谩sico y con este corto video entend铆 muy f谩cil las condicionales, porque existes hasta AHORAAA? 馃槮
Aprovechen este curso gratis .

mi versi贸n con switch

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"/>
   <title> Piedra,paple y tijeras </title>
   <script>
      // 1 es piera, 2 es papel y 3 es tijera
      let jugador = 0
      let pc = 1
      jugador = prompt("elige 1 para piedra, 2 para paple y 3 para tijera: ")
      alert("elegiste : " + jugador)
      switch(jugador){
         case "1":
            alert("elegiste piedra")
            break
         case "2":
         alert("elegiste papel")
         break
         case "3":
         alert("elegiste tijeras")
         break
      }
   </script>

</head>
<body>
   <h1> juguemos </h1>

</body>
</html>

Para empezar a escribir c贸digo en HTML m谩s f谩cil y r谩pido:
simplemente pongan el signo (!) y le dan enter, de esta manera se arma la estructura base para empezar a escribir c贸digo en HTML

He hecho el c贸digo m谩s corto, utilizando una array que almacena todas las opciones. Y luego esa opci贸n se imprime en dependiendo en que elegido la persona.

const options = ['piedra', 'papel', 'tijera'];
let optionPc = 2;
let optionUser = prompt(`Ingrese tu opci贸n: 
1: piedra 
2: papel
3: tijera`);

alert(`Elegiste ${options[optionUser-1]}`);
alert(`La pc eligio ${options[optionPc-1]}`);

Para el que no sepa, los array en pocas palabras son variables las cuales pueden almacenas varios datos. Y la forma de acceder a ellos es por medio de su 铆ndice que inicia en 0, por eso es que se le recta uno a la opci贸n de usuario y la pc para que se imprima la opci贸n correcta.

La importancia de <!DOCTYPE> a veces es ignorada, pero es muy necesario, ya que con esta etiqueta se puede saber de que tipo de documento se trata. Tambien si no llegase a existir en tu codigo puede producir ciertos errores en la interfaz.

Es un poco largo el c贸digo, peor les comparto mi versi贸n con Puchamones

<!DOCTYPE html>
<html>
<head>
    <title><h1> Batalla Puchamon </h1></title> 
</head> 
<body>   
     <script>
         let user_puchamon = prompt ("Elige un Puchamon: \n \r 1. Charmander 2. Squirtle 3. Bulbasaur");
         
         let Charmander = 1;
         let Squirtle = 2;
         let Bulbasaur = 3;

         if (user_puchamon == 1)
         {
             alert ("tu Puchamon es Charmander")
         }

         else if (user_puchamon == 2) 
         {
             alert ("Tu Puchamon es Squirtle")
         }

         else if (user_puchamon == 3) 
         {
             alert ("Tu Puchamon es Bulbasaur")
         }

         else
         {
            alert ("Lo siento, ese Puchamon no existe, GAME OVER")
         }
         
         let rival_puchamon = prompt ("Elige un Puchamon rival: \n \r 1. Charmander 2. Squirtle 3. Bulbasaur")
         
         let Charmander_rival = 1;
         let Squirtle_rival = 2;
         let Bulbasaur_rival = 3;
         
         if (rival_puchamon == 1)
         {
             alert ("tu Puchamon rival es Charmander")
         }

         else if (rival_puchamon == 2) 
         {
             alert ("Tu Puchamon rival es Squirtle")
         }

         else if (rival_puchamon == 3) 
         {
             alert ("Tu Puchamon rival es Bulbasaur")
         }
         

         
        if (user_puchamon == 1 && (rival_puchamon == 1) ) 
             {
            alert ("Ha sido un empate")
             }
        
        else if (user_puchamon == 1 && (rival_puchamon == 2) )
            {
            alert ("Oh no! EL Squirtle rival ha ganado")
            }

        else if (user_puchamon == 1 &&  (rival_puchamon == 3) )
            {
            alert ("Felicidades, tu Charmander ha ganado!")
            }

        if (user_puchamon == 2 && (rival_puchamon == 2) )
            {
            alert ("Ha sido un empate")
            }

        else if (user_puchamon == 2 &&  (rival_puchamon == 1) )
            {
            alert ("Felicidades, tu Squirtle ha ganado!")
            }

        else if (user_puchamon == 2 &&  (rival_puchamon == 3) )
            {
            alert ("Oh no!, el Bulbasaur rival ha ganado!")
            }

        if (user_puchamon == 3 && (rival_puchamon == 3) )
            {
            alert ("Ha sido un empate")
            }

        else if (user_puchamon == 3 && (rival_puchamon == 1) )
            {
            alert ("Oh no!, el Charmander rival ha ganado!")
            }

        else if (user_puchamon == 3 && (rival_puchamon == 2) )
            {
            alert ("Felicidades, tu Bulbasaur ha ganado!")
            }


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

me gusto mucho lo del ejemplo del arbolito, hace mas facil el aprendizaje

//鈥渁l principio no me salia pero ahora si鈥

Ya me est谩 empezando a gustar mas la programaci贸n

<!DOCTYPE html>
<html>
<head>
<meta charset=鈥渦tf-8鈥 />
<title>Piedra, papel o tijera</title>
<script>
// 1 es piedra, 2 es papel, 3 es tijera
let jugador = 0
let pc = 2
jugador= prompt(鈥淓lige: 1 para 馃, 2 para 馃摪, 3 para 鉁傦笍鈥)
//alert("Elegiste " + jugador)
if ( jugador == 1 ) {
alert ("Elegiste 馃 ")
} else if (jugador == 2 ) {
alert ( 鈥淓legiste 馃摪鈥 )
} else if( jugador ==3) {
alert ( 鈥淓legiste 鉁傦笍鈥 )
} else {
alert ( 鈥淓legiste PERDER鈥 )
}
</script>
</head>
<body>
<h1>Piedra, papel o tijera</h1>
</body>
</html>

Freddy es mas duro que infancia en Venezuela 鉂わ笍

Una condicional es el c贸digo que solo se ejecuta si la condicional es verdadera. Esto nos permite discernir entre una opci贸n u otra.

  • if: Para evaluar la primera condici贸n.
  • else if: Para evaluar otras condiciones si la primera no es verdad.
  • else: Es para decidir que ocurrir谩 si ninguna condici贸n se cumple.

Ejemplo

// 1 es piedra, 2 es papel, 3 tijera
let jugador = 0;
let pc = 0;
jugador = prompt("Elige: 1 es piedra, 2 es papel, 3 es tijera");

//Condicionales
if(jugador == 1) {
    alert("Elegiste piedra");
} else if(jugador == 2) {
    alert("Elegiste papel");
} else if(jugador == 3) {
    alert("Elegiste tijera");
} else {
    alert("Elegiste LA MUERTE");
}
  • Otros conceptos
    • El // es para escribir comentarios en JavaScript.
    • El signo de = es pasa asignar y el == es para comparar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Piedra, Papel o Tijeras</title>

<script>
	// 1 piedra, 2 papel, 3 tijeras
	let jugador = 0
	let pc = 3

	jugador = prompt("Elige una opci贸n: 1=Piedra / 2=Papel / 3=Tijeras ")

	if (jugador == 1) {
		alert("Elegiste Piedra");
	}

	else if (jugador == 2) {
		alert("Elegiste Papel");

	} else if (jugador == 3) {
		alert("Elegiste Tijera");
		
	} else {
		alert("Opci贸n Incorrecta, Intenta nuevamente!!!");

	}
</script>
</head>

<body>

</body>

</html>

para distinguir las palabras en los t铆tulos sin usar espacio tambi茅n pueden empezar cada palabra con min煤scula ej:PiedraPapelTijera o tambi茅n usar barra baja piedra_papel_tijera

Es interesante que se usa JS para programar un videojuego, jamas imagene que un lenguaje basico tuviera la capacidad de hacer eso. Y eso que es solo el principio.

mi juego.file:///C:/Users/W10/Desktop/programar%20xd/piedra,%20papel%20o%20tijera.html

este es mi algoritmo, espero que les sirva, la opci贸n del pc es aleatoria, y las jugadas est谩n en formato JSON me dio pereza hacer los if perd贸n jejeje

<script>
        //funcion que genera un numero aleatorio
        function aleatorio(max) {
            return Math.floor((max-1)*Math.random()+1);
        }
        //1 piedra, 2 papel, 3 tijera como objeto JSON
        let jugadas={"1":"PIEDRA","2":"PAPEL","3":"TIJERA"}
        //opcion elegida por el jugador 
        let jugador = 0;
        //jugada aleatoria por el pc
        let pc=aleatorio(4);
        //pide el dato del jugador
        jugador = prompt("Elige: 1 piedra, 2 papel, 3 tijera");
        //muestra la jugada elegida
        if(jugador>0 && jugador<=3){
            //alert("Elegiste "+jugadas[jugador])
            if(pc==jugador){
                mensaje = "Empate "+" elegiste: "+jugadas[jugador]+" pc: "+jugadas[pc];
            }
            if((pc==1 && jugador==3)||(pc==2 && jugador==1)||(pc==3 && jugador==2)){
                mensaje="Perdiste "+" elegiste: "+jugadas[jugador]+" pc: "+jugadas[pc]
            }
            if((pc==3 && jugador==1)||(pc==1 && jugador==2)||(pc==2 && jugador==3)){
                mensaje="Ganaste "+" elegiste: "+jugadas[jugador]+" pc: "+jugadas[pc]
            }
            alert(mensaje)
        }else{
            alert("Perdiste Opcion no valida!")
        }
    </script>

Dios m铆o!! esto me encanta鈥 muchas gracias

Gracias Platzi, gracias profesor Freddy, estoy haciendo el curso para saber si quiero estudiar y tener certificaci贸n sobre el tema, hasta ahora me gusta mucho, esto es totalmente nuevo para m铆