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

Refactor del c贸digo usando funciones

11/84
Recursos

Aportes 85

Preguntas 61

Ordenar por:

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

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

Lo que menciona Freddy aqu铆

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

MIS APUNTES CON MUCHO 馃挌 FOR ALL OF YOU

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

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

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

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

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

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

Para recordar:

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

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

recomiendo ir programando mientras Freddy lo hace

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

Ejemplo del programa que explica Freddy

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

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

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

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

esto es lo que program茅 que dijera 馃槂

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

{ } llaves
[ ] corchetes
( ) par茅ntesis

por lo menos as铆 los conozco yo.

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

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

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

LES DEJO UN POCO DE DEFINICI脫N DE CONCEPTOS:

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

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

As铆 me qued贸 con las funciones

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

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

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

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

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

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

</script>

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

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

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

aprend铆 por la malas que no se usan los acentos

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

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

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

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

Generalmente la distribuciones se identifica porque:

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

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

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

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

Espero sea 煤til, saludos! 馃槃

Me encanta que impl铆citamente Freddy llam贸 鈥渓enguaje indecente鈥 a JavaScript (y coincido con 茅l).
Python tiene todo mi respeto y admiraci贸n.

Interesante he visto varias veces el video para poder entenderlo, pero no pod铆a avanzar sin hacerlo, tanto el jugador como la pc van a pasar por la funcion antes de ir al combate XD muy buena !

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

Freddy sos un crack!! estoy muy encantado con este curso y apenas es el comienzo.

A seguir aprendiendo 馃檶馃榿!!

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<title>Rock, Paper And Scissors</title>
<script>
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function choice(move) {
let result = ""
if(move == 1) {
result = 鈥減iedra 馃鈥
} else if (move == 2) {
result =鈥減apel 馃搩鈥
} else if (move == 3) {
result =鈥渢ijera 鉁傦笍鈥
} else {
result =鈥渋nvalid鈥
}
return result
}

let Player = 0
let Pc = randomNumber(1, 3)

Player = prompt(鈥淪elect 1 for Rock, 2 for Papers, 3 For Scissors鈥)

alert("You Select " + choice(Player))
alert("Pc Select " + choice(Pc))

if(Player == Pc){
alert(鈥淒raw鈥)
}
else if((Player == 1 && Pc == 3) || (Player == 3 && Pc == 2) || (Player == 2 && Pc == 1)){
alert(鈥淵ou Win鈥)
} else {
alert(鈥淵ou Lose鈥)
}
</script>
</script>
</head>
<body>
<h1>Rock, Paper And Scissors</h1>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Piedra, Papel o tijera</title>
        <script>
            function aleatorio(min, max){
               return Math.floor( Math.random() * (max - min + 1) + min)
            }
            function eleccion(jugada){
                let resultado  = ""
                if(jugada == 1) {
                    resultado = "Elegiste 馃"  
                }
                else if(jugada == 2) {
                    resultado ="Elegiste 馃搩"  
                }
                else if (jugada == 3) {
                    resultado = "Elegiste 鉁傦笍" 
                }
                else  {
                    resultado = "MAL ELEGIDO"
                }  
                return resultado
            }
            //1 es piedra, 2 es papel, 3 es tijera
            let jugador = 0
            let pc = aleatorio(1, 3)
            jugador = prompt("Elige: 1 para piedra 馃, 2 para papel 馃搩, 3 para tijera .鉁傦笍")            
            //alert("Elegiste "+ jugador)

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

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

            else {
                alert("PERDISTE")
            }
        </script>
    </head>
    <body>
        <h1>Piedra, Papel o tijera</h1>
    </body>
</html>

Remember

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

Que interesante como a pesar de conocer lo que habla, uno siempre encuentra algo en lo que mejorar y una de esas cosas es en las buenas practicas del programador.

Poco a poco voy entiendo las funciones

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

Gracias por esta oportunidad!

ya cada vez voy entendiendo m谩s de este lenguaje. me encanta

Asi lo resolv铆 yo 馃槉鉁忥笍

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Piedra, papel o tijera</title>
    <script>
        function aleatorio(min, max) {
            return Math.floor(Math.random() * (3 - 1 + 1) + 1)
        }
        function eleccion(jugada) {
            if (jugada == 1) {
                return 'Piedra鉁'
            }
            else if (jugada == 2) {
                return 'Papel馃搫'
            }
            else if (jugada == 3) {
                return 'Tijera 鉁傦笍'
            }
            else {
                return 'Valor invalido'
            }
        }
        function validacion(jugador, pc){
            final = ''
            if (jugador == pc) {
                final = 'Empate 馃數'
            } else if ((jugador == 1 && pc == 3) || (jugador == 2 && pc == 1) || (jugador == 3 && pc == 2)) {
                final = 'Ganaste 馃煝'
            } else {
                final = 'Perdiste 馃敶'
            }
            return final
        }

        // 1 鉁, 2 馃搫, 3 鉁傦笍
        let jugador
        let pc = aleatorio(1, 3)
        // Elecci贸n
        jugador = prompt('1 鉁, 2 馃搫, 3 鉁傦笍')
        alert('El jugador eligio ' + eleccion(jugador))
        alert('El PC elegio ' + eleccion(pc))
        // Validaciones del juego
        alert(validacion(jugador, pc))
    </script>
</head>

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

</html> 

Eres un crack ense帽ando

Tal vez compartiendo errores cometidos tambi茅n se aprenda, en mi caso, al momento de escribir la funci贸n omit铆 cambiar la palabra jugador por jugada y eso provocaba que la PC eligiera mal, adem谩s de que no se respetaban las reglas para saber cuando hab铆a ganado. Despu茅s de revisar el c贸digo identifique el error y el programa funcion贸 sin problemas.

Los mejores amigos de un programador son los errores. En programaci贸n tu mejor maestro siempre ser谩 el 煤ltimo error cometido.
- Programaci贸n Zen jejej

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

鈥淟os par茅ntesis o para declarar o ejecutar una funci贸n鈥.

Gracias por la clase, muy bien explicado,

Es impresionante las posibilidades infinitas que tiene la programaci贸n. Eres como un chef que tiene mucho ingredientes y uno lo combina como m谩s le guste! Felicidades por el curso.

Funci贸n (parametros) Return = Regresa lo que se solicit贸.

Aqu铆 les dejo el c贸digo que realic茅:

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

function choice(userChoice) {
  let result = ""
  if(userChoice == 1) {
    result = "馃П"
  } else if(userChoice == 2) {
    result = "馃Щ"
  } else if(userChoice == 3) {
    result = "鉁"
  } else {
    result = "Mala elecci贸n"
  }
  return result
}

function combat (playerChoice, pcChoice) {
  let score = ""
  if(playerChoice == pcChoice) {
    score = "馃馃馃 EMPATE 馃馃馃"
  } else if((playerChoice == 1 && pcChoice == 3) || (playerChoice == 2 && pcChoice == 1) || (playerChoice == 3 && pcChoice == 2)) {
    score = "馃コ馃コ馃コ GANASTE 馃コ馃コ馃コ"
  } else {
    score = "馃槹馃槹馃槹 PERDISTE 馃槹馃槹馃槹"
  }
  return score
}

let pcChoice = randomInt(1, 3)
playerChoice = parseInt(prompt("Elige: 1 - Piedra, 2 - Papel, 3 - Tijera"))

alert("Elegiste: " + choice(playerChoice))
alert("PC eligi贸: " + choice(pcChoice))
alert(combat(playerChoice, pcChoice))

隆Hola! Hice el programa usando switch para la lectura de la elecci贸n; fue un poquito dif铆cil de modularizarlo en un solo switch porque el tipo de valor (1, 2, 3) ten铆a que ser igual, tanto para player como para pc, tarde un poco en darme cuenta, pero al final lo resolv铆 convirtiendo el entero aleatorio en un string. Por lo dem谩s es todo bastante parecido, con la excepci贸n de un bot贸n que a帽ad铆 al final de la p谩gina para jugar devuelta, pero sinceramente es bastante in煤til frente al atajo de teclado (鈥淔5鈥) 馃槄 隆Espero que les sea de utilidad!

//SCRIPT:

let random = Math.floor(Math.random() * (3 - 1 + 1) + 1) //Generate a random number between 1 and 3
let pc = random. toString(); //Convert the random integer value to a string, so we can work with the variables corresponding to the player and the pc in the same block of code
let player = prompt("Elige: 1 para piedra, 2 para papel, 3 para tijera") //Ask the player what move he wants to make and save his answer in the player variable

//PLAY

function select(play) { //Modularization of the code
	let result = "" //Result is for the moment, an empty string
	switch(play) { //Being 'play' equal to player or pc variables
		case "1": //if play = 1...
			result = " Piedra 馃"
		break;
		case "2": //if play = 2...
			result = " Papel 馃Щ"
		break;
		case "3": //if play = 3...
			result = " Tijera 鉁傦笍"
		break;
		default: //if play = something else...
			result = " If you don't choose rock, paper, scissors you will lose 馃槥" 
	
	}
	return result //select return result variable
}

alert("Eliges:" + select(player)) //The program show the player election
alert("PC elige:" + select(pc)) //The program show the PC eletion

//COMBAT!

if(pc == player) {
    document.write('<span class="draw">' + '<center>' + '<strong>' + "Draw 馃" + '</strong>' + '</center>' + '</span>')
} else if(player == "1" && pc == 3) {
    document.write('<span class="win">' + '<center>' + '<strong>' + "You win! 馃コ" + '</strong>' + '</center>' + '</span>')
} else if(player == "2" && pc == 1) {
    document.write('<span class="win">' + '<center>' + '<strong>' + "You win! 馃コ" + '</strong>' + '</center>'  + '</span>')
} else if(player == "3" && pc == 2) {
    document.write('<span class="win">' + '<center>' + '<strong>' + "You win! 馃コ" + '</strong>' + '</center>' + '</span>')
} else {
    document.write('<span class="lose">' + '<center>' + '<strong>' + "You lose 馃槩" + '</strong>' + '</center>' + '</span>')
}

//And that's the Rock, Paper, Scissors algorithm! 猬嗭笍
/*CSS*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600&display=swap');

body {
    background-color: black;
    color: aliceblue;
    font-family: 'Poppins', sans-serif;
}

h1 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 42px;
}

.馃 {
    color: #A45FFF;
}

.馃Щ {
    color: #02AFFF;
}

.鉁傦笍 {
    color: #FDDE5C;
}

.draw, .win, .lose {
    font-size: 30px;
}

.draw {
    color: #F4BE43;
}

.win {
    color: #99CB41;
}

.lose {
    color: #FE5F5C;
}

img {
    border-radius: 10px;
}

.reload_button {
    margin-top: 15px;
    width: 150px;
    height: 45px;
    border-radius: 30px;
    font-size: 20px;
    color: aliceblue;
    background-color: #141F3E;
}
<!--HTML-->

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="Styles.css">
    <style>@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600&display=swap');</style>
    <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>Rock Paper Scissors</title>
</head>
<body>
    <center><h1><label class="馃">Rock </label> <label class="馃Щ">Paper</label> <label class="鉁傦笍">Scissors!</label></h1></center>
    <script src="Rock_Scissors_Paper.js"></script>
    <center><i><p>Rock paper scissors is a very simple game, and it works with the following algorithm:</p></i></center>
    <center><img src="Algoritmo.webp" alt="Algoritmo del Piedra Papel o Tijera"></center>
    <center><button class="reload_button" id="reload" onclick="location.reload()">Play again?</button></center> <!--Reload page-->
</body>
</html>

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

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

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

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

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

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

++_**Lo que menciona Freddy aqu铆

estoy segura que va a ser mencionada m谩s adelante y sera llamada Hoisting) y en efecto es algo extremadamente genial **_++

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

muchas gracias por sus aportes profe.

Programar es manejar la frustracion del 鈥渆rror perdido鈥.>

Muchas gracias Freddy.

Aqu铆 sustitu铆 en una funci贸n a los dos bloques if de selecci贸n de jugada, la funci贸n ficha recibe dos par谩metros nom(jugador o pc) y selec(la jugada que elijio).

function ficha(nom,selec){
if(selec == 1){
alert(nom+" Elijio 馃尠")
} else if(selec == 2){
alert(nom+" Elejio 馃摑")
} else if(selec == 3){
alert(nom+" Elejio 鉁")
} else {
alert(nom+" Elejio 鉂")
}
return
}

ficha("jugador",jugador)
ficha("pc",pc)

cuando cambias el c贸digo repetido por funciones y te corre

Algo que me llamo mucho la atenci贸n fue cuando menciona Freddy que cuando queremos colocarle un nombre a una funci贸n, este nombre suele ser un verbo, adem谩s de que si hay c贸digo muy repetitivo podemos aprovechar las funciones y as铆 solo con invocarla la podemos reutilizar el c贸digo.

Una forma m谩s divertida de ver las matem谩ticas que dur茅 tanto a帽os aprendiendo en el colegio. El ejemplo del sandwich le dio mucho sentido. Gracias 馃槂

Algo interesante para tomar en cuenta de una funci贸n es que鈥

Las variables, dentro de las funciones, solamente existen si las pasas por par谩metro, si no las pasas por par谩metro las variables no se ven.

Es una buena pr谩ctica que nosotros, como programadores, nos acostumbremos a que, antes de usar una funci贸n, primero necesitamos definirla o declararla.

<!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>
function aleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};

/* FUNCION PARA MEJORAR CODIGO ELIMINANDO BLOQUE elecci贸n FORMADO POR IF, ELSE IF */

function eleccion(jugada) {
  let resultado = '';
  if (jugada == 1) {
    resultado = ' piedra 馃Й';
  } else if (jugada == 2) {
    resultado = ' papel 馃';
  } else if (jugada == 3) {
    resultado = ' tijera 鉁';
  } else {
    resultado = ' MAL ELEGIDO ';
  }
  return resultado;
};

/*  1 es piedra; 2 es papel; 3 es tijera. */
let jugador = 0;

/* VARIABLES MINIMOS Y MAXIMOS */
let min = 1;
let max = 3;

/* LLAMADO A LA FUNCION */
let pc = aleatorio(min, max);
jugador = prompt("Elije: 1 para piedra, 2 para papel, 3 para tijera");

/* UTILIZACION DE LA FUNCI脫N */
alert('PC elige:  ' + eleccion(pc) );
alert( 'Tu eliges:  ' + eleccion(jugador))
/* UTILIZACION DE LA FUNCI脫N */
 
/* jugador */
/* PARTE DEL C脫DIGO REEMPLAZADA PO LA FUNCI脫N */
/* if(jugador == 1) {
 alert('Elegiste piedra 馃Й');
}else if(jugador == 2) {
 alert('Elegiste papel 馃');
}else if(jugador == 3) {
 alert('Elegiste tijera 鉁');
}else {
 alert('Elegiste perder');
} */
/* jugador */

/* pc */
/* if (pc == 1) {
  alert('PC elige piedra 馃Й');
} else if (pc == 2) {
  alert('PC elige papel 馃');
} else if (pc == 3) {
  alert('PC elige tijera 鉁');
} */
/* pc */

/* COMBATE */
if (pc == jugador) {
  alert('EMPATE');
} else if (jugador == 1 && pc == 3) {
  alert('GANASTE');
} else if (jugador == 2 && pc == 1) {
  alert('GANASTE');
} else if (jugador == 3 && pc == 2) {
  alert('GANASTE');
} else {
  alert('PERDISTE');
}

</script>
</head>

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

</html>

Las funciones me permiten ahorrar l铆neas de c贸digo, haciendo que mi aplicaci贸n funciones m谩s r谩pido, es un tema muy interesante que debemos ampliar.

Tener presente las buenas practicas es tan importante como aprender los fundamentos. Recuerden que el 80% del tiempo vamos a estar leyendo c贸digos, no escribiendo, y un c贸digo prolijo nos hace entender mucho mas r谩pido y mejor. Tambi茅n a la hora de corregir o modificar nos va a facilitar mucho.
Es como tener la casa limpia y ordenada, as铆 vemos con claridad las cosas y sabemos donde est谩n cada una de ellas.

aqu铆 est谩 mi c贸digo

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

      function eleccion(jugada) {
        let resultado = "";
        if (jugada == 1) resultado = "馃 piedra 馃";
        else if (jugada == 2) resultado = "馃摐 papel 馃摐";
        else if (jugada == 3) resultado = "鉁傦笍 tijera 鉁傦笍";
        else {
          resultado = "鉂屸潓鉂孍legiste la opcion incorrecta 鉂屸潓鉂屸潓";
        }
        return resultado;
      }

      let jugador = 0;
      let pc = aleatorio(1, 3);
      jugador = prompt(
        "Elije: \n 馃 1 para piedra 馃 \n 馃摐 2 para papel 馃摐 \n  鉁傦笍 3 para tijera 鉁傦笍"
      );

      alert("pc elige: " + eleccion(pc));
      alert("tu eliges: " + eleccion(jugador));
      //combate

      if (pc == jugador) alert("馃 EMPATE 馃");
      else if (
        (jugador == 1 && pc == 3) ||
        (jugador == 2 && pc == 1) ||
        (jugador == 3 && pc == 2)
      ) {
        alert("馃榿 GANASTE 馃榿");
      } else {
        alert("鉂屸潓鉂 PERDISTE  鉂屸潓鉂屸潓");
      }
    </script>
  </head>
  <body>
    <h1>Piedra, Papel o tijera</h1>
  </body>
</html>
> 

Es genial no tener que repetir el codigo y poder almacenarlo en una funcion. 馃榿

馃槃 隆Hola a todos! Les dejo un ejemplo lo que ser铆a a nivel pr谩ctico el ejemplo que da Freddy al inicio.

file:///C:/Users/User/Desktop/PROGRAMAR/piedrapapelotijera.html
aqui esta mi juego

鉂わ笍

Fui siguiendo al pie de la letra lo que dijo, y me cost贸 un poco entender lo que hicimos, pero creo que en una segunda vuelta al video le entend铆 mejor

Recuerden que siempre una funcion me tiene que retornar algo. (Al menos que sea una una funcion vacia)

Ejemplo:

function pedido(camisa,dinero){
return camisa
}

En pocas palabras digamos que vas a hacer un pedido, pero para un pedido necesitas primero pedir lo que quieres que seria camisa en este caso y dinero para comprarlo.

Entonces al verificar mi pedido y el dinero, me retornan mi producto que es la camisa 馃槂

Anal贸gicamente en la programaci贸n de m谩quinas CNC las funciones son llamadas ciclos de maquinado, con una sola l铆nea de programaci贸n haces la operaci贸n de barrenar (acercarse-entrar-salir de la broca) pero ya solo cambias las coordenadas x , y en donde deseas esos barrenos.

Mi modesto aporte, en Espa帽a le llamamos:
corchetes [ ]
par茅ntisis ( )
llaves { }
Acento circunflejo ^

As铆 va m铆 c贸digo:

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

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

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

frustraci贸n a los errores return resultad0 !! grrrrr

si quieren corregir errores pueden descargar eslint tmb

funciones:pedacitos de codigo