Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 17D : 12H : 30M : 3S

Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

Funciones matemáticas y números aleatorios en JavaScript19/36

Vamos a empezar a crear las bases de lo que podría ser un videojuego

 

Para esto debemos resolver algunos problemas:

 

¿Cómo dibujar el mapa del juego?

¿Cómo dibujar los personajes?

¿Cómo definir las posiciones aleatorias de los personajes?

 

Recuerda:

 

  • Math.floor() devuelve el número entero por debajo de los decimales.

  • Math.ceil() devuelve el siguiente número entero arriba de los decimales

  • Math.random() devuelve un número aleatorio de 0 a 0.999..

when la cagas en la multiplicación XD mori de risa gracias freddy muy bueno el curso.

Math.random() es una función que retorna un punto decimal, un número aleatorio dentro el rango [0, 1]. El rango no puede ser elegido o cambiado por el usuario.

me encanta cuando aplaudes i cantas ese momento me he emocionado mucho…

Solución al problema de descargar las imagenes:
extensión ( .webp )

  1. copiar la url completa
  2. ingresar a google
  3. pegar la url del punto 1
  4. luego de esto aparece que la imagen no fue encontrada, pero en la parte inferior aparece una
    opción que dice “buscar por imagen”
  5. aparecera la imagen.
  6. click derecho guardar imagen
  7. les aparece de la siguiente forme (unnamed.png)
  8. le cambian el nombre y listo.

Hola chicos, veo que algunos tienen problemas con las imagenes, en primer lugar yo no soy un experto en usar photoshop o algun otro editor de fotos pero me tome el tiempo de generar las imagenes de los animales les un link para que lo descarguen
https://www.mediafire.com/file/bjgwx4yiuh0ci1s/ANIMALES_PNG.zip/file

Math: es una clase estática que tiene una colección de funciones esenciales que nos permite hacer operaciones matematicas complejas.
Math.ceil: redondear para arriba
Math.floor: redondear para abajo
Math.random(): un numero aleatorio entre (0 - 0.999)

Es muchisimo más facil hacer esto en Python, sin embargo me propuse primero terminar el curso de Programación Básica antes de continuar aprendiendo Python.

Una sugerencia para los que no han comprado Platzi Premium y quieren aprender Python: Lean el libro “Automate the boring stuff with Python”, les enseña desde cero como hacer codigo en Python.

Espero que les haya servido la sugerencia!(:

Una formula alternativa para generar números aleatorios:

Math.round(Math.random() * (max - min) + min)

A diferencia del método floor, el método round redondea números con criterio matemático, es decir redondea el numero al siguiente entero mayor si el numero después del decimal es mayor o igual a cinco. Seguirá el patrón contrario si es menor a cinco.

Me puse a pensar cómo funcionaba la fórmula de random con máximos y mínimos. Y trabajé por este mini proyecto, si pueden indicarme si estoy en lo cierto lo valoraré mucho! ❤️

Captura de pantalla_2020-06-15_22-09-07.png
Captura de pantalla_2020-06-15_22-10-28.png
Captura de pantalla_2020-06-15_22-11-21.png
Captura de pantalla_2020-06-15_22-12-12.png

otro otro otro otro otro otro otro clarisimo !

El único problema cuando lo pones volteado es que no te va a salir los números 0 o 5 nunca por la forma en que se ha creado la función. Es decir, salen todos los de adentro pero no los extremos. Esto es porque 0 - 5 +1 = - 4, si el aleatorio sale muy pequeño (por ejemplo 0.0001) Math.floor(-0.0004) es -1 que +5 es 4. Es decir el limite superior es 4. En el caso inverso (aleatorio 0.9999= Math.floor(-3.9996) es -4 y +5 es 1, es decir el limite inferior será 1.

Otra función de Math que se puede usar para redondear un numero correctamente, es “Math.round”, de esta manera si los decimales son mayores de cero punto cinco, el resultado es el numero mayor, viceversa, si es menor de cero punto 5 el numero sera el menor.

el enlace de descarga me daba la imagen en un formato raro, tuve que usar un convertidor de formato aquí les dejo las imágenes por si a alguien le pasa lo mismo.
tile.pngvaca.png

Veo que muchos hemos tenido problemas con la descargar de imágenes, aparentemente la solución es:

En al área de Archivos y Enlaces, darle clic derecho a la flechita de descargar. Después seleccionar “Guardar enlace como…” y eso nos permitirá guardar el archivo con su extensión correcta.

No sé si alguien más lo hizo en comentarios, pero como se me descargaban en formato .webp las imágenes de cerdo y pollo tuve que utilizar el siguiente convertidor:

https://imagen.online-convert.com/es/convertir/webp-a-png

Dejo las imágenes también por si las necesitan.

cerdo.png
pollo.png

Higthlights

  1. Tile así se denomina la parte gráfica sobre la que se hace un video juego.
  2. Los números aleatorios en Javascript son decimales.
  3. Normalmente se usa parseInt() para convertir cualquier número en entero pero hay otras alternativas para tener mayor control:

ceil(); que nos permite redondear por encima del número.
floor(); que nos permite redondear por debajo del número.

  1. Math() es un método estático que tiene un conjunto de funciones por dentro. Una de ella es radom que se escribe de la siguiente manera: Math.random();

  2. La función Math,random(); retorna valores entre (0.000~1 y el 0.999~9)

Para los que tienen problema con descargar las imagenes

Hagan uso de este conversor, les ahorrara tiempo y estress.
https://imagen.online-convert.com/es/convertir/webp-a-png

24:14 Cuando coloca

z = aleatorio(5,0);

Freddy dice que funciona, pero no es así. Si notan sólo se encuentran números entre 1 y 4. Esto es debido a la función floor y que cambia un signo en nuestra función. Cuando aplicamos floor a un número negativo funciona al revés que con un número positivo: floor( 0.1 ) = 0, y floor ( -0.1 ) = -1. Prueben lo siguiente en la consola:

Math.floor(0.1);
Math.floor(-0.1);

Una solución es usar ceil, y modificar la ecuación ligeramente:

resultado = Math.ceil(Math.random()* (maxi - mini - 1)) + mini;

Pero tendremos problemas nuevamente si colocamos primero el mínimo y luego el máximo.
Una solución es aplicar cada ecuación cuando se de cada caso

function aleatorio (mini,maxi)
{
  var resultado;
  if( mini < maxi )
  {
    resultado = Math.floor(Math.random()* (maxi - mini + 1)) + mini;
  }
  else
  {
    resultado = Math.ceil(Math.random()* (maxi - mini - 1)) + mini;
  }
  return resultado;
}

Pero estamos escribiendo unas líneas de más, ya que basta con intercambiar maxi y mini.

function aleatorio (mini,maxi)
{
  var resultado;
  if( maxi < mini )
  {
    var temporal = maxi;
    maxi = mini;
    mini = temporal;
  }

  resultado = Math.floor(Math.random()* (maxi - mini + 1)) + mini;

  return resultado;
}

Ambos códigos solucionan el problema, usa el que más te sea fácil de entender.

Quisiera tener esa habilidad mental que tiene Fredy, jejeje

funciona el visual estudio code

Mi explicación de porqué el algoritmo funciona aún cuando se invierten los valores es la siguiente:
Cuando se calcula

max - min + 1

Y el máximo es menor al mínimo, el resultado es negativo o cero.
Bueno, después de multiplicar este resultado por el número aleatorio, y ser redondeado, el resultado también es negativo. Pero, al final se le suma el mínimo, lo cual da como resultado el inverso aditivo de este número (el mismo número, pero con signo distinto).

esto se ve mejor si hacemos el cálculo paso a paso:
(consideremos que nuestro número aleatorio es 0.310)

Tenemos que

min = 9
max = 1

floor(0.310 * (1 - 9 + 1)) + 9
floor(0.310 * (-7)) + 9
floor(-2.17) + 9
-2 + 9
7

Así te genera dos numeros aleatorios y te los guarda en un array de dos
para poder utilizarlo como coordenadas

var z;
var coords= new Array(2);

for(var i=0; i<2;i++)
{
  z = aleatorio (10,490);
  coords[i]=z;
  document.write(coords[i] + ",");

}


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

Platzi puede destruir universidades jajaja

Hola, recuerden que math.random devuelve dentro del objeto un número entre 0 y 1, pero nunca va a ser 0 ni 1. Puede ser 0.000001, 0.999999, 0.0000000000001 y así sucesivamente, pero nunca llega a cero ni a uno.

Un ejemplo (-5, 5)
donde min = -5 y maxi = 5.

Entonces:
Math.floor(Math.random() * (5 - (-5) + 1)) + min;
en JS se resuelve el paréntesis primero y matemáticamente sería algo así:

Math.floor(Math.random() * (5 - (-5) + 1)) + min;
Math.floor(Math.random() * (10 + 1)) + min;
Math.floor(Math.random() * 11 + min;
Ahora math.random * 11 , recuerden nuevamente que math.random devuelve un número aleatorio entre 0 y 1 pero que nunca llega a 0 ni a 1.

Teniendo en cuenta lo anterior imaginen que math.random devuelve los siguientes números:
0.0001 y 0.9999. Hagamos la operación:

con Math.random = 0.0001:
Math.floor(0.0001() * 11 + min;
Math.floor(0,0011) + min;
Math.floor(0,0011) + (-5);
Math.floor(-4,9989‬);
recuerden que Math.floor redondea hacia abajo, entonces sería
Math.floor(-4);


con Math.random = 0.9999:
Math.floor(0.9999‬() * 11 + min;
Math.floor(10,9989‬) + min;
Math.floor(10,9989‬) + (-5);
Math.floor(5,9989)
recuerden que Math.floor redondea hacia abajo, entonces sería
Math.floor(5)

Entonces, cuando math.random devuelve aleatoriamente los números 0.0001 y 0.9999 el resultado es -4, 5,

Descubrí que como matemático soy un buen veterinario jajaja, muy buena la clase

en la función también se puede hacer toda la lógica directamente en el return de esta forma

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

Aquí está mi ejercicio. Le agregué una línea de document.write adicional para que no terminara en coma (,) sino en un punto (.).
.
¿Qué les parece?
.

Captura1.JPG
var z;

for(var i=0; i<9; i++)
{
  z = aleatorio(10, 20);
  document.write(z + ", ")
}

document.write(z + ".");

function aleatorio (min, maxi)
{
  var resultado;
  resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
  return resultado;
}

.
Esto es emocionante, aunque la plataforma últimamente no me deja estudiar mucho porque no carga.

Para poner entre paréntesis como hace Freddy en el minuto 19:55 es sencillo.
1- Selección del texto que quieres que este entre paréntesis.
2- Mantén pulsado Shift + ( (En mi caso es la tecla “8” pero busquen donde tienen los paréntesis su teclado)

Que Genial ☺

Muy claro todo 

  

Los programadores siempre dividen un problema grande , en problemas pequeños.

Que clase de cara es esa Jajajajaj XD esa es la cara que yo pongo cuando mi novia me deja… a cierto no tengo una xdxdxd Captura.PNG

0.001 * 11 = 0.011

Apuntes de clase:
ParseInt() : convierte un número Float a Integer.
Math() : Es una clase estatica que contiene una coleccion de funciones especiales que nos permiten hacer operaciones matematicas complejas.
Math.ceil : Devuelve el numero entero por debajo de los decimales (Ej: Math.ceil(3,7)=4).
Math.floor: Devuelve el numero entero por debajo de los decimales. (Ej: Math.floor(3,7)=3).
Math.random(): Devuelve un numero aleatorio de 0 a 0.9999…
La sentencia return finaliza la ejecución de la función y especifica un valor para ser devuelto a quien llama a la función

Ey ! no olviden descargar las imagines y al momento de guardarlas cambiar la extencion a .PNG

Pues yo hice unos daditos xD

var z = aleatorio(1, 6);
var y = aleatorio(1, 6);


document.write("dado1\b = " + z);
document.write("<br>dado2\b = " + y + "</br>");

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

Excelente, por lo menos ya estoy entendiendo

0.001*11=0.011 Freddy tuvo un error ahí en el minuto 13:14

platzi.png

platzi es lo mejor
me ha enseñado muchas cosas nuevas que no conocía, siempre me ha interesado el desarrollo y la programación pero no sabia por donde empezar y gracias a dios encontré platzi de verdad muchas gracias.

Un consejo si en las imagenes les aparece por ex: pollo.webp o algo asi solo renombrenlo por .png ex: pollo.png

Me gusta la idea de crear projectos para aprender

Dato importante: ¿Cómo piensa un programador?

  • “Un programador ver un problema y lo descompone en problemas más pequeños”

Para hacer cálculos en javascript se usa la clase estática Math
Math es (también) un objeto

Tiene atributos como:

Math.PI
Math.E

Tiene métodos como:

Math.sqrt(numero)
Math.floor(numero)
Math.ceil(numero)
Math.random()

Math.random() retorna un número aleatorio entre 0.000 y 9.999
Para generar un número aleatorio “y” cualquiera en el rango [min ; max> en función de la variable aleatoria “x” que solo va de cero a uno [0;1> se usa la función de la recta:
y = m*x + b
y: resultado
m: pendiente = (max - min)
x: número aleatorio = Math.random()
b : término independiente = min
Ya que Math.random() genera un número aleatorio en el rango [0;1> es decir, no llega a 1, la función aleatorio tampoco llegará jamás al valor max, como mucho a max - 1.
Esto se resuelve ampliando el rango al momento de escribir la función aleatorio.

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

Es posible cargar toda la función en la consola para probarla si se la escribe en una sola línea:

function aleatorio(a,b){var y = Math.floor((b+1-a)*Math.random()+a); return y;}
vanp-aleatorio.png

Variables Locales: variables creadas dentro de una función, solo pueden ser accedidas desde dentro de la función.
Variables Globales: podemos acceder a ellas desde cualquier parte del código.

Tengo el codigo de la siguiente manera, pero no me arroja numeros aleatorios al recarga el html, donde esta el error:

var z = aleatorio(10, 20);
document.write(z);

function aleatorio(min, max)
{
var resultado;
resultado = Math.floor(Math.randon() * (max - min + 1)) + min;
return resultado;
}

Que diferencias hay entre un parseInt(3.8) = 3 ;
y un Mat.floor (3.8) = 3;
???

que podria incluso destruir empresas, jajajajaja XD

Me podrían ayudar con esto?
Quiero que la respuesta sea enviada a un text area, o siquiera en el mismo documento

var num1 = document.getElementById("numero1");
var num2 = document.getElementById("numero2");
var botoncito = document.getElementById("boton");
botoncito.addEventListener("click", evalua);

var answer = document.getElementById("respuesta");
function evalua ()
{
console.log(botoncito.addEventListener)
if (num11=true ) {
  for(i=0; i<10; i++)
  {
    var num11 = parseInt(num1.value);
    var num22 = parseInt(num2.value);
    var x = random (num11, num22);
    document.write(x + ", ")
  }
}else {
  document.write("Pon un numero pendejo");
}
}

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

hice un piedra papel o tijeras usando un Math random
https://codepen.io/nicolasprieto66/project/full/DPkjvB/

Por alguna razón no me funciona el document.write() por lo que he visto en la red hay algunas actualizaciones que lo bloquean pero no veo la solución. ¿Algún consejo?

alguno le pudo cambiar la extension a las imagenes?? la imagen de vaca y pollo no me descargan en formato png y cambio la extension la imagen no me sale 😦

Dale un corazon , si te gusta la remera que trae Freddy puesta 😄 !!!

Me gusta Platzi!

document.addEventListener("mousedown",dibujarMouse);
document.addEventListener("mouseup",dibujarMouse);
var cuadrito = document.getElementById("mouse_dibujo");//elemento que nos trae un atributo de java srip a travez de su id
var papel = cuadrito.getContext("2d");
var x1, y1, x2, y2;
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
  lienzo.beginPath();//función para arrancar trazo
  lienzo.strokeStyle = color;//atributo del objeto lienzo color de lineazo.
  lienzo.lineWidth=3;
  lienzo.moveTo(xinicial,yinicial);//moviendo de donde inicia la linea
  lienzo.lineTo(xfinal,yfinal);//hasta donde llega la línea
  lienzo.stroke();//dibujar la línea
  lienzo.closePath();//cerrar el trazo
}


function dibujarMouse(evento)
{
  colorcito="pink";
  console.log(evento);
  var tipo=evento.type;

   console.log(tipo);

   x1=evento.layerX;
   y1=evento.layerY;

 if (tipo=="mousedown")
 {
   x2=x1;
   y2=y1;
 }

 if (tipo=="mouseup")
 {
   dibujarLinea(colorcito,x1,y1,x2,y2,papel);
}
}

Para descargar las imágenes tile.png y cerdo.png copien y peguen el enlace de las imágenes en la siguiente web y le clickean en descargar: https://imagecyborg.com/

Excelente clase Platzi

Utilice un while, entonces se va a escribir en pantalla números aleatorios desde 1 a 2000, el ciclo termina cuando es valor 1

var z=aleatorio(1,2000);
while (z!=1) {
    document.write("<p><b><cr>"+z+"</cr></b></p>");
    z=aleatorio(1,2000);
    console.log("Numero ->"+z);
}
document.write(z);


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

Esta es la Clave!

Math.floor() devuelve el número entero por debajo de los decimales.

Math.ceil() devuelve el siguiente número entero arriba de los decimales

Math.random() devuelve un número aleatorio de 0 a 0.999…

Buenisimo!

no pude desarrollar el problema del Mouse, entro en Bucle varias veces, vi lo que hicieron los demás pero no encontré lógica en la estruturacion del codigo, porfavor Freddy nos puedes mostrar como se hace el ejercicio?

la vaca no me descarga.
jjajaja help me.

¿alguno sabe porq al decargar los archivos que se necesitan para el ejercicio no me salen .png sino .webp?

Si descargas las imágenes automáticamente, te van a guardar como .webp Como dicen los demás, guárdalas como .png para que el código funcione.

Para guardar las imágenes en PNG, simplemente denle guardar como y coloquen al final del nombre la extensión .png

Math.floor() devuelve el número entero por debajo de los decimales.

Math.ceil() devuelve el siguiente número entero arriba de los decimales

Math.random() devuelve un número aleatorio de 0 a 0.999…

Vaya, creo que me emociono programando de más.
01.png02.png03.png04.png

Comunidad, ¿alguno de casualidad me puede pasar las imágenes en un archivo .rar? Es que me dice error y solamente el único que me dejó descargar fue el pollo

Aquí está mi aporte. Aunque se generan el número de valores aleatorios indicados en el input (tal y como se muestra en la consola), aun sigo trabajando para su representación dentro del cuadro de texto de resultados. Es más complicado de lo que parece si no haces el document.write y sin quitar el body de tu html.generadorAleatorios.jpg

Enlace para cambiar el formato .web a .png de las imagenes
https://imagen.online-convert.com/es/convertir-a-png

No había pensado la ecuación como max - min + 1 sino solo la diferencia entre el máximo y mínimo, pero de esta forma nunca tomaría el máximo valor. Apliquemos la aleatoriedad entonces para crear posiciones de personajes.

La ecuación funciona aunque se pongan al revés los números por que el último paso es sumar el min, y el mínimo siempre va a ser más grande que el resultado, por lo que el resultado siempre será positivo. Aquí la comprobación:

Captura.PNG
Sin título.png

Para los que tienen problema con la descarga de las imagenes en .png aqui dejo un enlace para que las descarguen.

https://arkticstm.cteraportal.com/invitations?share=6fafc57b382f64d927a3

Escribiendo en codigo la ecuacion de un numero aleatorio

Funciones matematicas de javascript

Reproduzcan el tutorial a velocidad 1.25 x si quieren ver la versión militar de Freddy

multiplicar en numero decimales equivale a lo mismo que multiplicar en porcentajes

¿Por qué es necesario sumarle 1 a maxi - mini antes de multiplicar el random?

Hola gente.
Les dejo mi pequeño aporte hecho diferente:

const numeroAleatorio = (min, maxi) => resultado = Math.floor(Math.random() * (maxi - min + 1)) + min
const contenedor = document.querySelector('.caja')

//Podemos cambiar el numero maximo y minimo. Estos numero son el rango en el que se genera el numero aleatorio.
const NUMBER_MIN = 10
const NUMBER_MAXI = 20

for(let i = 0; i < 10; i++) {
    const pharagraph = document.createElement('p')
    const number = numeroAleatorio(NUMBER_MIN, NUMBER_MAXI)
    const text = document.createTextNode(number)
    pharagraph.appendChild(text)
    contenedor.appendChild(pharagraph)
}
screenshot.407.jpg

No se me carga el video. Que tristeza que tengo

7:47 - 7:52 Freddy te desperdicias como profesor deberías ser músico

yo, al terminar esta clase:

Les adjunto un desafío que me entretuvo varias horas…
Viendo el código de la página de este ERP nos proponía completar el desafío y si lo lograbamos nos postularía para un acceso laboral automáticamente.
Nos pone a prueba en el manejo de la consola del Browser y conocimiento JS.
Nota: El objetivo es descubrir la contraseña que está escondida en el Código.
Desafío Odoo

Con este código voy a empezar a jugar el Baloto.

yo en esta clase

![](yo-en-clase-de-matematicas-espera-como-sacasteeso-como-salio-16613943.png

puede que la pregunta suene tonta o no, pero,¿este curso oeste tipo de programacion es usada para ingenieria de sistemas?

¿por que es floor (3.78) 3
y ceil es (3.78) es 4?

¿El Math siempre debe ir en mayúscula?

return.png

No me corría el código, es increíble como una mayúscula te rompe el código

alguien tiene las imagenes de la vaca y el pollo en .png? cuando las descargue me salen en formato .webp

Lo divertido comienza ahora

me salió tremendo bololó al intentar hacer la ecuación XD, la de Freddy es más sencilla 😉

AJAJJ y así es como le dicen a uno “échelo automático” y el baloto se hace millonario con solo tener ese código.

Funciones matemáticas de JS, Clase estática Math. Es una colección de funciones especiales que permiten realizar funciones matemáticas especiales.

Muchachos yo sé que Fredy se ve muy caja pero para los que se pregunten si hay una función que redondeé al número que tenga más cerca es Math.round
Por ejemplo yo hice la mía así:

/**
 * The intRand function returns the value of a number rounded to the nearest integer within a given range
 * @param {number} min the minimum value that the function can return
 * @param {number} max the maximum value that the function can return
 */
function intRand(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

Acepto criticas constructivas e insultos también

para que sirve el return , no entendi

Hola a todos. Así resumí un poco la función de dibujo con algunos cambios en las variables para que no dibuje los animales unos sobre otros:

function dibujar()
{
if(fondo.cargaOK)
{
papel.drawImage(fondo.imagen,0,0);
}
if(vaca.cargaOK)
{
console.log(cantidad);
for(var v=0; v < cantidad; v++)
{
var a = aleatorio(0,400);
var b = aleatorio(0,420);
var c = aleatorio(0,380);
var d = aleatorio(0,410);
var e = aleatorio(10,390);
var f = aleatorio(10,420);
papel.drawImage(vaca.imagen, a, b);
papel.drawImage(cerdo.imagen, d, c);
papel.drawImage(pollo.imagen, e, f);
}
}
}

Excelente video , Genial Freddy Lo maximo ! 

Que pasa cuando en una funcion el return retorna el  -1 ?? ya   que varias veces he visto código de esa manera

when la cagas en la multiplicación XD mori de risa gracias freddy muy bueno el curso.

Math.random() es una función que retorna un punto decimal, un número aleatorio dentro el rango [0, 1]. El rango no puede ser elegido o cambiado por el usuario.

me encanta cuando aplaudes i cantas ese momento me he emocionado mucho…

Solución al problema de descargar las imagenes:
extensión ( .webp )

  1. copiar la url completa
  2. ingresar a google
  3. pegar la url del punto 1
  4. luego de esto aparece que la imagen no fue encontrada, pero en la parte inferior aparece una
    opción que dice “buscar por imagen”
  5. aparecera la imagen.
  6. click derecho guardar imagen
  7. les aparece de la siguiente forme (unnamed.png)
  8. le cambian el nombre y listo.

Hola chicos, veo que algunos tienen problemas con las imagenes, en primer lugar yo no soy un experto en usar photoshop o algun otro editor de fotos pero me tome el tiempo de generar las imagenes de los animales les un link para que lo descarguen
https://www.mediafire.com/file/bjgwx4yiuh0ci1s/ANIMALES_PNG.zip/file

Math: es una clase estática que tiene una colección de funciones esenciales que nos permite hacer operaciones matematicas complejas.
Math.ceil: redondear para arriba
Math.floor: redondear para abajo
Math.random(): un numero aleatorio entre (0 - 0.999)

Es muchisimo más facil hacer esto en Python, sin embargo me propuse primero terminar el curso de Programación Básica antes de continuar aprendiendo Python.

Una sugerencia para los que no han comprado Platzi Premium y quieren aprender Python: Lean el libro “Automate the boring stuff with Python”, les enseña desde cero como hacer codigo en Python.

Espero que les haya servido la sugerencia!(:

Una formula alternativa para generar números aleatorios:

Math.round(Math.random() * (max - min) + min)

A diferencia del método floor, el método round redondea números con criterio matemático, es decir redondea el numero al siguiente entero mayor si el numero después del decimal es mayor o igual a cinco. Seguirá el patrón contrario si es menor a cinco.

Me puse a pensar cómo funcionaba la fórmula de random con máximos y mínimos. Y trabajé por este mini proyecto, si pueden indicarme si estoy en lo cierto lo valoraré mucho! ❤️

Captura de pantalla_2020-06-15_22-09-07.png
Captura de pantalla_2020-06-15_22-10-28.png
Captura de pantalla_2020-06-15_22-11-21.png
Captura de pantalla_2020-06-15_22-12-12.png

otro otro otro otro otro otro otro clarisimo !

El único problema cuando lo pones volteado es que no te va a salir los números 0 o 5 nunca por la forma en que se ha creado la función. Es decir, salen todos los de adentro pero no los extremos. Esto es porque 0 - 5 +1 = - 4, si el aleatorio sale muy pequeño (por ejemplo 0.0001) Math.floor(-0.0004) es -1 que +5 es 4. Es decir el limite superior es 4. En el caso inverso (aleatorio 0.9999= Math.floor(-3.9996) es -4 y +5 es 1, es decir el limite inferior será 1.

Otra función de Math que se puede usar para redondear un numero correctamente, es “Math.round”, de esta manera si los decimales son mayores de cero punto cinco, el resultado es el numero mayor, viceversa, si es menor de cero punto 5 el numero sera el menor.

el enlace de descarga me daba la imagen en un formato raro, tuve que usar un convertidor de formato aquí les dejo las imágenes por si a alguien le pasa lo mismo.
tile.pngvaca.png

Veo que muchos hemos tenido problemas con la descargar de imágenes, aparentemente la solución es:

En al área de Archivos y Enlaces, darle clic derecho a la flechita de descargar. Después seleccionar “Guardar enlace como…” y eso nos permitirá guardar el archivo con su extensión correcta.

No sé si alguien más lo hizo en comentarios, pero como se me descargaban en formato .webp las imágenes de cerdo y pollo tuve que utilizar el siguiente convertidor:

https://imagen.online-convert.com/es/convertir/webp-a-png

Dejo las imágenes también por si las necesitan.

cerdo.png
pollo.png

Higthlights

  1. Tile así se denomina la parte gráfica sobre la que se hace un video juego.
  2. Los números aleatorios en Javascript son decimales.
  3. Normalmente se usa parseInt() para convertir cualquier número en entero pero hay otras alternativas para tener mayor control:

ceil(); que nos permite redondear por encima del número.
floor(); que nos permite redondear por debajo del número.

  1. Math() es un método estático que tiene un conjunto de funciones por dentro. Una de ella es radom que se escribe de la siguiente manera: Math.random();

  2. La función Math,random(); retorna valores entre (0.000~1 y el 0.999~9)

Para los que tienen problema con descargar las imagenes

Hagan uso de este conversor, les ahorrara tiempo y estress.
https://imagen.online-convert.com/es/convertir/webp-a-png

24:14 Cuando coloca

z = aleatorio(5,0);

Freddy dice que funciona, pero no es así. Si notan sólo se encuentran números entre 1 y 4. Esto es debido a la función floor y que cambia un signo en nuestra función. Cuando aplicamos floor a un número negativo funciona al revés que con un número positivo: floor( 0.1 ) = 0, y floor ( -0.1 ) = -1. Prueben lo siguiente en la consola:

Math.floor(0.1);
Math.floor(-0.1);

Una solución es usar ceil, y modificar la ecuación ligeramente:

resultado = Math.ceil(Math.random()* (maxi - mini - 1)) + mini;

Pero tendremos problemas nuevamente si colocamos primero el mínimo y luego el máximo.
Una solución es aplicar cada ecuación cuando se de cada caso

function aleatorio (mini,maxi)
{
  var resultado;
  if( mini < maxi )
  {
    resultado = Math.floor(Math.random()* (maxi - mini + 1)) + mini;
  }
  else
  {
    resultado = Math.ceil(Math.random()* (maxi - mini - 1)) + mini;
  }
  return resultado;
}

Pero estamos escribiendo unas líneas de más, ya que basta con intercambiar maxi y mini.

function aleatorio (mini,maxi)
{
  var resultado;
  if( maxi < mini )
  {
    var temporal = maxi;
    maxi = mini;
    mini = temporal;
  }

  resultado = Math.floor(Math.random()* (maxi - mini + 1)) + mini;

  return resultado;
}

Ambos códigos solucionan el problema, usa el que más te sea fácil de entender.

Quisiera tener esa habilidad mental que tiene Fredy, jejeje

funciona el visual estudio code

Mi explicación de porqué el algoritmo funciona aún cuando se invierten los valores es la siguiente:
Cuando se calcula

max - min + 1

Y el máximo es menor al mínimo, el resultado es negativo o cero.
Bueno, después de multiplicar este resultado por el número aleatorio, y ser redondeado, el resultado también es negativo. Pero, al final se le suma el mínimo, lo cual da como resultado el inverso aditivo de este número (el mismo número, pero con signo distinto).

esto se ve mejor si hacemos el cálculo paso a paso:
(consideremos que nuestro número aleatorio es 0.310)

Tenemos que

min = 9
max = 1

floor(0.310 * (1 - 9 + 1)) + 9
floor(0.310 * (-7)) + 9
floor(-2.17) + 9
-2 + 9
7

Así te genera dos numeros aleatorios y te los guarda en un array de dos
para poder utilizarlo como coordenadas

var z;
var coords= new Array(2);

for(var i=0; i<2;i++)
{
  z = aleatorio (10,490);
  coords[i]=z;
  document.write(coords[i] + ",");

}


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

Platzi puede destruir universidades jajaja

Hola, recuerden que math.random devuelve dentro del objeto un número entre 0 y 1, pero nunca va a ser 0 ni 1. Puede ser 0.000001, 0.999999, 0.0000000000001 y así sucesivamente, pero nunca llega a cero ni a uno.

Un ejemplo (-5, 5)
donde min = -5 y maxi = 5.

Entonces:
Math.floor(Math.random() * (5 - (-5) + 1)) + min;
en JS se resuelve el paréntesis primero y matemáticamente sería algo así:

Math.floor(Math.random() * (5 - (-5) + 1)) + min;
Math.floor(Math.random() * (10 + 1)) + min;
Math.floor(Math.random() * 11 + min;
Ahora math.random * 11 , recuerden nuevamente que math.random devuelve un número aleatorio entre 0 y 1 pero que nunca llega a 0 ni a 1.

Teniendo en cuenta lo anterior imaginen que math.random devuelve los siguientes números:
0.0001 y 0.9999. Hagamos la operación:

con Math.random = 0.0001:
Math.floor(0.0001() * 11 + min;
Math.floor(0,0011) + min;
Math.floor(0,0011) + (-5);
Math.floor(-4,9989‬);
recuerden que Math.floor redondea hacia abajo, entonces sería
Math.floor(-4);


con Math.random = 0.9999:
Math.floor(0.9999‬() * 11 + min;
Math.floor(10,9989‬) + min;
Math.floor(10,9989‬) + (-5);
Math.floor(5,9989)
recuerden que Math.floor redondea hacia abajo, entonces sería
Math.floor(5)

Entonces, cuando math.random devuelve aleatoriamente los números 0.0001 y 0.9999 el resultado es -4, 5,

Descubrí que como matemático soy un buen veterinario jajaja, muy buena la clase

en la función también se puede hacer toda la lógica directamente en el return de esta forma

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

Aquí está mi ejercicio. Le agregué una línea de document.write adicional para que no terminara en coma (,) sino en un punto (.).
.
¿Qué les parece?
.

Captura1.JPG
var z;

for(var i=0; i<9; i++)
{
  z = aleatorio(10, 20);
  document.write(z + ", ")
}

document.write(z + ".");

function aleatorio (min, maxi)
{
  var resultado;
  resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
  return resultado;
}

.
Esto es emocionante, aunque la plataforma últimamente no me deja estudiar mucho porque no carga.

Para poner entre paréntesis como hace Freddy en el minuto 19:55 es sencillo.
1- Selección del texto que quieres que este entre paréntesis.
2- Mantén pulsado Shift + ( (En mi caso es la tecla “8” pero busquen donde tienen los paréntesis su teclado)

Que Genial ☺

Muy claro todo 

  

Los programadores siempre dividen un problema grande , en problemas pequeños.

Que clase de cara es esa Jajajajaj XD esa es la cara que yo pongo cuando mi novia me deja… a cierto no tengo una xdxdxd Captura.PNG

0.001 * 11 = 0.011

Apuntes de clase:
ParseInt() : convierte un número Float a Integer.
Math() : Es una clase estatica que contiene una coleccion de funciones especiales que nos permiten hacer operaciones matematicas complejas.
Math.ceil : Devuelve el numero entero por debajo de los decimales (Ej: Math.ceil(3,7)=4).
Math.floor: Devuelve el numero entero por debajo de los decimales. (Ej: Math.floor(3,7)=3).
Math.random(): Devuelve un numero aleatorio de 0 a 0.9999…
La sentencia return finaliza la ejecución de la función y especifica un valor para ser devuelto a quien llama a la función

Ey ! no olviden descargar las imagines y al momento de guardarlas cambiar la extencion a .PNG

Pues yo hice unos daditos xD

var z = aleatorio(1, 6);
var y = aleatorio(1, 6);


document.write("dado1\b = " + z);
document.write("<br>dado2\b = " + y + "</br>");

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

Excelente, por lo menos ya estoy entendiendo

0.001*11=0.011 Freddy tuvo un error ahí en el minuto 13:14

platzi.png

platzi es lo mejor
me ha enseñado muchas cosas nuevas que no conocía, siempre me ha interesado el desarrollo y la programación pero no sabia por donde empezar y gracias a dios encontré platzi de verdad muchas gracias.

Un consejo si en las imagenes les aparece por ex: pollo.webp o algo asi solo renombrenlo por .png ex: pollo.png

Me gusta la idea de crear projectos para aprender

Dato importante: ¿Cómo piensa un programador?

  • “Un programador ver un problema y lo descompone en problemas más pequeños”

Para hacer cálculos en javascript se usa la clase estática Math
Math es (también) un objeto

Tiene atributos como:

Math.PI
Math.E

Tiene métodos como:

Math.sqrt(numero)
Math.floor(numero)
Math.ceil(numero)
Math.random()

Math.random() retorna un número aleatorio entre 0.000 y 9.999
Para generar un número aleatorio “y” cualquiera en el rango [min ; max> en función de la variable aleatoria “x” que solo va de cero a uno [0;1> se usa la función de la recta:
y = m*x + b
y: resultado
m: pendiente = (max - min)
x: número aleatorio = Math.random()
b : término independiente = min
Ya que Math.random() genera un número aleatorio en el rango [0;1> es decir, no llega a 1, la función aleatorio tampoco llegará jamás al valor max, como mucho a max - 1.
Esto se resuelve ampliando el rango al momento de escribir la función aleatorio.

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

Es posible cargar toda la función en la consola para probarla si se la escribe en una sola línea:

function aleatorio(a,b){var y = Math.floor((b+1-a)*Math.random()+a); return y;}
vanp-aleatorio.png

Variables Locales: variables creadas dentro de una función, solo pueden ser accedidas desde dentro de la función.
Variables Globales: podemos acceder a ellas desde cualquier parte del código.

Tengo el codigo de la siguiente manera, pero no me arroja numeros aleatorios al recarga el html, donde esta el error:

var z = aleatorio(10, 20);
document.write(z);

function aleatorio(min, max)
{
var resultado;
resultado = Math.floor(Math.randon() * (max - min + 1)) + min;
return resultado;
}

Que diferencias hay entre un parseInt(3.8) = 3 ;
y un Mat.floor (3.8) = 3;
???

que podria incluso destruir empresas, jajajajaja XD

Me podrían ayudar con esto?
Quiero que la respuesta sea enviada a un text area, o siquiera en el mismo documento

var num1 = document.getElementById("numero1");
var num2 = document.getElementById("numero2");
var botoncito = document.getElementById("boton");
botoncito.addEventListener("click", evalua);

var answer = document.getElementById("respuesta");
function evalua ()
{
console.log(botoncito.addEventListener)
if (num11=true ) {
  for(i=0; i<10; i++)
  {
    var num11 = parseInt(num1.value);
    var num22 = parseInt(num2.value);
    var x = random (num11, num22);
    document.write(x + ", ")
  }
}else {
  document.write("Pon un numero pendejo");
}
}

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

hice un piedra papel o tijeras usando un Math random
https://codepen.io/nicolasprieto66/project/full/DPkjvB/

Por alguna razón no me funciona el document.write() por lo que he visto en la red hay algunas actualizaciones que lo bloquean pero no veo la solución. ¿Algún consejo?

alguno le pudo cambiar la extension a las imagenes?? la imagen de vaca y pollo no me descargan en formato png y cambio la extension la imagen no me sale 😦

Dale un corazon , si te gusta la remera que trae Freddy puesta 😄 !!!

Me gusta Platzi!

document.addEventListener("mousedown",dibujarMouse);
document.addEventListener("mouseup",dibujarMouse);
var cuadrito = document.getElementById("mouse_dibujo");//elemento que nos trae un atributo de java srip a travez de su id
var papel = cuadrito.getContext("2d");
var x1, y1, x2, y2;
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
  lienzo.beginPath();//función para arrancar trazo
  lienzo.strokeStyle = color;//atributo del objeto lienzo color de lineazo.
  lienzo.lineWidth=3;
  lienzo.moveTo(xinicial,yinicial);//moviendo de donde inicia la linea
  lienzo.lineTo(xfinal,yfinal);//hasta donde llega la línea
  lienzo.stroke();//dibujar la línea
  lienzo.closePath();//cerrar el trazo
}


function dibujarMouse(evento)
{
  colorcito="pink";
  console.log(evento);
  var tipo=evento.type;

   console.log(tipo);

   x1=evento.layerX;
   y1=evento.layerY;

 if (tipo=="mousedown")
 {
   x2=x1;
   y2=y1;
 }

 if (tipo=="mouseup")
 {
   dibujarLinea(colorcito,x1,y1,x2,y2,papel);
}
}

Para descargar las imágenes tile.png y cerdo.png copien y peguen el enlace de las imágenes en la siguiente web y le clickean en descargar: https://imagecyborg.com/

Excelente clase Platzi

Utilice un while, entonces se va a escribir en pantalla números aleatorios desde 1 a 2000, el ciclo termina cuando es valor 1

var z=aleatorio(1,2000);
while (z!=1) {
    document.write("<p><b><cr>"+z+"</cr></b></p>");
    z=aleatorio(1,2000);
    console.log("Numero ->"+z);
}
document.write(z);


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

Esta es la Clave!

Math.floor() devuelve el número entero por debajo de los decimales.

Math.ceil() devuelve el siguiente número entero arriba de los decimales

Math.random() devuelve un número aleatorio de 0 a 0.999…

Buenisimo!

no pude desarrollar el problema del Mouse, entro en Bucle varias veces, vi lo que hicieron los demás pero no encontré lógica en la estruturacion del codigo, porfavor Freddy nos puedes mostrar como se hace el ejercicio?

la vaca no me descarga.
jjajaja help me.

¿alguno sabe porq al decargar los archivos que se necesitan para el ejercicio no me salen .png sino .webp?

Si descargas las imágenes automáticamente, te van a guardar como .webp Como dicen los demás, guárdalas como .png para que el código funcione.

Para guardar las imágenes en PNG, simplemente denle guardar como y coloquen al final del nombre la extensión .png

Math.floor() devuelve el número entero por debajo de los decimales.

Math.ceil() devuelve el siguiente número entero arriba de los decimales

Math.random() devuelve un número aleatorio de 0 a 0.999…

Vaya, creo que me emociono programando de más.
01.png02.png03.png04.png

Comunidad, ¿alguno de casualidad me puede pasar las imágenes en un archivo .rar? Es que me dice error y solamente el único que me dejó descargar fue el pollo

Aquí está mi aporte. Aunque se generan el número de valores aleatorios indicados en el input (tal y como se muestra en la consola), aun sigo trabajando para su representación dentro del cuadro de texto de resultados. Es más complicado de lo que parece si no haces el document.write y sin quitar el body de tu html.generadorAleatorios.jpg

Enlace para cambiar el formato .web a .png de las imagenes
https://imagen.online-convert.com/es/convertir-a-png

No había pensado la ecuación como max - min + 1 sino solo la diferencia entre el máximo y mínimo, pero de esta forma nunca tomaría el máximo valor. Apliquemos la aleatoriedad entonces para crear posiciones de personajes.

La ecuación funciona aunque se pongan al revés los números por que el último paso es sumar el min, y el mínimo siempre va a ser más grande que el resultado, por lo que el resultado siempre será positivo. Aquí la comprobación:

Captura.PNG
Sin título.png

Para los que tienen problema con la descarga de las imagenes en .png aqui dejo un enlace para que las descarguen.

https://arkticstm.cteraportal.com/invitations?share=6fafc57b382f64d927a3

Escribiendo en codigo la ecuacion de un numero aleatorio

Funciones matematicas de javascript

Reproduzcan el tutorial a velocidad 1.25 x si quieren ver la versión militar de Freddy

multiplicar en numero decimales equivale a lo mismo que multiplicar en porcentajes

¿Por qué es necesario sumarle 1 a maxi - mini antes de multiplicar el random?

Hola gente.
Les dejo mi pequeño aporte hecho diferente:

const numeroAleatorio = (min, maxi) => resultado = Math.floor(Math.random() * (maxi - min + 1)) + min
const contenedor = document.querySelector('.caja')

//Podemos cambiar el numero maximo y minimo. Estos numero son el rango en el que se genera el numero aleatorio.
const NUMBER_MIN = 10
const NUMBER_MAXI = 20

for(let i = 0; i < 10; i++) {
    const pharagraph = document.createElement('p')
    const number = numeroAleatorio(NUMBER_MIN, NUMBER_MAXI)
    const text = document.createTextNode(number)
    pharagraph.appendChild(text)
    contenedor.appendChild(pharagraph)
}
screenshot.407.jpg

No se me carga el video. Que tristeza que tengo

7:47 - 7:52 Freddy te desperdicias como profesor deberías ser músico

yo, al terminar esta clase:

Les adjunto un desafío que me entretuvo varias horas…
Viendo el código de la página de este ERP nos proponía completar el desafío y si lo lograbamos nos postularía para un acceso laboral automáticamente.
Nos pone a prueba en el manejo de la consola del Browser y conocimiento JS.
Nota: El objetivo es descubrir la contraseña que está escondida en el Código.
Desafío Odoo

Con este código voy a empezar a jugar el Baloto.

yo en esta clase

![](yo-en-clase-de-matematicas-espera-como-sacasteeso-como-salio-16613943.png

puede que la pregunta suene tonta o no, pero,¿este curso oeste tipo de programacion es usada para ingenieria de sistemas?

¿por que es floor (3.78) 3
y ceil es (3.78) es 4?

¿El Math siempre debe ir en mayúscula?

return.png

No me corría el código, es increíble como una mayúscula te rompe el código

alguien tiene las imagenes de la vaca y el pollo en .png? cuando las descargue me salen en formato .webp

Lo divertido comienza ahora

me salió tremendo bololó al intentar hacer la ecuación XD, la de Freddy es más sencilla 😉

AJAJJ y así es como le dicen a uno “échelo automático” y el baloto se hace millonario con solo tener ese código.

Funciones matemáticas de JS, Clase estática Math. Es una colección de funciones especiales que permiten realizar funciones matemáticas especiales.

Muchachos yo sé que Fredy se ve muy caja pero para los que se pregunten si hay una función que redondeé al número que tenga más cerca es Math.round
Por ejemplo yo hice la mía así:

/**
 * The intRand function returns the value of a number rounded to the nearest integer within a given range
 * @param {number} min the minimum value that the function can return
 * @param {number} max the maximum value that the function can return
 */
function intRand(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

Acepto criticas constructivas e insultos también

para que sirve el return , no entendi

Hola a todos. Así resumí un poco la función de dibujo con algunos cambios en las variables para que no dibuje los animales unos sobre otros:

function dibujar()
{
if(fondo.cargaOK)
{
papel.drawImage(fondo.imagen,0,0);
}
if(vaca.cargaOK)
{
console.log(cantidad);
for(var v=0; v < cantidad; v++)
{
var a = aleatorio(0,400);
var b = aleatorio(0,420);
var c = aleatorio(0,380);
var d = aleatorio(0,410);
var e = aleatorio(10,390);
var f = aleatorio(10,420);
papel.drawImage(vaca.imagen, a, b);
papel.drawImage(cerdo.imagen, d, c);
papel.drawImage(pollo.imagen, e, f);
}
}
}

Excelente video , Genial Freddy Lo maximo ! 

Que pasa cuando en una funcion el return retorna el  -1 ?? ya   que varias veces he visto código de esa manera