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

Ciclos

12/84
Recursos

Al igual que ir a la escuela, en programación hay operaciones que se repiten mientras se cumpla alguna condición (por ejemplo: ir a la escuela solo de lunes a viernes). Así que quédate si quieres aprender cómo funcionan 😉

¿Cómo funcionan los ciclos?

Hay varias formas de generar ciclos en programación. Pero todos siguen la misma lógica:

  1. Primero fijas las condiciones. Por ejemplo: “Mientras no sea sábado, domingo ni feriado”.

  2. Luego indicas lo que sucederá cuando las condiciones se cumplan (operaciones, funciones a ejecutar, entre otros). Por ejemplo: “Voy a la escuela”.

  3. Finalmente, indicas lo que sucederá cuando las condiciones dejen de cumplirse (operaciones, funciones a ejecutar, entre otros). Por ejemplo: “Me quedo en casa”.

Forma estandar de ejecutar ciclos

¿Por qué usar ciclos?

En programación, en ocasiones te toparás con código que tienes que repetir varias veces para lograr el efecto deseado. Quizás puedas usar funciones para resumirlos, pero ellas no resuelven el problema cuando te ves obligado a ejecutarla una y otra vez.

En estos casos, lo mejor es programar un ciclo. De este modo, el ciclo repetirá un fragmento de código tantas veces como sea necesario hasta que deje de cumplirse la condición que indicaste.

💡 Ojo, es importante que en el código escribas un modo de que el ciclo termine. Generalmente se hace aplicando en cada repetición una pequeña modificación a la variable donde se observa la condición.

Por ejemplo, en el ciclo de ir a la escuela que vimos arriba, cada vez que evaluamos la condición va a pasar un día. De ese modo, tarde o temprano llegaríamos al fin de semana o a un día feriado, y no sería necesario ir a la escuela.

Tu computadora no se va a quemar si por error escribes un ciclo infinito. Pero tu programa fallará cuando lo ejecute.


Ahora, usaremos esta información para modificar el código del juego de piedra, papel o tijera que creamos previamente. Vamos a crear un ciclo que nos permita hacer tres partidas seguidas, que guarde el número de victorias, y al final nos diga quien obtuvo más victorias.

Haz click aquí cuando estés listo para hacer la modificación 😉

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

Aportes 131

Preguntas 25

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

💪💚 Me siento muy afortunado por haber terminado el anterior curso de programación básica! Animo para todos los nuevos que entran!! lo que más importa es que nunca paren de aprender. 🚀

Recuerden que en la programación la practica hace al maestro! ^-^ 💪

Una forma interesante de ver los ciclos es verlos como “algo que da vueltitas” 😄.
.

.
Ese “algo” se va a mantener dando vueltitas siempre y cuando la condición que nosotros establezcamos sea verdadera. En el momento en el que nuestra condición llega a ser falsa ese “algo” deja de dar vueltas y el ciclo se detiene.
.
¿Pero que es ese algo? Ese algo es el código que queremos que se repita tantas veces como nosotros queramos, por ejemplo:
.

mientras hay comida:
    come

En este caso, la condición es "hay comida" y nuestro código sería "come". Entonces, entramos a dar vueltitas:
.

¿Hay comida? Sí.
    Come.
¿Hay comida? Sí.
    Come.
¿Hay comida? Sí.
    Come.
¿Hay comida? No.

-- Termina el ciclo o dejamos de dar vueltitas --

.
En resumidas cuentas, un ciclo nos permite repetir el mismo código tantas veces como queramos, solo necesitamos definir una condición para saber cuándo se dejará de ejecutar ese ciclo 😄.

Un ciclo es una secuencia de instrucciones de código que se ejecuta repetidas veces, hasta que la condición asignada a dicho bucle deja de cumplirse. Los 3 bucles más utilizados en programación son el bucle while, el bucle for y el bucle do-while. 👌

😂Ese Freddy tiene frases profundas como:

Voy a la escuela, Finjo que estoy poniendo atención

En las clases donde los profes no tenían vocación quizá, pero aquí en platzi, estoy enganchado al curso!!

Cada que un ciclo se reinicia, es decir, cada vez que un ciclo se ejecuta al menos una vez y empieza de nuevo se dice que itero una vez y empieza de nuevo, la segunda vez ya es una segunda iteración y así el ciclo va a iterar determinadas veces como tu le indiques o hasta que se cumpla la condición.
.
Conclusion: Iterar significa repetir un proceso con la intención de llegar a una meta.

Para dar formato y que se vea todo alineado y bonito es fácil, seleccionamos y le damos formato a la sección. Es útil para entender la secuencia del código aparte de que no lo hacemos de forma manual.

Los ciclos son instrucciones repetitivas que se cumplen mientras las condiciones establecidas sean verdaderas.
Todos los ciclos tienen que tener una condición que los frene.

“Nadie es eterno… en el mundo!!”

yo viendo la clase después de que murió Dario Gomez 😦

😄 Por acá les dejo un ejemplo de cómo sería el algoritmo que comenta Freddy llevado a la práctica. Si tienen alguna duda y alguien gusta que lo explique, con mucho gusto lo hago.

Nunca paren de aprender. 💚

“nadie es eterno en el mundo”

La forma de enseñar de nuestro profesor Freddy Vega, es incomparable, no me arrepiento de invertir cada sol en estos cursos, mi futuro poco a poco gana experiencia.

esa funcion de limpiar el plato no me gusta

excelente pensé que no podía entender pero todo es de disciplina =) 💪

Tomé el curso anterior de programación básica y se ve que mejoró bastante. Pese a mis años de experiencia, lo que me enseñan estos cursos es aprender a enseñar

Wow, es muy adictivo aprender esto, representa un reto muy complejo, al mismo tiempo no puedo dejar de ver el curso.

Minuto 1:56 Freddy haciéndole un homenaje a Dario Gomez, semanas antes de su muerte. Además de Teso es vidente

//Inicio con el 100% de energia
energia = 100

//Ciclo -> Mientras mi energia sea mayor que 20%, entonces correré
mientras(energia > 20){

	//Acciones que hago al correr
	moverpiernaDerecha();
	moverpiernaIzquierda();
	respirar();
	
	energia = energia - 10; // Cada vez que corro, mi energia va disminuyendo en un 10%
}

//El ciclo finaliza cuando mi energia, deja de ser mayor que 20%.

Minuto 1:54, Freddy dice “Nada es eterno en el mundo” y recordé que Darío Gomez murió. 😦

Dario Gomez es tan grande que hasta Freddy en medio de un curso le hizo su respectivo homenaje postumo jaja

Los ciclos son de las cosas más útiles en programación, pero hay que saber manejarlas 😬

EN EXCEL

=SI(Y(A1=“COMIDA EN EL PLATO”;B1=“TENGO HAMBRE”);“SEGUIR COMIENDO”;"DEJAR DE COMER ")
respuesta SEGUIR COMIENDO
si una de las dos condiciones anteriores A1 o B1 no se cumple la respuesta seria DEJAR DE COMER

piedra = 🪨
papel = 🧻
tijera = ✂️
🤣🤣🤣

Ciclos

Es mi primer curso en Platzi en programación, deseo aprender y estoy feliz porque siento que encontré la mejor escuela. Gracias Platzi

¿Pero si el plato no es mío?
Me pegan con la cuchara…

Prestar atención = aburrido
Fingir prestar atención = ok

mi forma de solicito 3 juegos seguidos

<code> 
```  <script>
        // funcion para numero aleatorio
        function resultado (max,min){
           return Math.floor(Math.random()*(max - min + 1) + min);
        }
        function eleccion (jugada){
            let elj =""
           if(jugada == 1 ){
             lelj ="🥌"
            } 
            else if( jugada == 2 ){
               elj ="📄"
            }
            else if ( jugada == 3) {
                elj=" ✂️"
            }
            else {
                elj="valor null"                
            } 
            return elj
        }
        //----------------------------------------------------------------------------------------------------------------
       let jugador = 0;
       let pc = resultado (3,1);
       let resul =4; 
        // ciclos
        while(jugador != resul ){
             // piedra 1 , papel 2 y tijera 3 
            jugador = prompt ("elije  1 🥌, 2 📄 y 3 ✂️ " );
            jugador++;
            alert ("tu elijes" + eleccion(jugador))
            alert ("pc elije"+ eleccion (pc))
            // combate
            if (jugador == pc){
            alert ("empate");
            } else if ( jugador == 1 && pc ==3 || jugador== 3 && pc==2 || jugador ==2 && pc== 1){
            alert("ganaste");
            
            } else{
                alert("perdiste");
            }

        }
         
la entropía si es eterna

¡¡Prácticar, prácticar y prácticar!!

Me encanta este curso!!! 😁 Los ejemplos que dan, la facilidad y el poco tiempo que se requiere.

[](

Es una ventaja poder crear ciclos o bucles para realizar cualquier tipo de tarea, pero además de eso nos sirve por si una tarea necesita ejecutarse más de una vez

IMPORTANTE

Todos los ciclos deben tener un fin, deben ser FINITOS

Todo ciclo debe tener una condición que lo frene, ningún ciclo es infinito

Este curso se grabó antes de la muerte de Darío Gómez, Freddy invocó la función “Nadie es eterno en el mundo” y pum! El ciclo se detuvo.

Todos los ciclos deben tener una condición que los frena, sino serían ciclos infinitos y nunca pararía. Ningún ciclo es infinito.

Yo como con la mano 😄
min: 2:13

Que épico suena la palabra “Iterar” 😎 es como muy pro, gran explicación de los ciclos!

La estructuración de la programación es como tu organización en tu vida real …si tienes organizado todo encontraras las cosas mas rápido para ser cambiada mejorada o simplemente eliminadas y que no causes un desastre en tu vida

En mi opinión, un ejemplo de ciclo podría ser el siguiente:

 while(platzi == "Existe"){
                alert("Nunca pararás de aprender")
            }

Esta clase me dio hambre!

condiciones y ciclos

la educación no tiene edad, solo nosotros los latinos pensamos así

solo son ciclos :V

No son infinitos, hay una condición que frena el ciclo. loop

  • Ejemplo : Hacer ejercicio: cuando estas corriendo, te despiertas y dices quiero correr y tu ciclo es quiero correr poner pierna adelante, pierna atrás, pierna adelante, pierna atrás, respira, seguir corriendo mientras tenga energía, y cuando se acaba la energía termina. Hay una variable de la energía disponible para correr y esta se va disminuyendo hasta que parar.
  • Ejemplo 2: Mientras haya comida en el plato y tenga hambre seguiré comiendo, pero si alguna de estas dos (porque hay un y que indica que una de las dos debe cumplirse) deja de ser verdad entonces paro de comer y limpio el plato.

muchas gracias llego de la escuela enciendo la computadora y me pongo a programar eso me encanta

Break como código o <Ctrl> + <Break> te pueden salvar… y evitar un Memory Overflow…

Es tu paracaidas para cuando un ciclo no se detiene por alguna razón… Si, algo se te pudo pasar por alto.

Matematicas Discretas

Uyyy las clases me están pareciendo super bn y son muy vacanas

🎶 nada es eterno en el mundo 🎶
Detalles 🫶

Un ciclo es algo que se ejecuta de forma repetitiva mientras algo es verdad, todos los ciclos tienen un fin.

Interesante el uso de los ciclos en la programacion, escuche que hay algunos que permiten el desarrollo de los videojuegos al momento de pelear con los jefes. Es casi la misma logica cuando uno los quiere enfrentar. Interesante la verdad. A seguir

Excelente ejemplo de ciclos en un juego: Los Sims 4.

**He aquí un pequeño ciclo usando while;
La página no dejara de preguntar, ¿cuánto es 2+2?, hasta que no le ingresen una repuesta correcta. Ena este caso 4
**

<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<title>matemática </title>
<script>
let repuesta;
while (repuesta != 4 ){
pregunta = prompt("¿Cuánto es (2 + 2)??");
repuesta = pregunta;
alert(" Respondiste: " + repuesta);
if (repuesta == 4){
alert("¡¡¡Felicidades eres un Genio!!!");
} else {
alert(" Respuesta incorrecta.\n Vuelve a intentarlo");
}
}
</script>
</head>

Javascript en este momento me deja en la luna y mas aya jajaja

“Nada es eterno en el mundo” Freddy Vega

buena perrito, todo bien explicado, si me ha servido mucho este curso

ESTOY MUY CONTENTO DE ENCONTRAR A PLATZI !!!
BRINDO POR ESO

Los ciclos, bucles o loop son utilizados para realizar tareas repetitiivas basados en una condición, y terminan cuando la condición asignada a dicho bucle deje de cumplirse.
while( condicion) {
sentencia
}
while (haya comida en el plato) {
comer
}
Los tres tipos más comunes de bucles son:
• for
• while
• do while

Los ciclos son aquellos que nos permiten llegar desde un punto A a un punto B a partir de una cantidad de repeticiones que cumplen una condición y nos permiten tener flujos e trabajo más efectivos. “Ana Belisa Martinez” Excelente clase del Curso de pensamiento lógico: Manejo de datos, estructuras y funciones!

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"/>
   <title> Piedra,papel y tijeras </title>
   <script>
      // 1 es piera, 2 es papel y 3 es tijera
      function aleatorio(min,max){
         return Math.floor(Math.random()*(max-min+1)+1)
      }

      function eleccion(jugada){
         let resultado = ""
         switch(jugada){
         case 1:
            resultado = "piedra 🪨"
            break
         case 2:
            resultado = "papel 🗞️"
            break
         case 3:
            resultado = "tijeras ✂️"
            break
         }
         return resultado
      }
      
      let jugador = 0
      let pc = aleatorio(1,3)
      jugador = Number(prompt("elige 1 para piedra, 2 para paple y 3 para tijera: "))
      //alert("elegiste : " + jugador)

      alert("pc elige: " + eleccion(pc))
      alert("tú eliges: " + eleccion(jugador))
      
      if(jugador == pc){
         alert("ES UN 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> juguemos </h1>

</body>
</html>

Los ejemplos de Freddy son únicos y la forma en la que explica los conceptos de la programación lo hacen fácil, simple y accesible a toda persona que guste de aprender.
Mis felicitaciones a todo el equipo Platzi.

![](https://static.platzi.com/media/user_upload/image-97937aa9-889c-468f-95a2-88e49bfb383b.jpg)
Tmre una letrita nomas me cagó todo, es cierto mucha frustración y ya lo estoy asimilando, vamos gogogogogogo
Nada es eterno en el mundo

sigo aprendiendo y preparándome para saber programar confiar en el progreso

Interesante, reafirmar los conceptos básicos es importante, para repasar y entrar con todo. #nuncaParesDeAprender

A mi me da risa de freddy como aveces hace expresiones, como nada es eterno, en el mundooo jejejeje

Hola Freddy disculpa pero te equivocas cuando dices que nada es eterno porque hay un Dios en los cielos que es eterno y nunca va a dejar de existir un saludo que Dios te Bendiga eres un exelente profesor

“nada es eterno… en el mundo”

Bueno, si me costo hacerlo solo, aquí está solución que he desarrollado para hacer un contador de victorias, he dividido todo por funciones, entonces tengo así:

  • Un diccionario donde guardo los valores indicados por cada numero para selección, en caso que se ingrese un numero o cosa no ejecuta el código.
  • la función aleatoria para la pc.
  • una función para mostrar la selección del usuario y pc.
  • una función para evaluar el resultado.
  • una función para reiniciar el juego si ni el usuario o la pc llegan a tres victorias, en esta función devuelvo los valores a nulo o vació para que el usuario y la pc puedan elegir otra cosa.
  • una función para contar las victorias, en esta simplemente uso if para analizar quien llega primero a las 3 victorias, sino que se reinicie el juego. Ahora que lo pienso, puedo usar un ciclo para evitar usar if y else.
  • por ultimo una función que se llama jugar, el cual le da el valor a la pc, toma el valor del usuario y llama a las funciones mostrar mensaje, el resultado del combate y el contador de victorias.

ya finaliza el código llamando la función jugar para que todo se ejecute, está es la solución que le dí, luego voy a probar el ciclo en contar las victorias.

<!DOCTYPE html>
<head>
    <head>
        <meta charset="utf-8">
        <title>TopClassicGames</title>
        <script>
            var piedraPapelTijera = {
                "1": "piedra🥌",
                "2": "papel📰",
                "3": "tijera✂"
            };
            
            function aleatorioPc(min, max){
                return Math.floor(Math.random()*(max - min + 1) +1)
            }

            var jugador = "";
            var pc = "";
            var victoriasJugador = 0;
            var victoriasPc = 0;

            function mostrarEleccion(){
                alert("has ecogido ==> " + piedraPapelTijera[jugador])
                alert("Pc ha elegido ==> " + piedraPapelTijera[pc])
            };

        function resultadoCombate(){
            if (jugador == pc){
                alert("Empate😑");
            } else if(jugador == 1 && pc == 3 || jugador == 2 && pc == 1 || jugador == 3 && pc ==2){
                alert("has ganado😄");
                victoriasJugador ++;
            } else{
                alert("Perdiste😌");
                victoriasPc ++;
            }
        }

        function reiniciarJuego(){
            jugador = "";
            pc = "";
            jugar();
        }
        
        function contadorVictorias(){
            if(victoriasJugador == 3){
                alert("Has ganado, obtenido 3 Victorias")
            } else if(victoriasPc == 3){
                alert("Has perdido, has obtenido 3 derrotas")
            } else {
                reiniciarJuego()
            }
        }

        function jugar(){
            pc = aleatorioPc(1,3);
            jugador;
            
            do {jugador = prompt("Escoge: 1 ==> Piedra🥌, 2 ==> Papel📰, 3 ==> Tijera✂");
            } while(!(jugador in piedraPapelTijera));

            mostrarEleccion();
            resultadoCombate();
            contadorVictorias();
            
        }

        jugar();


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

Así se ve mi código, lo hice antes de ver la explicación de Freddy, había visto el curso anterior de programación así que usé mis conocimientos sobre el loop for. La última condición parece algo extraña
¿Por qué si partida es == a rondas (3) - 1?
Sencillamente porque como partida inicia en “0” y el loop se ejecuta una última vez cuando partida es “2” necesito hacer esa pequeña operación aritmética…
Pero quizás alguien me dirá, oye, podrías ahorrarte ese mambo mental si solo pusieras el loop como:

for(let partida = 1; partida <= rondas; partida++)
{
etcétera.
} 

Y yo te diré…que tienes razón, me di cuenta ahora xd

Discrepo con lo de cortar los ciclos como práctica generalizada. Si el lenguaje de programación permite ejecuciones paralelas, es posible y muy útil tener ciclos infinitos. En Scratch por ejemplo se usa mucho. No siempre significa ejecutar las instrucciones dentro del bucle. Por ejemplo, en Unity por cada frame se invoca el método Update() de cada objeto.

ciclos --> realizar una accion mientras cumpla una condicion

este man va ta rapido que no entiendo ni una mierd4

Interesante lo que se viene.

  • El ciclo repetirá un fragmento de código tantas veces como sea necesario hasta que deje de complirse la condición inicial.**

me encanta como vamos avanzando , hasta aqui va mi aporte y continuamos 😄

//funciones
function initial(jugador) {
    let nuevoIngreso = prompt(jugador);
    while (nuevoIngreso <= 0 || nuevoIngreso > 3 || nuevoIngreso == null || nuevoIngreso == "") {
        alert("INGRERSA DATO CORRECTO");
        nuevoIngreso = prompt(jugador);
    }
    return jugadorvar = nuevoIngreso;
}

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

function playGame(jugadas) {
    let election = "";
    jugadas == 1 ? election = "🪨" : jugadas == 2 ? election = "📄" : jugadas == 3 ? election = "✂️" : "";
    return election;
}

function combat() {
    jugadorvar == pc ? alert("EMPATE") : (jugadorvar == 1 && pc == 3 || jugadorvar == 2 && pc == 1 || jugadorvar == 3 && pc == 2) ? win++ + alert("GANASTE") : lose++ + alert("PERDISTE");
}

function ganador() {
    win > lose ? alert(`ganadas => ${win} , perdidas => ${lose}`) + alert("YOU WIN 🏆") : lose > win ? alert(`ganadas => ${win} , perdidas => ${lose}`) + alert("YOU LOSE 💀") : "";
}

//variables
let jugador = "elige:  1) para 🪨  2) para 📄  3) para ✂️"
let jugadorvar = 0;
let win = 0;
let lose = 0;

// inicializando
while (win < 3 && lose < 3) {
    pc = aleatorio(1, 3);
    initial(jugador);
    alert(`Pc elegiste ${playGame(pc)}`);
    alert(`elegiste  ${playGame(jugadorvar)}`);
    combat();
}
ganador();

cuando dijo que cerrábamos ciclos cortandonos el pelo si soy porq me lo corte a los hombros

sera que con este curso ya aprendo a programar o falta otro?

uwu

Es muy buena la explicacion de los ciclos y hay que tomar en cuenta en que ocasiones sera mas conveniente utilizar una u otra

El famoso “bucle” ➰

Se me descompuso el contador de hambre 🥲🥲🥲

Aquí va mi aporte con la reducción que pude hacer (sin perder el humor del juego…)

Espero les guste… Si pueden comprimirlo más estaría encantado de entender cómo lo harían.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Piedra, papel o tijera</title>
        <script>
        // Lugar para poner las funciones
            // Definición de Funciones
            function aleatorio (min, max) {
                 return Math.floor( Math.random() * (max - min + 1) + min)
            }

            function elccion(jugada) {
                let resultado = ""
                // Condicionales de usuario
                if(jugada == 1) {
                    resultado = "🪨piedra✊"
                } else if(jugada == 2) {
                    resultado = "🧻para papel🖐️"
                } else if(jugada == 3) {
                    resultado = "✂️tijera✌️"
                } else {
                    resultado = "🫠 No sabe jugar o quiere perder...😒"
                }
                return resultado
            }

            // Definición de variables
            let jugador = 0
            let pc = 0
            let win = 0
            let lose = 0
           
            while (win < 3 && lose <3){
                pc = aleatorio(1, 3)
                // Pregunta del sistema
                jugador = prompt("Escribe: 1 para 🪨piedra✊, 2 🧻para papel🖐️ y 3 para ✂️tijera✌️") 
                //alert("elegiste" + jugador)
                alert("PC elige: " + elccion(pc))           
                alert("Mi perro eligió: " + elccion(jugador))           
                // Combate
                if(jugador == pc) {
                    alert("Mi perro empató 🤝")
                } else if(jugador == 1 && pc == 3 || jugador == 2 && pc == 1 || jugador == 3 && pc == 2) {
                    alert("Mi perro ganó la buena 🪨piedra✊ nunca falla")
                    win++
                } else {
                    alert("Mi perro perdió")
                    lose++
                }
            } 
            alert("Mi perro ganó " + win + " y perdió " + lose)
        
        </script>

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

Hola!
Este es mi intento de utilizar el ciclo do while para realizar lo que comenta Freddy en el video.
.
Cualquier comentario es bienvenido.
.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Piedra, papel o tijera.</title>
    </head>
    <body>
        <h1></h1>
        <p></p>
        <script>
            function aleatorio(min, max) {
                return Math.floor( Math.random() * (max - min + 1) + min)
            }
          
            function eleccionJugadorPc(numero) {
            let resultado = 0
              if(numero == 1) {
                resultado = "Piedra"
              } else if(numero == 2) {
                resultado = "Papel"
              } else if(numero == 3) {
                resultado = "Tijeras"
              } else {
                resultado = "ERROR"
              }
              return resultado
              }

            function combate (pc,jugador) {
              resultadoCombate = 0
              if(pc == jugador) {
                resultadoCombate = "Empate"
             } else if(jugador == 1 && pc == 3) {
                resultadoCombate = "Tu ganaste!"
             } else if(jugador == 2 && pc == 1) {
                resultadoCombate = "Tu ganaste!"
             } else if(jugador == 3 && pc == 2) {
                resultadoCombate = "Tu ganaste!"
             } else {
                resultadoCombate = "Perdiste! :("
             }
              return resultadoCombate
            }

            var round = 1

            do {
            var jugador = 0
            let pc = aleatorio(1,3)
            alert("Round número: " + round)
            jugador = prompt("Elige: 1 para Piedra, 2 para Papel y 3 para Tijeras.")
            alert("Tu elejiste: " + eleccionJugadorPc(jugador))
            alert("El PC eligio: " + eleccionJugadorPc(pc))
            alert(combate(pc,jugador))
            round++;
            }

            while (round <= 3);
        </script>
    </body>
</html>

Los ciclos son pedazos de código que se ejecutan hasta que se cumpla o se deje de cumplir una condición.

excelente

<code> <!DOCTYPE html>
    <html>
        <head> 
            <meta charset="utf-8" />
            <title>¿Que Probabilidad Hay?</title>
            <script>
                function probable(inf, sup) {
                    return Math.floor(Math.random() * (sup - inf + 1) + inf)
                }
                function faraon(love) {
                    let shady = ""
                    if (love == 1) {
                        shady = "elegiste 1"
                    }else if (love == 2) {
                        shady = "elegiste 2"
                    }else if (love == 3) {
                        shady = "elegiste 3"
                    }else {
                        shady = "no elegiste correctamente, recarga la pajina"
                    }
                }
                let participante = 0
                let pregunta = ""
                let sup = 3
                let inf = 1
                let robot = probable(1,3)
                alert("¿...que probabilidad hay...?")
                alert("acuerdate que tienes que hacer una pregunta como: que probabilidad hay de que -- seas mi amigo? ASI QUE VAMOS!!!")
                pregunta = prompt("Que probabilidad hay de que...?")
                participante = prompt("elige numero de 1-3")
                    if (participante == 1) {
                        alert("elegiste el numero 1")
                    }else if (participante == 2) {
                        alert("elegiste el numero 2")
                    }else if (participante == 3) {
                        alert("elegiste el numero 3")
                    }else {
                        alert("no elegiste un numero o elegiste mal")
                    }
                    if (pregunta == "") {
                        alert("no preguntaste nada") 
                    }
                alert("Que probabilidad hay de que " + pregunta)

                alert("(1)...uno...(1)")
                alert("(2)...dos...(2)")
                alert("(3)...tres...(3)")

                //probabilidad
                if (robot == participante) {
                    alert("***hay probabilidad***")
                }else {
                    alert("####no hay probabilidad###")
                }

            </script>
        </head>
        <body>
            <h1>***Que probabilidad hay***</h1>
            <p>que probabilidad hay de que te guste este juego</p>
            <p>recarga para volver a jugar</p>
            <p>...</p>
            <p>creo que si hay probabilidad de que sigas jugando</p>
            <p>recarga jejeje adios UwU</p>
        </body>
    </html>

aca mi juego basado en piedra papel o tijera, que probabilidad hay?
presente colombia

Excelente forma de enseñar.

excelente clase

Que buena explicación.

Jaja a este loop le agregaría el daño al hígado y a los riñones dependiendo del nivel de calidad de lo que comemos. a eso agregarle una base de datos que contenga la información de cada alimento en el plato.

ningún ciclo es infinito - y nada es eterno en el mundooo jajaja Dario Gomez ( cantante colombiano musica popular) min 1:54