Introducción a JavaScript
Manipulación del DOM con JavaScript para Principiantes
Instalación de Node.js y configuración de entorno en Mac
JavaScript para Principiantes: Configuración y Primer Script
Variables en JavaScript: Declaración, Asignación y Buenas Prácticas
Tipos de Datos Primitivos y Complejos en JavaScript
Concatenación y Manipulación de Strings en JavaScript
Números y Operaciones en JavaScript: Enteros, Decimales y Más
Typecasting y Cohesión en JavaScript
Conversión de Tipos en JavaScript: Explícita e Implícita
Estructuras de Control y Lógica
Operadores de Comparación en JavaScript: Uso Práctico y Ejemplos
Operadores Lógicos en Programación: Uso y Ejemplos Prácticos
Uso de Estructuras Condicionales IF en JavaScript
Programación JavaScript: Crea un juego de adivinanza numérica
Estructura Switch: Lógica y Uso en Programación
Loops y estructuras de iteración en JavaScript
Iteración con for-of en JavaScript: uso en arrays y strings
Iteración de Objetos en JavaScript: Uso del Bucle forIn
Bucles While en JavaScript: Estructura y Uso Seguro
Ciclos doWhile en JavaScript: estructura y diferencias con while
Funciones y This
Funciones JavaScript: Creación y Uso en Descuentos de Black Friday
Funciones como Objetos: Conceptos Avanzados en JavaScript
Funciones Puras e Impuras en JavaScript
Arrow Functions y Enlace Léxico en JavaScript
Scope y Contexto de Ejecución en JavaScript
Entendiendo Closures y Ámbito Léxico en JavaScript
Programación de Funciones en JavaScript
Manipulación de Arrays
Arrays: Propiedades, Acceso y Creación en JavaScript
Arrays: Mutabilidad e Inmutabilidad en JavaScript
Métodos push y pop: Mutabilidad de arrays en JavaScript
Métodos de Arrays: Uso de map y forEach eficazmente
Filter y Reduce: Manejo Avanzado de Arrays en JavaScript
Uso de find y findIndex para búsqueda en arrays
Uso de slice() para extraer elementos de un array en JavaScript
Uso del Spread Operator en JavaScript: Copiar, Combinar y Más
Programación Orientada a Objetos
Propiedades y Métodos en Objetos JavaScript: Una Guía Práctica
Objetos en JavaScript: Creación, Métodos y Modificación
Creación y uso de funciones constructoras en JavaScript
Clases en JavaScript: Crear Objetos con Sintaxis Moderna
Objetos y Prototipos en JavaScript: Herencia y Manipulación Práctica
Prototipos y herencia en JavaScript para principiantes
Métodos en JavaScript: Manipulación de Prototipos
Uso de "this" en Clases de JavaScript
Diseño de Bases de Datos para Red Social
Validación de Usuarios con Funciones de JavaScript
Asincronía en JavaScript
JavaScript: Programación Síncrona y Asíncrona Paso a Paso
Crea Promesas en JavaScript: Estados y Uso de Then/Catch
Uso de Async/Await en JavaScript para Peticiones Fetch
Manejo de Promesas con Async/Await y Bucle for-await-of
Funcionamiento de HTTP: Verbs y Comunicación Cliente-Servidor
Métodos HTTP y Análisis de Respuestas en la Consola del Navegador
Peticiones HTTP con Fetch y Promesas en JavaScript
Envío y Recepción de Datos con Fetch y JavaScript
Borrado de elementos en DOM con Delegación de Eventos
Asignación de IDs a Elementos del DOM con JavaScript
Manipulación del DOM con JavaScript Vanilla
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Programación JavaScript: Crea un juego de adivinanza numérica
13/55Recursos
¿Cómo crear un juego de adivinanza en JavaScript usando estructuras condicionales?
Crear un juego de adivinanza de números es una excelente manera de aprender sobre estructuras condicionales en JavaScript. En este ejercicio, usaremos funciones matemáticas y estructuras de control para desarrollar una sencilla pero divertida aplicación interactiva.
¿Cómo se crea un número secreto aleatorio?
Para desarrollar este juego, necesitamos generar un número aleatorio que el jugador tendrá que adivinar. Para ello, puedes emplear dos métodos de JavaScript: Math.random() y Math.floor(). Aquí te muestro cómo utilizarlos:
const numeroSecreto = Math.floor(Math.random() * 10) + 1;
Math.random()genera un número decimal aleatorio entre 0 y 1.- Multiplicamos
Math.random()por 10 para obtener un rango entre 0 y 9. - Luego sumamos 1 para modificar el rango entre 1 y 10.
Math.floor()se utiliza para redondear hacia abajo al número entero más cercano.
¿Cómo solicitamos al jugador que adivine el número?
Utilizaremos un prompt para que el jugador ingrese un número. También emplearemos parseInt para asegurarnos de que estamos trabajando con un número entero:
const numeroJugador = parseInt(prompt("Adivina el número secreto entre 1 y 10"), 10);
console.log(`Este es el número con el que juegas: ${numeroJugador}`);
¿Cómo implementamos la lógica condicional para verificar la adivinanza?
Ahora que tenemos el número secreto y la adivinanza del jugador, podemos utilizar estructuras condicionales para verificar si el jugador ha adivinado correctamente:
if (numeroJugador === numeroSecreto) {
console.log("¡Felicidades, adivinaste el número secreto!");
} else if (numeroJugador < numeroSecreto) {
console.log("El número es demasiado bajo, intenta de nuevo.");
} else {
console.log("El número es muy alto, intenta de nuevo.");
}
if: Compara si el número del jugador coincide con el número secreto.else if: Si la adivinanza es incorrecta, verificamos si el número es menor.else: Si ninguna de las dos condiciones anteriores se cumple, asumimos que el número es demasiado alto.
¿Qué sucede si el jugador no adivina al primer intento?
El juego está diseñado para proporcionar retroalimentación instantánea, lo que permite al jugador ajustar su próxima adivinanza. Puedes extender este proyecto implementando un bucle para repetir el proceso hasta que el jugador acierte.
¿Cómo manejar variaciones y errores de validación?
Existen múltiples maneras de ampliar esta base de juego:
- Mensajes personalizados: Diferentes respuestas pueden ser proporcionadas según la proximidad del número del jugador al número secreto.
- Control de errores: Asegúrate de que el jugador ingrese un valor válido (número entre 1 y 10), utilizando validaciones adicionales.
- Bucle de repetición: Implementa un
whileloop para permitir múltiples intentos hasta adivinar correctamente.
Este sencillo proyecto muestra cómo la lógica condicional puede transformar tus ideas de programación en un juego interactivo y divertido. Recuerda, la práctica constante fortalece tus habilidades de programación. ¡Sigue explorando y creando!
Aportes 81
Preguntas 4
Ordenar por:
Revisar el contenido de este vídeo, usaron conceptos no explicados. un poco enredado en la explicación.
Si se ejecuta Math.random() solo se genera un numero cero mas decimales ej: 0.15, 0.30 por eso se multiplica por 10 para que de numeros entre el 0 y el 9. Pero como el rango requerido es entre 1 al 10 por eso se le suma 1. Por otro lado Math.floor en términos matemáticos, "floor" se refiere a la función que redondea un número hacia abajo al entero más cercano. Por eso se puede utilizar juntos Math.floor(Math.random() \* 10 + 1)
No entiendo porque usar una consola aparte en vez de la consola de VSC como veníamos con Estefany :(
**Aca mi version!!**
Le hice algunos cambios, le agregue html y css para que se vea mejor y en vez de que sea del 1 al 10, ahora es hasta el 100.
**CODE:**
```js
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adivina el Número!</title>
<style>
:root {
--Azul-oscuro: #282185;
--Amarillo-anaranjado: #fcba3e;
--Blanco: #f8f7f9;
--Azul: #2f2692;
--Marrón-claro: #9b8278;
}
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
display: grid;
place-items: center;
background-color: var(--Azul-oscuro);
}
#game {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid var(--Amarillo-anaranjado);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: var(--Azul);
color: var(--Blanco);
}
input[type="number"] {
width: 50px;
padding: 5px;
margin-right: 10px;
}
input[type="button"] {
padding: 5px 10px;
}
#message {
margin-top: 20px;
}
</style>
</head>
<body>
<script>
let randomNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
function checkGuess() {
let userGuess = document.getElementById('guess').value;
let message = document.getElementById('message');
attempts++;
if (userGuess == randomNumber) {
message.textContent = `¡Felicidades! Adivinaste el número en ${attempts} intentos.`;
message.style.color = 'green';
resetGame();
} else if (userGuess > randomNumber) {
message.textContent = 'Tu suposición es demasiado alta.';
message.style.color = 'red';
} else if (userGuess < randomNumber) {
message.textContent = 'Tu suposición es demasiado baja.';
message.style.color = 'red';
}
}
function resetGame() {
randomNumber = Math.floor(Math.random() * 100) + 1;
attempts = 0;
}
</script>
</body>
</html>
```
Adivina el Número
Adivina un número entre 1 y 100
<label for="game"> <input type="number" id="guess" min="1" max="100"> <input type="button" value="Guess!" onclick="checkGuess()"> </label>
¿Pero que pasó acá? Primero una clase que no tiene contexto de nada y después veo en los comentarios gente con juegos de la clase super bonitos. Estamos en la clase 12 de fundamentos. ¿A que hora aprendieron a hacer eso? Más perdido que la mamá de José Miel.
Yo ya tengo un tiempo trabajando como Front-end y estoy haciendo estos cursos como un repaso, porque quiero cambiar de trabajo. Me da mucha pena por la gente que esta aprendiendo de cero con este curso, porque se van a sentir muy frustrados, estos cursos carecen de estructura y planeacion.
Mi mini juego 🎉
Si estoy tomando el curso de fundamentos de javascript, no entiendo como de la clase 11 a esta que es la 12 tengo otro profesor y se saltaron un montón de detalles he perdido el hilo del aprendizaje.
Sería lindo que explicarán para sirve cada función, se que ya hay un bagaje pero se entendería mejor la clase, y no toma mucho tiempo.
Para los que no hayan entendido bien:
**Math.floor()** redondea un número flotante (decimal) hacia abajo, hacia su entero más proximo. Es decir:
* 1.4 -> 1
* 1.6 -> 1
* -0.1 -> -1
Esto está muy bien explicado en W3, os dejo un enlace: <https://www.w3schools.com/jsref/jsref_floor.asp.>
**Math.random()**, por su parte, genera un número aleatorio igual o mayor que 0 menor que 1 (numero aleatorio entre 0 y 1 sin incluir el 1, vaya). Si queremos que el número sea entre 1 y 2, por ejemplo, lo que hacemos es sumarle 1. Es decir:
`let aleatorio = Math.random() +1; // Esto nos da un número mayor o igual a 1 y menor que 2`
Además, si queremos que el número sea un número aleatorio entre 0 y 10, por ejemplo, multiplicaríamos Math.random() por nuestro número más alto + 1; es decir:
`let aleatorio = Math.random() * 11; // Esto nos da un número mayor o igual a 0 y menor que 11`
Ahora, si queremos un número entre 1 y 10, podemos combinar estos dos "trucos" para conseguirlo:
`let aleatorio = (Math.random() * 10) + 1; // Número mayor o igual a 1 y menor que 11`
El problema que nos queda por resolver es que el número que obtenemos con Math.random() está lleno de decimales, así que tenemos que deshacernos de ellos. Por eso redondeamos hacia abajo.
`let aleatorio = Math.floor((Math.random() * 10) + 1); // Número entero entre 1 y 10`
Les muestro el proyecto con el cual trabajaré para este curso y el de DOM. Un ToDo List para aplicar todo lo que iré aprendiendo. Vamos con todo !! 💚
Bastante enredada la explicación del profesor, deberían tener presente que mucho de los usuarios son bastante novatos. La chica de los primeros videos fue mucho mas explicita en la explicación.
Es es el peor curso que he visto no por su con tenido si no por su edición se nota que es un recorte y para lo que cobra platzi deberían tener esto mejor controlado no es solo esta clase todas las que he visto de este curso hasta el momento se nota que esta mochas las clases si no es porque conozco algo de js estaba mas perdido como mis compañeros del chat deben revisar este curso.
los cursos de platzi siempre me han gustado mucho pero siento que este curso lo hicieron como a la carrera siento que están explicando los conceptos muy por encima pensé que este iba a ser el mejor curso de JS pero honestamente siento que se quedaron cortos por ejemplo el concepto de prompt no lo habían explicado en ninguna clase
buenas compañeros , para los que recien empiezan y los que no tanto les recomiendo el curso basico de programacion, es largo pero abarca todos los temas que se presentan hasta el momento de forma muy facil de entender , luego la ruta que desean pero ya tienen html css JS canvas node todo en un solo curso . espero haber ayudado
Me parece que falta mas organización en esa explicación
\\<html lang="en">
\<head> \<meta charset="UTF-8"> \<meta name="viewport" content="width=device-width, initial-scale=1.0"> \<script src="https://cdn.tailwindcss.com">\</script> \<title>Juego secreto\</title>\</head>
\<body> \<section class=" mx-auto max-w-screen-xl px-4 py-32 sm:px-6 lg:flex lg:h-screen lg:items-center lg:px-8"> \
\<h1 class="text-3xl font-extrabold sm:text-5xl"> Bienvenido al juego de:
\Adivina El numero\ \
\
\</section> \<script src="./numero-secreto.js">\</script>\</body>
\</html>
const numeroSecreto = Math.floor(Math.random() \* 15) + 1;const submitBoton = document.querySelector('#boton-s');const resultado = document.querySelector('#resultado');const numeroToAdivinar = document.querySelector('#numero-a-adivinar')const tuNumero = document.querySelector('#tu-numero')
function validacionNumero(numeroJugador) { return numeroJugador === numeroSecreto;}
submitBoton.addEventListener("click", function (e) { e.preventDefault(); *// Prevenimos que se refresque la pantalla* const numeroJugador = parseInt(document.querySelector('#number-input').value, 10); const esCorrecto = validacionNumero(numeroJugador); numeroToAdivinar.innerText = `Numero a Adivinar: ${numeroSecreto}` tuNumero.innerText = `Tu numero Es: ${numeroJugador}` if (esCorrecto) { resultado.innerText = '¡Adivinaste!!!!!!'; } else { resultado.innerText = 'Perdiste animal'; };});Se trata de adivinar el numero que tiene la computadora selecciona un numero entre el \1-15\ \
\ \<form class="mx-auto"> \<input id="number-input" type="number" min="1" max="15" class="mb-3 border-2" required> \<button id="boton-s" class="block w-full rounded bg-rose-600 mx-auto px-12 py-3 text-sm font-medium text-white shadow hover:bg-rose-700 focus:outline-none focus:ring active:bg-rose-500 sm:w-auto" type="submit"> Adivinar \</button> \</form>
\
\\
\\
\\
\
Deben a aprender a ser curiosos, ahora existen muchas herramientas como ChatGpt, Copilot que te pueden ayudar a resolver pequeñas dudas, además que Platzi tiene cursos para saber la base de todo. Yo tuve que pausar cursos para ver otros que son bases y fundamentos, ahora entiendo mejor el curso que habia pausado...
Hola, he estado investigando la manera en cómo poder correr el código en la consola del navegador. Es que veo que el profesor no copia y pega el código en la consola, así que me crea la duda de cómo logra correr el código que se encuentra en la consola del navegador. Tengo la extensión de liveserver, ya lo intente hacer y solo me aparece en la pantalla del navegador el código, pero no me aparece la información que debería en la consola o me pide el numero secreto.
```js
/*
Math.floor() redondea un número flotante (decimal) hacia abajo, hacia su entero más proximo. Es decir:
1.4 -> 1
1.6 -> 1
-0.1 -> -1
*/
const numeroSecreto = Math.floor(Math.random() * 10 + 1);
console.log("--- Adivina el número secreto entre el 1 al 10 -----");
const numeroJugador = 10;
console.log("Número secreto: "+numeroSecreto);
console.log("Número Jugador: " + numeroJugador);
if(numeroSecreto === numeroJugador){
console.log("Adivinaste el número");
}else{
console.log("Sigue intentando");
}
```
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ultimate js</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
</body>
</html>
```f```js
``````css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f9;
}
.box {
width: 300px;
padding: 20px;
border: 2px solid #333;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
.box h1 {
margin-top: 0;
font-size: 24px;
}
.box p {
margin: 10px 0;
}
.box label {
display: block;
margin-bottom: 10px;
}
.box input[type="number"] {
width: 100%;
padding: 8px;
margin-top: 5px;
box-sizing: border-box;
}
.box input[type="button"] {
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #007bff;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.box input[type="button"]:hover {
background-color: #0056b3;
}
#message {
margin-top: 20px;
font-size: 18px;
color: #333;
}
``````js
function checkGuess() {
var guess = document.getElementById('guess').value;
var message = document.getElementById('message');
if (guess >= 1 && guess <= 100) {
message.textContent = 'Your guess is: ' + guess;
} else {
message.textContent = 'Please enter a number between 1 and 100.';
}
}
```![]()
Guess the Number
Adivina un número entre el 1 y el 100
<label for="guess">Introduce tu conjetura: <input type="number" id="guess" min="1" max="100"> </label> <input type="button" value="Guess!" onclick="checkGuess()">
les comparto está estructura de html para revisar sus proyectos de este curso, primeramente tienen que crear el index y luego pegar esto:
\\<html>\<head> \<title>Mi Juego\</title>\</head>\<body> \
¡Adivina el número!\
\<script src="Juego.js">\</script>\</body>\</html> esto lo pueden configurar para sacarlo rapido con snippets, pueden preguntarle a chat como crear uno en VSC y les ayudrá un montónaquí hay una versión del código donde se repite la interacción para poder adivinar el número, utilizando algo llamado bucle, espero les sirva!
Ojo el curso está un poco desorganizado, por que arranca usando Node.Js y en esta clase se usa la función prompt() el cual solo funciona en navegadores por eso si seguiste en un archivo Js en node desde code te va a generar error en este caso dejo un ejemplo para ejecutarlo con Node en Visual Code
`const readline = require("readline");`
`const numeroSecreto = Math.floor(Math.random() * 10 + 1);`
`const rl = readline.createInterface({ input: process.stdin, output: process.stdout});`
``rl.question("Adivina el número secreto entre el 1 al 10: ", (response) => { const numeroJugador = parseInt(response); console.log(`Este es el número con el que juegas: ${numeroJugador}`);``
` if (numeroJugador === numeroSecreto) { console.log("¡Felicidades! Adivinaste el número secreto 🎉"); } else if (numeroJugador < numeroSecreto) { console.log("El número es muy bajo ❄️"); } else { console.log("El número es muy alto ☀️"); }`
` rl.close();});`
<https://codi.link/PGRpdiBpZD0iYXBwIj48L2Rpdj4=%7C%7CICAgIGNvbnN0IG51bWVyb1NlY3JldG8gPSBNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkqMTArMSkNCg0KICAgIGNvbnN0IG51bWVyb0p1Z2Fkb3IgPSBwYXJzZUludChwcm9tcHQoIkFkaXZpbmEgZWwgbnVtZXJvIHNlY3JldG8gZW50cmUgZWwgMSBhbCAxMCIpKQ0KDQogICAgY29uc29sZS5sb2coYEVzdGUgZXMgZWwgbnVtZXJvIGNvbiBlbCBxdWUganVlZ2FzICR7bnVtZXJvSnVnYWRvcn1gKQ0KICAgIGNvbnNvbGUubG9nKGBFc3RlIGVzIGVsIG51bWVybyBzZWNyZXRvICR7bnVtZXJvU2VjcmV0b31gKQ0KICAgIA0KDQogICAgaWYobnVtZXJvSnVnYWRvciA9PT0gbnVtZXJvU2VjcmV0byl7DQogICAgICAgIGNvbnNvbGUubG9nKCJGRUxJQ0lEQURFUywgQURJVklOQVNURSBFTCBOVU1FUk8gU0VDUkVUTyIpDQogICAgICAgIGFsZXJ0KCJGRUxJQ0lEQURFUywgQURJVklOQVNURSBFTCBOVU1FUk8gU0VDUkVUTyEiKQ0KICAgIH0NCiAgICBlbHNlIGlmKG51bWVyb0p1Z2Fkb3I8IG51bWVyb1NlY3JldG8pew0KICAgICAgICBjb25zb2xlLmxvZygiVHUgbnVtZXJvIGVzIG1lbm9yIGFsIG51bWVybyBzZWNyZXRvLCBpbnRlbnRhIGRlIG51ZXZvIikNCiAgICB9DQogICAgZWxzZXsNCiAgICAgICAgY29uc29sZS5sb2coInR1IG51bWVybyBlcyBtYXlvciBhbCBudW1lcm8gc2VjcmV0bywgaW50ZW50YSBkZSBudWV2byIpDQogICAgfQ==>
ESTE ES LINK PARA PODER COPIAR SU CODIGO Y VERLO EN HTML, CSS O JAVASCRIPT ASI COMO SE VERIA EN UNA PAGINA WEB O EN LA CONSOLA.
De nada
Sí, es correcto. La función `Math.floor()` redondea un número hacia abajo al entero más cercano. Por lo tanto, si utilizas `Math.floor(9.46)`, el resultado será 9. Esto es útil cuando necesitas obtener solo la parte entera de un número decimal.
Recuerden que con las comillas inversas concadenamos mensajes con las variables.
```js
let string1 = 'hola, mundo'
let string2 = "JavaScript es genial"
let string3 = `${string1} feliz :)` // Se usa para pegar dos mensajes las comillas invertidas
```
Profesor Typo
```js
const numeroSecreto = Math.floor(Math.random() *10 +1)
let numeroJugador = 0
console.log(`Este es el numero secreto ${numeroSecreto}`)
function juego(){
numeroJugador = parseInt(prompt("Adivina el número secreto (entre 1 y 10)"));
console.log(`Este es el número que juegas: ${numeroJugador}`);
if(numeroJugador === numeroSecreto){
console.log("Felicidades, adivinaste el numero secreto")
} else if (numeroJugador > numeroSecreto){
console.log("Lo siento, el numero secreto es menor")
juego()
} else if (numeroJugador < numeroSecreto){
console.log("Lo siento, el numero secreto es mayor")
juego()
}
}
juego()
```const numeroSecreto = Math.floor(Math.random() \*10 +1)let numeroJugador = 0
console.log(`Este es el numero secreto ${numeroSecreto}`)
function juego(){numeroJugador = parseInt(prompt("Adivina el número secreto (entre 1 y 10)"));console.log(`Este es el número que juegas: ${numeroJugador}`);if(numeroJugador === numeroSecreto){ console.log("Felicidades, adivinaste el numero secreto")} else if (numeroJugador > numeroSecreto){ console.log("Lo siento, el numero secreto es menor") juego()} else if (numeroJugador < numeroSecreto){ console.log("Lo siento, el numero secreto es mayor") juego()} }
juego()
const numeroSecreto = Math.floor(Math.random() \*10 +1)let numeroJugador = 0
console.log(`Este es el numero secreto ${numeroSecreto}`)
function juego(){numeroJugador = parseInt(prompt("Adivina el número secreto (entre 1 y 10)"));console.log(`Este es el número que juegas: ${numeroJugador}`);if(numeroJugador === numeroSecreto){ console.log("Felicidades, adivinaste el numero secreto")} else if (numeroJugador > numeroSecreto){ console.log("Lo siento, el numero secreto es menor") juego()} else if (numeroJugador < numeroSecreto){ console.log("Lo siento, el numero secreto es mayor") juego()} }
juego()
Aquí dejo mi versión:
```js
const random = (max, min) => {
let random = Math.floor(Math.random() * (max - min + 1)) + min
return random
}
const jugar = () => {
let maquina = random(1, 11)
let numero = prompt('¿Cual es el número que adivina el PC? (del 1 al 10)');
if(numero < 1 || numero > 10) {
alert('Error, elegiste un número fuera del rango.')
}
else if(numero === maquina) {
alert(`Ganaste, el número es ${maquina}`)
} else if(numero !== maquina) {
alert(`Perdiste, el número era ${maquina}`)
}
}
jugar()
```const random = (max, min) => { let random = Math.floor(Math.random() \* (max - min + 1)) + min return random}
const jugar = () => { let maquina = random(1, 11) let numero = prompt('¿Cual es el número que adivina el PC? (del 1 al 10)'); if(numero < 1 || numero > 10) { alert('Error, elegiste un número fuera del rango.') } else if(numero === maquina) { alert(`Ganaste, el número es ${maquina}`) } else if(numero !== maquina) { alert(`Perdiste, el número era ${maquina}`) }}
jugar()
const readline = require('readline');
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
// Genera un número secreto entre 1 y 10
const numberSecret = Math.floor(Math.random() \* 10) + 1;
rl.question('What is the number between 1 and 10? ', (number) => {
const numberPlayer = parseInt(number);
// Imprime el número ingresado correctamente usando backticks
console.log(`This is the number you chose: ${numberPlayer}`);
// Validación si no es un número
if (isNaN(numberPlayer)) {
console.log("It's not a valid number");
}
// Verifica si es el número secreto
else if (numberPlayer === numberSecret) {
console.log("You win!");
}
// Verifica si es menor al número secreto
else if (numberPlayer < numberSecret) {
console.log("Too low!");
}
// Si es mayor al número secreto
else {
console.log("Too high!");
}
rl.close();
});
`Math.floor()` es un método en JavaScript que redondea un número hacia abajo al entero más cercano. Por ejemplo, si pasas `Math.floor(3.7)`, el resultado será `3`. Si pasas un número negativo, como `Math.floor(-2.3)`, el resultado será `-3`, ya que redondea hacia el entero menor.
Este método es útil, por ejemplo, en juegos como "Adivina el número", donde necesitas generar números aleatorios dentro de un rango específico. Utiliza `Math.floor(Math.random() * (max - min + 1)) + min` para obtener un número entero aleatorio entre `min` y `max`.
seria genial que nos eneseñen a usar la consola de ese modo, todos los curso hasta donde he visto ha sido solo para mirar, pero aquí el profe le da un uso que no conocíamos y nos deja con los brazos cruzados
ara los que no les funciona prompt() como a mi, en mi caso es porque lo estoy haciendo con node js pero debe funcionar desde la consola del navegador.
Dejo mi aporte por si quirren hacer el ejercicio desde la terminal. Instalé primeramente un paquete externo, sugerido por Chatgpt:
`npm install prompt-sync`
Luego lo implemente en mi codigo:
`const prompt = require('prompt-sync')(); // esto sirve para habilitar el prompt en la terminal `
`let usuarioAutorizado = 'Jhony'`
` if ( usuarioAutorizado === prompt("Dame tu nombre: ") ) { // verifica si es del mismo valor y tipo`
` console.log('Estas autorizado para entrar') //si es verdadera la comparacion, se ejecuta este codigo } else {`
` console.log ('No estas autorizado para ingresar') // si es falsa la comparacion, se ejecuta este codigo }`
A mi me sirve para seguirlo haciendo desde la terminal.
Se me complico replicarlo en VS code 🥲
```js
const random = Math.floor(Math.random() * 10);
let numero = parseInt(prompt("Ingrese un numero aleatorio de 1 a 10"));
console.log(`${numero}`)
if (random === numero) {
console.log(`El numero es: ${random}, ¡Felicidades! ganaste un auto de 0 km`)
} else {
console.log(`El numero es: ${random}, que lastima, te deseo suerte para la proxima vez`)
}
```const random = Math.floor(Math.random() \* 10);
let numero = parseInt(prompt("Ingrese un numero aleatorio de 1 a 10"));
console.log(`${numero}`)
if (random === numero) { console.log(`El numero es: ${random}, ¡Felicidades! ganaste un auto de 0 km`)} else { console.log(`El numero es: ${random}, que lastima, te deseo suerte para la proxima vez`)}
Mi version antes de ver el video:
```js
let gameFlag = true
let quizNumber
let input
function gameLogic(input) {
if(isNaN(input)){
alert("Try again with a number")
gameFlag = continueGame()
}else{
if(Number(input)===quizNumber){
alert("Congradulations you guess the number")
gameFlag = continueGame()
}else{
alert("Dont give up, try again")
gameFlag = continueGame()
}
}
}
function defineVars(){
quizNumber = Math.round(Math.random()*10)
console.log(quizNumber)
input = prompt("Guess the next number from 0 to 10")
}
function continueGame(){
let startAgain = prompt("Do you want star over again y/n")
if(startAgain === 'y'){
return true
}else{
return false
}
}
while (gameFlag===true){
defineVars()
gameLogic(input)
}
```let gameFlag = true
let quizNumber
let input
function gameLogic(input) {
if(isNaN(input)){
alert("Try again with a number")
gameFlag = continueGame()
}else{
if(Number(input)===quizNumber){
alert("Congradulations you guess the number")
gameFlag = continueGame()
}else{
alert("Dont give up, try again")
gameFlag = continueGame()
}
}
}
function defineVars(){
quizNumber = Math.round(Math.random()\*10)
console.log(quizNumber)
input = prompt("Guess the next number from 0 to 10")
}
function continueGame(){
let startAgain = prompt("Do you want star over again y/n")
if(startAgain === 'y'){
return true
}else{
return false
}
}
while (gameFlag===true){
defineVars()
gameLogic(input)
}
const numerosecreto = Math.floor(Math.random() \* 10 + 1);
const usuario1 = parseInt(prompt ("adivine el numero "));
console.log (`este es tu numero ${usuario1}`);
if (numerosecreto === usuario1) {
console.log("felicidades haz ganado ");
}
else{
console.log("haz perdido " + numerosecreto); }
Hola! Alguien puede auxiliarme a como abrir la consola del navegador y correr el programa en él? Estoy usando una Mac. Muchas gracias.
En la expresión `Math.floor(Math.random() * 10 + 1)`, se está generando un número entero aleatorio entre 1 y 10. Aquí te explico cómo funciona cada parte:
1. `Math.random()`: Esta función genera un número decimal aleatorio en el rango de 0 (inclusive) a 1 (exclusive). Es decir, puede devolver valores desde 0 hasta, pero sin incluir, 1.
2. `Math.random() * 10`: Multiplicando el resultado de `Math.random()` por 10, se obtiene un número decimal aleatorio en el rango de 0 (inclusive) a 10 (exclusive). Esto significa que el valor puede ser desde 0 hasta, pero sin incluir, 10.
3. `Math.random() * 10 + 1`: Al sumar 1, se desplaza el rango de 0-10 a 1-11 (inclusive 1, exclusivo 11). Así, el nuevo rango es de 1 a 11.
4. `Math.floor(...)`: Finalmente, `Math.floor()` redondea hacia abajo cualquier número decimal en este rango, lo que hace que el resultado final esté entre 1 y 10 (inclusive).
### Resumen
Por lo tanto, `Math.floor(Math.random() * 10 + 1)` genera un número entero aleatorio entre 1 y 10.
A mi se me hizo más fácil interpretar el ejercicio así, espero les sirva de algo :)
Aqui mi codigo del juego para realizarlo desde la consola de visual studio code
```js
const readline = require("readline");
// Configuración de readline para leer la entrada del usuario en la consola
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
});
// Genera un número secreto entre 1 y 10
const numeroSecreto = Math.floor(Math.random() * 10) + 1;
// Solicita el número al usuario
rl.question("Adivina el número secreto entre 1 y 10: ", (input) => {
const numeroJugador = parseInt(input);
console.log(`Número elegido por el jugador: ${numeroJugador}`);
// Verifica si el número del jugador es igual al número secreto
if (numeroJugador === numeroSecreto) {
console.log("¡Felicidades! Adivinaste el número secreto 🎉");
} else {
console.log(
`Lo siento, no adivinaste. El número secreto era ${numeroSecreto}.`
);
}
// Cierra la interfaz de entrada
rl.close();
});
```const readline = require("readline");
// Configuración de readline para leer la entrada del usuario en la consolaconst rl = readline.createInterface({ input: process.stdin, output: process.stdout,});
// Genera un número secreto entre 1 y 10const numeroSecreto = Math.floor(Math.random() \* 10) + 1;
// Solicita el número al usuariorl.question("Adivina el número secreto entre 1 y 10: ", (input) => { const numeroJugador = parseInt(input);
console.log(`Número elegido por el jugador: ${numeroJugador}`);
// Verifica si el número del jugador es igual al número secreto if (numeroJugador === numeroSecreto) { console.log("¡Felicidades! Adivinaste el número secreto 🎉"); } else { console.log( `Lo siento, no adivinaste. El número secreto era ${numeroSecreto}.` ); }
// Cierra la interfaz de entrada rl.close();});
Les comparto mi código, es una aplicación de terminal
*import* readline *from* "readline";// *En Node.js, readline es un módulo que proporciona una interfaz para leer datos de una entrada de flujo de texto, como process.stdin (la entrada estándar) o un archivo. Es muy útil para capturar entradas de usuario en aplicaciones de línea de comandos.*
const *secretNumber* = *Math.floor*(*Math.random*()** \*** 11);
const *rl* = *readline.createInterface*({ *input*: *process.stdin*, *output*: *process.stdout*}); // *Crea una nueva interfaz de readline usando process.stdin para la entrada de datos y process.stdout para la salida.*
*console.log*(`Guess the secret Number`);*console.log*(`Add a number between 1 and 10`);
*rl.question*("Add your number n.nr ", (number) => { secretNumber === *Number*(number) ? *console.log*(`You guess the secret number :D The secret number was ${secretNumber}`) : *console.log*(`Sorry you lost, The secret number was ${secretNumber}`); *rl.close*();});
## Juego: Adivina el Número Secreto
* Este juego consiste en adivinar un número secreto generado aleatoriamente.
* Utiliza estructuras condicionales para validar si la respuesta del jugador se acerca al número secreto.
## Generación del Número Secreto
* Se define una constante llamada `número_secreto` usando los métodos `Math.floor` y `Math.random`.
* Estos métodos ayudan a generar un número aleatorio dentro de un rango específico.
* Ejemplo de generación de un número entre 1 y 10:const número\_secreto = Math.floor(Math.random() \* 10) + 1;
## Captura de la Respuesta del Jugador
* Se utiliza un `prompt` para capturar el número que el jugador cree que es el número secreto.
* La respuesta del jugador se almacena en una constante llamada `número_jugador`.
* Ejemplo de captura de respuesta:const número\_jugador = parseInt(prompt("Adivina el número secreto entre 1 y 10"));
## Validación de la Respuesta
* Se utiliza la estructura condicional `if` para comparar `número_jugador` con `número_secreto`.
* Si el número del jugador es igual al número secreto, se muestra un mensaje de felicitación.
* Si el número del jugador es menor o mayor al número secreto, se muestra un mensaje indicando si es demasiado bajo o alto.
* Ejemplo de validación:if (número\_jugador === número\_secreto) {
console.log("¡Felicidades, adivinaste el número secreto!");
} else if (número\_jugador < número\_secreto) {
console.log("El número es demasiado bajo. Intenta de nuevo.");
} else {
console.log("El número es demasiado alto. Intenta de nuevo.");
}
## Ejemplo Completo del Juego
1. Generación del número secreto:const número\_secreto = Math.floor(Math.random() \* 10) + 1;
2. Captura de la respuesta del jugador:const número\_jugador = parseInt(prompt("Adivina el número secreto entre 1 y 10"));
3. Validación y retroalimentación:if (número\_jugador === número\_secreto) {
console.log("¡Felicidades, adivinaste el número secreto!");
} else if (número\_jugador < número\_secreto) {
console.log("El número es demasiado bajo. Intenta de nuevo.");
} else {
console.log("El número es demasiado alto. Intenta de nuevo.");
}
4. Ejecución en la consola del navegador:
* Abrir la consola en el navegador.
* Copiar y pegar el código en la consola.
* Jugar adivinando el número secreto y ver el resultado en la consola.
## Próximos pasos
* Experimentar con diferentes rangos para el número secreto.
* Añadir más validaciones y mensajes personalizados para mejorar la experiencia del juego.
* Explorar más sobre las funciones `Math.random` y `Math.floor` para entender cómo generan números aleatorios.
* Continuar practicando estructuras condicionales con otros ejemplos y ejercicios para fortalecer el conocimiento en programación.
El ejercicio de "Adivina el número" utiliza estructuras condicionales en JavaScript para validar las suposiciones del jugador. Se genera un número aleatorio entre 1 y 10 mediante `Math.random()` y `Math.floor()`, que es el número secreto. Luego, se compara con el número que el jugador ingresa a través de un `prompt`.
Dependiendo de la comparación, se proporcionan diferentes mensajes: si adivina correctamente, si es muy bajo o muy alto. Este ejercicio ilustra el uso de condicionales y la interacción básica con el usuario en el navegador, lo cual es fundamental para aprender JavaScript de manera efectiva.
Fácil y con amor <3:
```js
const numeroSecreto = Math.floor(Math.random()*10+1)
function preguntar (){
var resultado = parseInt(prompt("Intenta adivinar un número de 1 a 10"))
console.log(`El número que elegiste es ${resultado}`)
return resultado
}
var numeroJugador = preguntar()
do {
var numeroJugador = preguntar()
} while (numeroJugador===numeroSecreto){
console.log("Eres un ganador!")
}
```const numeroSecreto = Math.floor(Math.random()\*10+1)
function preguntar (){ var resultado = parseInt(prompt("Intenta adivinar un número de 1 a 10")) console.log(`El número que elegiste es ${resultado}`) return resultado}
var numeroJugador = preguntar()
do { var numeroJugador = preguntar()} while (numeroJugador===numeroSecreto){ console.log("Eres un ganador!")}
Se nota que no tenia preparada la clase, no lo hizo bien la lógica, el ejercicio no funciona bien, si no adivinas el numero, ya no te vuelve a preguntar.
```js
(function () {
let numeroAleatorio = Math.floor(Math.random() * 10 + 1)
let numero
do {
numero = parseInt(prompt("Adivina el número secreto, está entre el 1 y el 10"))
if (isNaN(numero)) {
console.log("Por favor ingrese un número valido")
}
if (numero === numeroAleatorio) {
console.log(`Felicidades, acertaste el número secreto: ${numeroAleatorio}`)
} else if (numero < numeroAleatorio) {
console.log("El numero aleatorio es mayor")
} else {
console.log("El numero aleatorio es menor")
}
} while (numero !== numeroAleatorio)
})()
```(*function* () { *let* numeroAleatorio = Math.floor(Math.random() \* 10 + 1) *let* numero do { numero = parseInt(prompt("Adivina el número secreto, está entre el 1 y el 10")) if (isNaN(numero)) { console.log("Por favor ingrese un número valido") }
if (numero === numeroAleatorio) { console.log(`Felicidades, acertaste el número secreto: ${numeroAleatorio}`) } else if (numero < numeroAleatorio) { console.log("El numero aleatorio es mayor") } else { console.log("El numero aleatorio es menor") } } while (numero !== numeroAleatorio)})()
Dejo mi aporte:
```js
function AdivinaNumero(){
var numero = Math.floor(Math.random()*10);
var numero_elegido = 0
while(numero_elegido !== numero) {
numero_elegido = parseInt(prompt("Adivina el número"));
if(numero_elegido === numero) {
alert("Ganaste! Adivinaste el número");
} else {
alert("Vuelve a intentarlo");
}
}
}
AdivinaNumero();
```
**Sobre la generación de un número aleatorio con el código:**
```js
const numeroSecreto = Math.floor(Math.random() * 10 + 1);
```Esta manera de generar un número aleatorio funciona como se espera pero no nos permite establecer otro valor como mínimo en lugar del número 1 que utilizamos en el rango del 10 al 1. Si lo intentas entonces el valor resultante se puede salir del rango establecido.
.
En el curso llamado nuevo curso de programación básica de platzi muestran otra manera de generar un número aleatorio, el cual nos permite modificar el valor mínimo y que su funcionamiento sea adecuado.
.
El código es el siguiente:
```js
const numeroSecreto = Math.floor(
Math.random() * (maximo - minimo + 1) + minimo
);
```Solo remplaza el parámetro maximo por el valor maximo deseado y hacemos lo mismo con el parámetro minimo.
.
De esta manera podemos establecer nuestro rango de números a lo que gustes y obtener nuestro valor aleatorio cumpliendo con el rango.
Prueben a adaptar el operador ternario, es más rapido cuando requieres validar únicamente dos valores...
```js
console.log(
numeroJugador === numeroSecreto
? `Felicidades el número si es ${numeroSecreto}`
: `Incorrecto, el número secreto en realidad es ${numeroSecreto}`
};
```numeroJugador === numeroSecreto ? `Felicidades el número si es ${numeroSecreto}` : `Incorrecto, el número secreto en realidad es ${numeroSecreto}`;
````js
// la version del profesor de platzi es con la consola del navegador
//version consola de VisualStudioCode
// importar el modulo readline para interacturar con el usuario
const readline = require('readline');
// configurar la interfaz de usuario de readline
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
const numeroSecreto = Math.floor(Math.random()* 10 + 1) // numero aleatorio del 1 al 10
//const numeroJugador = parseInt(prompt("Adivina el número secreto del 1 al 10"));
// preguntar al jugador por el numero
rl.question('Adivina el número secreto del 1 al 10: ', (input) => {
const numeroJugador = parseInt(input);
console.log(`Este es el numero con el que juegas ${numeroJugador}`)
if(numeroJugador === numeroSecreto){
console.log(`Has ganado, ese es el numero secreto ${numeroSecreto}`)
}else if(numeroJugador < numeroSecreto ){
console.log(`El número secreto es mayor, intenta de nuevo. el numero secreto es: ${numeroSecreto}`)
}else if(numeroJugador > numeroSecreto){
console.log(`El número secreto es menor, intenta de nuevo. el numero secreto es: ${numeroSecreto}`)
}else {
console.log("No has ingresado un número")
}
// cerrar la interfaz de readline
rl.close();
});
```// la version del profesor de platzi es con la consola del navegador//version consola de VisualStudioCode// importar el modulo readline para interacturar con el usuarioconst readline = require('readline');
// configurar la interfaz de usuario de readlineconst rl = readline.createInterface({ input: process.stdin, output: process.stdout });
const numeroSecreto = Math.floor(Math.random()\* 10 + 1) // numero aleatorio del 1 al 10
//const numeroJugador = parseInt(prompt("Adivina el número secreto del 1 al 10"));// preguntar al jugador por el numero rl.question('Adivina el número secreto del 1 al 10: ', (input) => { const numeroJugador = parseInt(input);
console.log(`Este es el numero con el que juegas ${numeroJugador}`)
if(numeroJugador === numeroSecreto){ console.log(`Has ganado, ese es el numero secreto ${numeroSecreto}`)
}else if(numeroJugador < numeroSecreto ){ console.log(`El número secreto es mayor, intenta de nuevo. el numero secreto es: ${numeroSecreto}`)
}else if(numeroJugador > numeroSecreto){ console.log(`El número secreto es menor, intenta de nuevo. el numero secreto es: ${numeroSecreto}`)}else { console.log("No has ingresado un número")}
// cerrar la interfaz de readlinerl.close();});
````
Creo que se unificó el curso anterior de JS basico con las nuevas clases de Estefany. Incluso con los comentarios anteriores! Por eso parece un cambio muy brusco en los contenidos y el hilo de la clase. Y por eso apareces proyectos que parecen mas avanzados
intento ejecutar la primera parte del ejercicio donde están las primeras 4 líneas de código y me sale error en el console...
para escribir las comillitas invertidas usar ALT+96 = ` 💻👌
hola chicos como estan, tengo una duda, quise usar el prompt para que el usuario ingresara el numero pero no precisamente para este juego sino para hacer otras comprobaciones con condicionales pero lamentablemente me dice que con un ambiente de en node.js no es posible usarlo, si me pudiesen ayudar por favor
Le pregunté a ChatGPT que podemos hacer con esto para poder interiorizar mejor los conceptos y aquí se los comparto
En cada condición (`if`, `else if`, `else`), puedes ejecutar cualquier código válido de JavaScript. Aquí te doy algunas opciones de lo que puedes hacer:
1. Asignar valores:
Puedes asignar valores a variables.
```javascript
let descuento;
let edad = 22;
if (edad < 18) {
descuento = 0.5;
} else if (edad < 25) {
descuento = 0.2;
} else {
descuento = 0.1;
}
```
2. Mostrar mensajes en la consola:
Es útil para depuración o para interactuar con la consola del navegador.
```javascript
let numero = 10;
if (numero > 0) {
console.log("El número es positivo");
} else {
console.log("El número es negativo o cero");
}
```
3. Llamar funciones:
Puedes ejecutar funciones en cada bloque de condiciones.
```javascript
function saludar() {
console.log("Hola!");
}
let hora = 8;
if (hora < 12) {
saludar(); // Llama a la función si la condición es verdadera
}
```
4. Modificar el DOM:
Si trabajas con una página web, puedes cambiar elementos del HTML usando JavaScript.
```javascript
let temperatura = 30;
if (temperatura > 25) {
document.body.style.backgroundColor = "yellow"; // Cambia el color de fondo de la página
} else {
document.body.style.backgroundColor = "blue";
}
```
5. Operaciones matemáticas:
Puedes realizar cálculos matemáticos o aplicar fórmulas.
```javascript
let a = 5, b = 10;
if (a < b) {
let resultado = b - a;
console.log("Resultado:", resultado);
}
```
6. Bucles o ciclos:
Dentro de una condición, puedes ejecutar bucles como `for`, `while`, etc.
```javascript
let numero = 3;
if (numero > 0) {
for (let i = 0; i < numero; i++) {
console.log("Iteración:", i);
}
}
```
7. Manejo de arreglos (arrays):
Puedes realizar operaciones sobre arrays, como agregar, eliminar, o modificar elementos.
```javascript
let lista = [];
let edad = 16;
if (edad < 18) {
lista.push("Descuento estudiante");
} else {
lista.push("Descuento adulto");
}
console.log(lista);
```
8. Control de flujo con `return`, `break`, `continue`:
Puedes usar estas instrucciones para controlar el flujo de ejecución dentro de las condiciones.
```javascript
function verificarNumero(numero) {
if (numero < 0) {
return "Número negativo"; // Termina la función si la condición es verdadera
} else {
return "Número positivo";
}
}
console.log(verificarNumero(-5));
```
9. Condiciones anidadas:
Puedes tener `if` dentro de otros `if` (condiciones anidadas) para crear lógica más compleja.
```javascript
let edad = 20;
let tieneLicencia = true;
if (edad >= 18) {
if (tieneLicencia) {
console.log("Puedes conducir");
} else {
console.log("Necesitas una licencia para conducir");
}
} else {
console.log("Eres menor de edad");
}
```
10. Manejo de errores o excepciones:
Puedes usar `try...catch` para manejar posibles errores.
```javascript
let input = "abc";
if (isNaN(input)) {
try {
throw new Error("El valor ingresado no es un número");
} catch (e) {
console.log(e.message);
}
} else {
console.log("El valor es un número");
}
```
Resumen:
En cada condición (`if`, `else if`, `else`) puedes ejecutar cualquier tipo de lógica, como asignar valores, ejecutar funciones, modificar el DOM, hacer cálculos, manejar errores, o controlar el flujo del programa. ¡Es muy flexible!
Asi me quedo a mi, Use pues JavaScript, Astro y Tailwind; Aca el codigo:
Aca el codigo JS:
```js
function i(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
var numeroSecreto = i(0, 11);
var botonEnviar = document.getElementById('enviar');
var botonReiniciar = document.getElementById('reiniciar');
botonEnviar.addEventListener('click', recibir);
botonEnviar.addEventListener('click', resultado);
botonEnviar.addEventListener('click', print);
botonEnviar.addEventListener('click', numeroJugadorResultado);
botonReiniciar.addEventListener('click', reiniciar);
function reiniciar() {
location.reload();
}
function recibir() {
var numeroJugador = document.getElementById('texto').value;
const r = numeroJugador;
return Number(r);
}
function resultado() {
if (recibir() >= 0 && recibir() <= 10) {
if (recibir() == numeroSecreto) {
const r = 'Ganaste';
return r;
} else {
const r = 'Perdiste';
return r;
}
} else if (recibir() < 0 || recibir() > 10) {
const r = 'Solo se pueden ingresar numero entre el 0 y el 10, vuelve a intentar, Perdiste';
return r;
} else {
const r = 'Debes ingresar un numero, no letras o símbolos';
return r;
}
}
function numeroJugadorResultado() {
if (resultado() === 'Debes ingresar un numero, no letras o símbolos') {
const r = 'El numero que ingreso el jugador es incorrecto';
return r;
} else if (resultado() === 'Solo se pueden ingresar numero entre el 0 y el 10, vuelve a intentar, Perdiste') {
const r = 'El numero que ingreso el jugador es incorrecto';
return r;
} else if (resultado() === 'Ganaste' || resultado() === 'Perdiste') {
const r = `El numero Jugador del es ${recibir()}`;
return r;
}
}
function styles() {
botonEnviar.disabled = true;
botonEnviar.style.color = '#b6bbc5';
botonEnviar.style.backgroundColor = '#0e6077';
botonReiniciar.style.display = 'flex';
botonReiniciar.style.justifyContent = 'center';
}
function print() {
if (resultado() === 'Solo se pueden ingresar numero entre el 0 y el 10, vuelve a intentar, Perdiste') {
styles();
const color = resultado() == 'Ganaste' ? 'bg-green-500' : 'bg-red-500';
document.querySelector('#result').innerHTML = `
<h1 class="w-[90%]">Solo se pueden ingresar numero entre el 0 y el 10, vuelve a intentar.
<h1 class='w-[30%] rounded-lg ${color}'>Perdiste`;
} else {
styles();
const color = resultado() == 'Ganaste' ? 'bg-green-500' : 'bg-red-500';
document.querySelector('#result').innerHTML = `
</main>
```
El numero secreto es ${numeroSecreto}
${numeroJugadorResultado()}
<h1 class='w-[30%] rounded-lg ${color}'>${resultado()}`; } } ```El codigo HTML y TailWind: ```html <h1 class="relative bottom-8 w-[85vw] text-center text-2xl font-bold text-gray-100 sm:w-[60vw]"> Este es un Juego en el cual tienes que adivinar un numero del 0 al 10, compites contra la PC <main class="h-[40%] w-[90%] rounded-2xl bg-cyan-950 shadow-2xl sm:w-[70%] lg:w-[35%]">
<input
type="number"
id="texto"
class="w-[50%] rounded-lg bg-slate-300 text-center font-semibold text-sky-950 placeholder:font-semibold placeholder:text-sky-950 sm:placeholder:pl-[10%]"
min="0"
max="10"
placeholder="numero de 0 a 10"
/>
<button
id="enviar"
class="mt-4 h-auto w-[5rem] rounded-lg border-[2px] border-[#0e6077] bg-blue-950 font-semibold duration-[120ms] active:scale-95 sm:ml-8 sm:mt-0"
>enviar</button
>
<button
id="reiniciar"
class="hidden h-auto w-[5rem] rounded-lg border-[2px] border-[#0e6077] bg-blue-950 text-[0.9rem] font-semibold duration-[120ms] active:scale-95"
>Reiniciar</button
>
La función **Math.floor()** devuelve el máximo entero menor o igual a un número.
La función **Math.random()** devuelve un número de coma flotante pseudo-aleatorio, comprendido en el rango de 0 a menor que 1 (es decir, incluido el 0 pero no el 1), con una distribución aproximadamente uniforme en este rango. Dicho rango puede ser ampliado hasta los valores deseados.
Hola chicos aqui va mi aporte:\\<html lang="en">\<head> \<meta charset="UTF-8"> \<meta name="viewport" content="width=device-width, initial-scale=1.0"> \<title>ultimate js\</title> \<link rel="stylesheet" href="style.css">\</head>\<body> \
<script src="app.js"></script>
</body>
</html>
```
\
\<script src="app.js">\</script>\</body>\</html>```js
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ultimate js</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Guess the Number\
\Adivina un número entre el 1 y el 100\
\<label for="guess">Introduce tu conjetura: \<input type="number" id="guess" min="1" max="100"> \</label> \<input type="button" value="Guess!" onclick="checkGuess()"> \\
\Guess the Number
Adivina un número entre el 1 y el 100
<label for="guess">Introduce tu conjetura: <input type="number" id="guess" min="1" max="100"> </label> <input type="button" value="Guess!" onclick="checkGuess()">
mi humilde aporte
Viendo que Algunos compañeros han señalado que es importante hacer una pausa para explicar algunos conceptos como lo indica @wilbort Encomenderos Ruiz por ejemplos qué es un método que fueron los que se uso en la clase y cómo funciona. Esto es crucial, ya que quienes están tomando este curso de fundamentos pueden perder esta información esencial.
Los métodos en JavaScript son funciones que están asociadas a un objeto. Y Permiten realizar acciones específicas o manipular datos. A continuación, se describen algunos métodos comunes:
\#### 1. \*\*Math.floor()\*\*
\*\*Descripción\*\*: Redondea un número hacia abajo al entero más cercano.
\*\*Ejemplo\*\*:
```javascript
let numero = 4.7;
let redondeado = Math.floor(numero);
console.log(redondeado); // Output: 4
```
\#### 2. \*\*Math.random()\*\*
\*\*Descripción\*\*: Devuelve un número decimal aleatorio entre 0 (inclusive) y 1 (exclusive).
\*\*Ejemplo\*\*:
```javascript
let numeroAleatorio = Math.random();
console.log(numeroAleatorio); // Output: un número entre 0 y 1
```
Para obtener un número aleatorio en un rango específico:
```javascript
let min = 1;
let max = 10;
let aleatorioEnRango = Math.floor(Math.random() \* (max - min + 1)) + min;
console.log(aleatorioEnRango); // Output: un número entre 1 y 10
```
\#### 3. \*\*parseInt()\*\*
\*\*Descripción\*\*: Convierte una cadena de texto en un número entero. Puedes especificar la base (radix) del sistema numérico.
\*\*Ejemplo\*\*:
```javascript
let texto = "123";
let numeroEntero = parseInt(texto);
console.log(numeroEntero); // Output: 123
```
Con base:
```javascript
let textoHex = "1A";
let numeroHex = parseInt(textoHex, 16);
console.log(numeroHex); // Output: 26
```
\### Resumen
Estos métodos son herramientas útiles en JavaScript para realizar operaciones matemáticas y manipulación de datos.
Les dejo mis notas por aquí, hice algunas lineas paso a paso para que sean mas faciles de entender y en comentarios intento poner la explicación de cada una.
me parece que falta información para poder seguir y hacerlo a la vez, para vincularlo a un navegador, como construye el html, como vincula o que puerto usar, etc
procura que se vea completo tu código en VS de favor , gracias
Asi quedo mi Juego.
```txt
```
```txt
```
Si tienes vscode porque no ejecutas los códigos ahí mismo tenemos extensiones como code Runner que nos pueden ayudar
Después de terminar todo este curso de JavaScript que me recomiendan seguir ?
```js
const numeroSecreto = Math.floor(Math.random() * 10 + 1);
const numeroJugador = parseInt(
prompt("Adivina el número secreto entre el 1 y el 10")
);
console.log(`Este es el número con el que juegas: ${numeroJugador}`);
if (numeroJugador === numeroSecreto) {
console.log(`Ganaste, el número secreto era: ${numeroSecreto}`);
} else {
console.log(`Perdiste, el número era: ${numeroSecreto}`);
}
```const numeroSecreto = Math.floor(Math.random() \* 10 + 1);
const numeroJugador = parseInt( prompt("Adivina el número secreto entre el 1 y el 10"));
console.log(`Este es el número con el que juegas: ${numeroJugador}`);
if (numeroJugador === numeroSecreto) { console.log(`Ganaste, el número secreto era: ${numeroSecreto}`);} else { console.log(`Perdiste, el número era: ${numeroSecreto}`);}
![]()
Hola compañeros! Aquí les dejo mi solución al ejercicio, tengo que hacer la aclaración de que quise implementar ciclos a pesar de que es un tema que veremos más adelante en el curso! 👀
Comenta tu solución!
```js
// Function to generate a random integer within a range
function generateRandomNumber(minRange, maxRange) {
return Math.floor(Math.random() * maxRange - minRange + 2)
}
invalidLimits = true;
let minimum, maximum
while (invalidLimits) {
minimum = parseInt(prompt("Choose an integer value as your minimum range"));
maximum = parseInt(prompt("Choose an integer value as your maximum range"));
if (isNaN(minimum) || isNaN(maximum)) {
alert("Please provide valid numbers for your guess limits");
} else {
invalidLimits = false;
}
}
alert(`A random number between ${minimum} and ${maximum} has been chosen, get ready your 3 guesses!`);
const randInt = generateRandomNumber(minimum, maximum);
let guessed = false;
// Give the user 3 chances to guess the number
for (let iterator=0; iterator<3; iterator++) {
const guess = parseInt(prompt(`What will your guess #${iterator+1} be?`));
if (guess === randInt) {
alert(`Congratulations! You have guessed the number: ${guess}`);
guessed = true;
break;
} else if (isNaN(guess)) {
alert("You just wasted a guess! Make sure to provide a valid number");
continue;
}
if (guess < randInt) {
alert(`The random number is higher than your guess!`);
} else {
alert(`The random number is lower than your guess!`);
}
}
if (!guessed) {
alert(`You lose, the correct number was ${randInt}`);
}
```
Aqui un codigo de ejemplo real:
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego: Adivina el número</title>
<style>
body {
display: flex;
margin: 0 auto;
padding: 0 auto;
}
.div1 {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
margin-top: 10%;
}
</style>
</head>
<body>
<script src="juego.js"></script>
</body>
</html>
```let numero = Math.floor(Math.random() \* 100 + 1)
let resultado = document.getElementById("Result")let input = document.getElementById("Number")let intentos = 0
function verify() { if (input.value == numero) { alert(`Lo has conseguido en ${intentos} intentos`) resultado.innerHTML = 'Digite un número entre el 0 y el 100' input.value = '' document.getElementById("intentos").innerHTML = '' numero = Math.floor(Math.random() \* 100 + 1) } else { if (numero > input.value) { resultado.innerHTML = `El número es mayor que ${input.value}` input.value = '' } if (numero < input.value) { resultado.innerHTML = `El número es menor que ${input.value}` input.value = '' } intentos += 1 document.getElementById("intentos").innerHTML = intentos }}```js
let numero = Math.floor(Math.random() * 100 + 1)
let resultado = document.getElementById("Result")
let input = document.getElementById("Number")
let intentos = 0
function verify() {
if (input.value == numero) {
alert(`Lo has conseguido en ${intentos} intentos`)
resultado.innerHTML = 'Digite un número entre el 0 y el 100'
input.value = ''
document.getElementById("intentos").innerHTML = ''
numero = Math.floor(Math.random() * 100 + 1)
} else {
if (numero > input.value) {
resultado.innerHTML = `El número es mayor que ${input.value}`
input.value = ''
}
if (numero < input.value) {
resultado.innerHTML = `El número es menor que ${input.value}`
input.value = ''
}
intentos += 1
document.getElementById("intentos").innerHTML = intentos
}
}
```
Ingrese un número del 0 al 100
<h1 id="Result">Digite un número entre el 0 y el 100
<input type="number" id="Number">
<button onclick="verify()" id="Submit">Submit</button>
Hola a todos, aquí les va la solución porque me super perdí al igual que todos los que entramos en modo noob. (pd busque en los aportes y no encontré la solución así que tocó profe gpt :)
Para ejecutar el código tal como el profe lo que hice fue crear una carpeta llamada juego y moví el archivo juego.js a esta carpeta, luego pedí a gpt un html para correr este js esto fue lo que me arrojó:
`<html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ejecutar juego.js</title> <script defer src="juego.js"></script></head><body>
Ejecutando juego.js...
Abre la consola del navegador (F12 -> Consola) para ver los mensajes del script.
</body></html>` (como todo sé que se puede mejorar pero vamos paso a paso. También creo que debía que aprender html antes de ver este curso). En cualquier caso lo que sigue es en el archivo html dar click derecho y seleccionar la opción de abrir en un servidor en vivo.  Espero haber ayudado, un abrazo grande y ánimo para todos los noobs como yo :)Para aquellos que quieren seguir trabajando con Node y a **través de la terminal**, les dejo a continuación cómo lo hice yo:
Usé un módulo llamado "**readline-sync**" (es algo así como una función externa). Así de cara puede asustar un poco, pero es algo muy sencillo; les explico: tienen que ir a la carpeta del proyecto con una terminal con privilegios de administrador y correr el siguiente comando:
`npm install readline-sync`
Cuando hagamos esto, se generará una nueva carpeta en nuestro proyecto llamada "**node\_modules**" con el módulo que acabamos de instalar.
Os dejo mi código a continuación por si os es de ayuda. Utilizo un **bucle**, que aún no ha aparecido en el curso, y un par de **condicionales ternarias** (búsquenlas, les harán la vida más bonita) pero lo demás son cosas que ya hemos aprendido:
```js
const readlineSync = require('readline-sync'); // Requiere "npm install readline-sync"
const is_window = typeof window !== 'undefined'; // Verifica si estamos en un navegador o en una terminal
// Esto es para evitar duplicar texto
const guess_msg = "Adivina el número secreto (1-10): ";
const error_msg = "Por favor, introduce un número válido: ";
const numero_secreto = Math.floor(Math.random() * 10 + 1);
let numero_jugador = 0;
let is_valido = false;
let intentos_restantes = 3;
do {
/* Si estamos en un navegador */
if (is_window) numero_jugador = prompt(!isNaN(numero_jugador) ? guess_msg : error_msg).trim();
/* Si lo lanzamos con Node por terminal */
else numero_jugador = readlineSync.question(!isNaN(numero_jugador) ? guess_msg : error_msg).trim();
// Verifica si es válido
is_valido = !isNaN(numero_jugador) && (numero_jugador = parseInt(numero_jugador)) <= 10 && numero_jugador >= 1
// Si es válido, verificamos si el número coincide
if (is_valido) {
if (numero_jugador === numero_secreto) {
console.log("¡Has acertado! ¡El número secreto era " + numero_secreto + "!");
break;
}
// Indicamos al jugador si el número es mayor o menor y restamos una vida
if (numero_jugador > numero_secreto) {
console.log("El número es menor que " + numero_jugador + "! (quedan " + (--intentos_restantes) + " intentos)");
}
else {
console.log("El número es mayor que " + numero_jugador + "! (quedan " + (--intentos_restantes) + " intentos)");
}
}
} while (!is_valido || intentos_restantes > 0);
```Les dejo una captura de pantalla de cómo se ve:
`<html lang="es">`
`<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Adivina el número</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"></head>`
`<body style="background-color:azure;"> <section class="container d-flex align-items-center justify-content-center vh-100">
<h1 class="text-center fs-1">Ruleta de la suerte
</section>`
` <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script> const secret_number = Math.floor(Math.random() * 10 + 1); console.log("Número secreto (para pruebas): " + secret_number);`
` let lives = 3;`
` const form = document.getElementById("guess-form"); const result = document.getElementById("result"); const livesDisplay = document.getElementById("lives");`
` livesDisplay.textContent = "Vidas restantes: " + lives;`
` form.addEventListener("submit", function (event) { event.preventDefault();`
` const player_number = parseInt(document.getElementById("player-input").value);`
` if (player_number === secret_number) { result.textContent = "¡Has ganado! Adivinaste el número secreto 🎉"; form.style.display = "none"; } else { lives--; if (lives > 0) { if (player_number < secret_number) { result.textContent = "El número es demasiado bajo. Intenta de nuevo."; } else { result.textContent = "El número es demasiado alto. Intenta de nuevo."; } livesDisplay.textContent = "Vidas restantes: " + lives; } else { result.textContent = "Has perdido, el número secreto era: " + secret_number + " 😢"; livesDisplay.textContent = "Vidas restantes: 0"; form.style.display = "none"; } } }); </script></body>`
`</html>`
Intenta adivinar el número secreto entre 1 y 10. Tienes 3 intentos.
<form id="guess-form"> <label for="player-input" class="form-label lead">Tipea un numero:</label> <input type="number" class="form-control" id="player-input" aria-describedby="think">
<button type="submit" class="btn btn-success">Enviar</button> </form>`
` Usa sabiamente tus 3 intentos
¿Como puedo conectar mi JavaScript con mi navegador web? Para que asi como a el cuando le de enter se ejecute y no tenga que copiarlo todo y correrlo
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?