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

Visual Studio Code

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

Aportes 95

Preguntas 58

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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.

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

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 馃槃

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>

Puedes comentar en diferentes tipos de archivo con el shortcut:

ctrl + k + c 

y para desmarcar lo comentado;

ctrl + k + u

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 馃槈

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.

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.

Ya me siento un crack aunque sea un poquito :3

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

De esta clase no pienso avanzar hasta entender bien los condicionales

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

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)

oye que divertido
El l铆mite es uno mismo

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

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.

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.

  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

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

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

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

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

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.

//

Todo lo que le coloque en frente es un comentario.

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

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
let jugador = 0;
let pc = 2;

jugador = prompt(`
    Elige el valor:
    Piedra = 1
    Papel = 2
    Tijera = 3
    `);

if(jugador == 1){
    alert(`Elegiste Piedra`);
} else if(jugador == 2){
    alert(`Elegiste Papel`);
} else if(jugador == 3){
    alert(`Elegiste Tijera`);
} else{
    alert('No elegiste ninguna opcion valida');
}

Mi c贸digo con un ciclo para obligar al usuario a escoger una opci贸n correcta

<!DOCTYPE html>
<html lang="en">
<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>
    <script>
        // 1 es piedra, 2 es papel y 3 es tijera
        let jugador = 0;
        let pc = 2;
        do{
        jugador = prompt("Elige: 1 para piedra, 2 para papel y 3 para tijera")
        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")
        }
        }while(jugador != 1 && jugador != 2 && jugador!= 3)
    </script>
</head>
<body>
    <h1>Piedra, papel o tijera</h1>
</body>

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.

鈥渉ice de esta manera鈥

<h1>juego de piedra papel o tijera</h1>
    <script>
        let player1=prompt('player #1:elija opcion [piedra,papel,tijera]');
        let player2=prompt('player #2:elija opcion[piedra,papel,tijera]');
        if(player1==="piedra"&&player2==="tijera") {
            alert('player 1 gana!');
        }else if(player1==="papel"&&player2==="piedra"){
            alert("player 1 gana");
        }else if(player1==="tijera"&&player2==="papel"){
            alert("player 1 gana!");
        }else{
            alert('player 2 gana');
        }
        </script>
  • La etiqueta <!DOCTYPE html> sirve para que navegadores viejos puedan entender el c贸digo.
  • Todo lo que est茅 en frente del // es un comentario el cual no se va a ejecutar.
  • Los condicionales son una parte del c贸digo que solo se ejecuta si la condici贸n se cumple.

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

Los que vimos el curso anterior esperando a que devele el 鈥渟ecreto鈥 para que se cree toda la estructura de html

Mi aporte:

<!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>
    <script>
        // 1 = piedra, 2 = papel, 3 = tijera
        let player = 0
        let pc = 2
        player = prompt("Elige:\n1 - Piedra 馃\n2 - Papel 馃Щ\n3 - Tijera 鉁傦笍")
        message = "Elegiste "
        if (player == 1) {
            message += "Piedra 馃"
        } else if (player == 2) {
            message += "Papel 馃Щ"
        } else if (player == 3) {
            message += "Tijera 鉁傦笍"
        } else {
            message += "cualquier cosa 馃槖"
        }
        alert(message)
    </script>
</head>

<body>
    <h1>驴Piedra 馃, Papel 馃Щ o Tijera 鉁傦笍?</h1>
</body>

</html>

Condicional: es un c贸digo que se ejecuta solamente si la condici贸n se cumple.

隆隆Muy buena pr谩ctica!! S贸lo queda pr谩cticar, pr谩cticar y pr谩cticar.

vamoo!!! un espectaculo la clase

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?

este curso me esta gustando mucho m谩s, y no es que el otro sea malo por que es bueno tambi茅n pero este tiene una nueva vibra.

<!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(" Elije: \n 1 para piedra \n 2 para papel \n 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(鈥 elegiste PERDER ")
}
</script>
</head>
<body>
<h1> Piedra, papel o tijera </h1>
</body>
</html>

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

el atajo de teclado para hacer el word wrap es Alt+z.

Si cuando estas programando la parte de 鈥渋f o switch鈥, la p谩gina de internet que usas no carga de la manera correcta, es bueno revisar en archivos, porque es posible que se haya duplicado el mismo documento, solo que con menos informaci贸n guardada. Supongo que aplica para otro problema similar, pero este caso es el que me sucedi贸 a mi.

Interesante la Clase.
Vamos por mas! 馃槂

Me gusta mas como es Atom 馃様

Hola, les comparto mi c贸digo, us茅 condicionales y ciclos. Saludos (https://github.com/oswald2803/PiedraPapelTijera)

Esto es muy util, gracias!

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>

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

Excelente la manera tan did谩ctica de c贸mo nos conducen a la programaci贸n! Genios馃挭馃徑
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Piedra papel o tijeras</title>
    <script>
      let resMaquina = Math.floor(Math.random() * (3 - 1 + 1) + 1);
      let res = parseInt(prompt("Elije 1. piedra, 2. papel, 3. tijeras"));

      if (res === 1 && resMaquina === 1) {
        alert("la maquina saco piedra y tu sacaste piedra, hubo un empate");
      } else if (res === 1 && resMaquina === 2) {
        alert("la maquina saco papel y tu sacaste piedra, la maquina gana");
      } else if (res === 1 && resMaquina === 3) {
        alert("la maquina saco tijeras y tu sacaste piedra, tu ganas");
      } else if (res === 2 && resMaquina === 2) {
        alert("la maquina saco papel y tu sacaste papel, hubo un empate");
      } else if (res === 2 && resMaquina === 1) {
        alert("la maquina saco piedra y tu sacaste papel, tu ganas");
      } else if (res === 2 && resMaquina === 3) {
        alert("la maquina saco tijeras y tu sacaste papel, la maquina gana");
      } else if (res === 3 && resMaquina === 3) {
        alert("la maquina saco tijeras y tu sacaste tijeras, hubo un empate");
      } else if (res === 3 && resMaquina === 1) {
        alert("la maquina saco piedra y tu sacaste tijeras, la maquina gana");
      } else if (res === 3 && resMaquina === 2) {
        alert("la maquina saco papel y tu sacaste tijeras, tu ganas");
      } else {
        alert("no se que ocurrio");
      }
    </script>
  </head>
  <body>
    <h1>Bienvenido al juego mas increible de todos</h1>
    <p>Las reglas del juego son:</p>
    <span
      >El objetivo es vencer al oponente seleccionando el arma que gana a la que
      ha elegido 茅l, siguiendo estas reglas: La piedra aplasta o rompe la tijera
      (gana la piedra) La tijera corta el papel (gana la tijera) El papel
      envuelve la piedra (gana el papel) Si los jugadores eligen la misma arma
      es un empate y se juega otra vez.</span>
  </body>
</html>
Grande clase y gran maestro

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>
<<!DOCTYPE html>
<html lang="en">
<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 y tijera</title>
 <script>const elecciones = [`Piedra`, `Papel`, `tijera`];

function juego() {
  let elecuser = parseInt(prompt(`Elija opcion \n 1. Piedra \n 2.Papel \n 3.Tijera`));
  let elecmachine = Math.floor(Math.random() * (4 - 1) + 1);
  if (
    (elecuser === 1 && elecmachine === 3) ||
    (elecuser === 2 && elecmachine === 1) ||
    (elecuser === 3 && elecmachine === 2)
  ) {
    alert(`User wins with ${elecciones[elecuser - 1]}`);
  } else if (elecuser === elecmachine) {
    alert(`Draw`);
  } else {
    alert(`Machine wins with ${elecciones[elecmachine - 1]}`);
  }
}</script>
</head>
<body>
 
<h1>Juego piedra papel o tijera</h1> <button onclick="juego()">Ejecuta</button>

 
</body>
</html>> 

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

Condicional

<<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> PiedraPapelTijera</title>
        <script>
            // 1 es piedra, 2 es papel, 3 es tijera
            let jugador = 0
            let pc = 2
            jugador = prompt("Elige: 1-Piedra, 2-Papel, 3-Tijera")
            //alert("Elegiste: " + jugador)
            if (jugador == 1) {
                alert("Has elegido Piedra") 
            } else {
                if (jugador == 2) {
                    alert("Has elegido Papel")    
                } else {
                    if (jugador == 3) {
                        alert("Has elegido Tijera") 
                    } else {
                        alert("No has digitado correctamente, has digitado: " + jugador + " :(")  
                    }
                }
            }

        </script>
    </head>
    <body>
        <h1>Gracias por jugar</h1>
    </body>
</html>> 

La manera en la que te empodera Fredy para demostrar que este tipo de temas son faciles es increible, gracias

Me encanta la programaci贸n cuando es asi de sencilla 馃槄馃憤

un dato interesante es que tambi茅n puedes insertar comentarios desde html la etiqueta para ello es:
<!-- comentario -->
se escribe menor que signo de exclamaci贸n dos lineas a la derechas y dos l铆neas a la izquierda y mayor que para cerrar y lo que est谩 dentro de las dos flechas es un comentario util para dejar tus apuntes en esta clase y durante tus proyectos en html ademas puedes ir enumerando las distintas etiquetas ya sea <p>,<p1>,<p2>,<p3>, para abrir un p谩rrafo por ejemplo esto es 煤til mas adelante cuando te toque aplicar un estilo de dise帽o a cada parrafo segun te convenga.

Es un aporte personal鈥
Pero no saben lo feliz que estoy de ver mi primer c贸digo!
Siempre quise hacerlo y aqu铆 vamos empezando 馃槂

Estoy tan acostumbrado a escuchar a freddy hablar rapido que repasar las clases a 1.5 e incluso 1.75 es casi normal 鈥

adjunto mi aporte, ahi se va dando forma 馃槂

vengo del futuro, jaja realmente vengo de la clase 61, solo hago un breve repaso

Me siento como cuando cargo m谩s peso en el gym鈥 ando imparable.
Nunca paremos de aprender

yo puse de ultima opcion irse alv xd

este ejercicio es la manera mas interesante de aprender las condicionales, esa toma de decisiones que colocamos en las instrucciones, la verdad me gusta el ejemplo.

<!DOCTYPE html>
<html lang=鈥渆s鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<link rel=鈥渋con鈥 href="./img/ico/games_02.ico" type=鈥渋mage/x-icon鈥 />
<title>PIEDRA_PAPEL_o_TIJERAS</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('Elegiste' + '  ' + jugador);    */    
 if(jugador == 1) {
  alert('Elegiste piedra');
 }else if(jugador == 2) {
  alert('Elegiste papel');
 }else if(jugador == 3) {
  alert('Elegiste tijera');
 }else {
  alert('Elegiste perder');
 }
</script>

</head>
<body>
<H1>Piedra, papel o tijeras</H1>
</body>
</html>

Hola a todos 馃挌
Soy muy nuevo en esto de la programaci贸n, pero me encanta todo lo que aprendo. Aqu铆 les dejo un peque帽o aporte para los que somos muy buenos 馃槂 algunas cositas son tomadas de google.
Observaciones de estudio:
if es una condicional, una condicional es un c贸digo que solo se ejecuta si la condici贸n se cumple (La sentencia condicional if se usa para tomar decisiones, este evalu谩 b谩sicamente una operaci贸n l贸gica, es decir una expresi贸n que de como resultado True o False , y ejecuta la pieza de c贸digo siguiente siempre y cuando el resultado sea verdadero.)
{} es un bloque de c贸digo que solo se ejecuta a partir de la condici贸n.
== es de comparaci贸n.
= es de asignaci贸n.
else significa, De lo contrario se cumple sin evaluar ninguna expresi贸n condicional y ejecuta el bloque de sentencias seguidas.

Freddy es el embajador de 鈥淎prende mientras te diviertes鈥 馃ぃ

Examen sorpresa
驴Cu谩l es la diferencia entre = y == ?

Poner 鈥渟witch鈥 es lo mismo que poner 鈥渟cript鈥 ?

Cuando hice el curso de JavaScript que imparti贸 Diego De Granda, nos dej贸 un reto鈥 Construir un algoritmo de piedra papel o tijera. Y pens茅鈥 隆Ey, porque no compartirlo con la comunidad!


/** 
 * Este c贸digo solo puede ser ejecutado en la consola del navegador.
 * Para ejecutarlo escribe: play()
 * En los parentesis escribe un n煤mero de 0 a 2
 * 0 es para elegir piedra
 * 1 es para elegir papel
 * 2 es para elegir tijeras
 */

// Declarar opciones a escoger del jugador
var rock = 0
var papper = 1
var sissors = 2

// Hacer funci贸n para poder jugar 
function play (choise) { 
    var min = 0
    var max = 3 //variables para establecer el rango en el que el PC puede escoger opciones para jugar 
    var alet = Math.floor(Math.random() * (max - min) + min); //Generar variable que redondee un n煤mero aletorio entre 0 y 2
    

    if (rock == choise) { //Si 0 es igual a la elecci贸n que hizo el jugador...
        console.log("you choose rock") //decir la variable
        if (alet = 0) { //evaluar
            console.log("CPU: rock");
            console.log("tie")
        } else if (alet = 1) {
            console.log("CPU: papper");
            console.log("lose");
        } else {
            console.log("CPU: sissors");
            console.log("win");
        }
    } else if (papper == choise) { //Si 1 es igual a la elecci贸n que hizo el jugador...
        console.log("you choose papper") //decir la variable
        if (alet = 0) { //evaluar
            console.log("CPU: rock");
            console.log("win")
        } else if (alet = 1) {
            console.log("CPU: papper");
            console.log("tie");
        } else {
            console.log("CPU: sissors");
            console.log("lose");
        }
    } else if (sissors == choise) { //Si 2 es igual a la elecci贸n que hizo el jugador...
        console.log(" you choose sissors") //decir la variable
        if (alet = 0) { //evaluar
            console.log("CPU: rock");
            console.log("lose")
        } else if (alet = 1) {
            console.log("CPU: papper");
            console.log("win");
        } else {
            console.log("CPU: sissors");
            console.log("tie");
        }
    } else {
        console.log("Opci贸n no valida")
    }
}

驴Qu茅 piensan del c贸digo?
Denme feedback plox

// Peque帽o juego de priedra, papel o tijera

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


if (jugador == 1) {
    alert("Elegiste: Priedra");
} else if (jugador == 2) {
    alert("Elegiste: Papel");
} else if (jugador == 3) {
alert("Elegiste: Tijeras");
} else {
    alert("Perder.");
}

Para ejecutar en cascada se utiliza

  • else / que su significado es (Si no)
  • else if / que su significado es (Si no SI)

Es increible lo mucho que se hace en este curso 馃榿

Visual Studio Code tiene muchas herramientas para facilitar y agilizar el desarrollo, un truco es que cuando comiences con un archivo .html en blanco solo escribas html y selecciones la segunda opci贸n html:5 y el rellenar谩 el esqueleto de una p谩gina web para ti, ejemplo:

Llevaba varias clases pregunt谩ndome varias clases que carajos pasaba con la etiqueta doctype, va genial hasta ahora

Para simplificar todo el 鈥淓squeleto鈥 de html, Solo escriban ! en la primera linea de codigo, le dan enter y ya les sale la estructura!!!, les dejo algunos atajos y cositas curiosas.
CTRL + N= Crear un archivo.
CTRL + S= Guardar Archivo.
Descarguen live server, una extensi贸n de VS muy buena para ver el output del codigo.
隆Mucha suerte!!! 馃挌馃挌馃挌馃挌

estan buenas las clases estoy re aprendiendo a programar y, estudie ingeniera en redes y comunicaciones

Buen d铆a, como insertar el emoticon?

me gusta como explica


Cordial saludo: Profesor Freddy y compa帽eros de clase, comparto como ha quedado el c贸digo, piedra, papel, tijera

Fredy es un excelente instructor, explica muy met贸dicamente, incre铆ble curso, incluso ya teniendo buen nivel de html y js vale la pena ver el curso

Tip: para saber que abrir un nuevo archivo es Control + N y guardarlo es Control + S, visual nos muestra los atajos de teclado en el lado izquierdo de la barra:

Comparto mi <script> mas condensado agregando la funci贸n para que la computadora elija aleatoriamente y nos de el resultado de cada 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) {       
            if(pc == 1) {            
        //Resultados si el jugador elige 1-piedra
            alert("Elegiste piedra \nLa computadora eligi贸 piedra \nEMPATE")
            } else if(pc == 2) {
            alert("Elegiste piedra \nLa computadora eligi贸 papel \nPERDISTE")
            } else if(pc == 3) {
            alert("Elegiste piedra \nLa computadora eligi贸 tijera \nGANASTE")
            }
        } else if(jugador == 2) {
        //Resultados si el jugador elige 2-papel            
            if(pc == 1) {
            alert("Elegiste papel \nLa computadora eligi贸 piedra \nGANASTE")
            } else if(pc == 2) {
            alert("Elegiste papel \nLa computadora eligi贸 papel \nEMPATE")
            } else if(pc == 3) {
            alert("Elegiste papel \nLa computadora eligi贸 tijera \nPERDISTE")
            }        
        } else if(jugador == 3) {     
        //Resultados si el jugador elige 3-tijera
            if(pc == 1) {
            alert("Elegiste tijera \nLa computadora eligi贸 piedra \nPERDISTE")
            } else if(pc == 2) {
            alert("Elegiste tijera \nLa computadora eligi贸 papel \nGANASTE")
            } else if(pc == 3) {
            alert("Elegiste tijera \nLa computadora eligi贸 tijera \nEMPATE")
            }
        } else {
            alert("Por favor elije una opci贸n v谩lida")
        }
    </script>

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>

Este es mi aporte, antes de ver esta clase, pause el v铆deo e intente hacer este c贸digo sin la ayuda de nada, solo usando el poquito de conocimiento l贸gico que tengo. Me imagino que as铆 no es, pero me siento satisfecho del resultado.

P.D.: No me funen es la primera vez que hago c贸digo por mi mismo 馃榿

<h1>Juego de Piedra 馃, Papel 馃摐鈥 o Tijeras 鉁傦笍鈥</h1>

        <h2>Seleccione una opci贸n para jugar</h2>

        <input type="button" value="Piedra" id="piedra">
        <input type="button" value="Papel" id="papel">
        <input type="button" value="Tijeras" id="tijera">

        <p>Puntaje 馃搳</p>
        <p>Humano 馃槑: <span id="jugador">0</span></p>
        <p>Robot 馃: <span id="computadora">0</span></p>
const btnPiedra = document
    .getElementById("piedra")
    .addEventListener("click", function () {
      piedra = 0;
      robot = aleatorio(3);

      if (piedra === robot) {
        jugador.innerHTML = "1";
      } else {
        computadora.innerHTML = "1";
      }
    }),
  btnPapel = document
    .getElementById("papel")
    .addEventListener("click", function () {
      piedra = 0;
      robot = aleatorio(3);

      if (piedra === robot) {
        jugador.innerHTML = "1";
      } else {
        computadora.innerHTML = "1";
      }
    }),
  btnTijera = document
    .getElementById("tijera")
    .addEventListener("click", function () {
      piedra = 0;
      robot = aleatorio(3);

      if (piedra === robot) {
        jugador.innerHTML = "1";
      } else {
        computadora.innerHTML = "1";
      }
    });

function aleatorio(max) {
  return Math.floor(Math.random() * max);
}

鉂わ笍