« anterior próximo »
Páginas: [1]

Autor Tema: Crear números aleatorios con JavaScript juego adivinar un número Math CU01165E#  (Leído 14378 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Crear números aleatorios con JavaScript juego adivinar un número Math CU01165E#
« en: 22 de Noviembre 2015, 23:31 »
Hola, planteo mi solución al ejercicio CU01165E del curso gratuito de programación web de aprenderaprogramar.

Citar
EJERCICIO 1
Crea un script que genere un número aleatorio entre 1 y 100. A continuación debe pedir al usuario que adivine el número. Si el usuario responde un número menor al número aleatorio, debe mostrarse un mensaje “El número es mayor. Inténtelo de nuevo” y dar opción a responder de nuevo. Si el usuario responde un número mayor debe mostrarse un mensaje “El número es menor. Inténtelo de nuevo”. Si el usuario acierta debe mostrarse “Enhorabuena. Ha acertado”. El programa debe terminar si el usuario acierta o si se superan los 30 intentos sin acertar. En caso de superarse los 30 intentos debe mostrarse el mensaje “Ha superado 30 intentos. El programa termina”.

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
.pulsador {padding:15px; width: auto; display: inline-block; margin: 25px;
cursor: pointer; color: yellow; border-radius: 40px; background: purple;}
.caja{border: solid 2px blue; float: left;}
</style>
<script type="text/javascript">
function adivinaAleatorio(){
var numeroAleatorio = Math.floor((Math.random()*(101-1))+1);
document.getElementById('resultado').innerHTML = 'Número aleatorio = ' + numeroAleatorio;
var contador = 1;
var respuesta = prompt('Introduzca un numero del 1 al 100');
while(Number(respuesta)!==numeroAleatorio && contador<30){
if(respuesta<numeroAleatorio){
respuesta = prompt('El número es mayor que el introducido. Inténtelo de nuevo');
}else{
respuesta = prompt('El número es menor que el introducido. Inténtelo de nuevo');
}
contador++;
document.getElementById('contador').innerHTML = 'Intentos = ' + contador;
}
if(contador==30){
alert('Has superado el número máximo de intentos. Se acabó');
}else{
alert('Enhorabuena. Ha acertado');
}

}
</script>
</head>
<body>
<div class="caja">
<h3>EJERCICIO 1</h3>
Crea un script que genere un número aleatorio entre 1 y 100. A continuación debe pedir al usuario que adivine el número.
Si el usuario responde un número menor al número aleatorio, debe mostrarse un mensaje “El número es mayor. Inténtelo de nuevo”
y dar opción a responder de nuevo. Si el usuario responde un número mayor debe mostrarse un mensaje “El número es menor. Inténtelo
de nuevo”. Si el usuario acierta debe mostrarse “Enhorabuena. Ha acertado”. El programa debe terminar si el usuario acierta o si se
superan los 30 intentos sin acertar. En caso de superarse los 30 intentos debe mostrarse el mensaje “Ha superado 30 intentos. El programa termina”.</br>
<div class="pulsador" onclick="adivinaAleatorio()">Comenzar Ejercicio 1</div>
<div class="pulsador" id="contador">00</div>
<div class="pulsador" id="resultado">00</div>
</div>
</body>
</html>
Citar
EJERCICIO 2
Crea un script que pida al usuario el dato de radio en metros de la base de un cilindro y el dato de altura del cilindro. Utilizando la propiedad Math.PI debe realizarse el cálculo para determinar el área de la base del cilindro y el volumen del cilindro y mostrar estos resultados. Consulta en internet si no recuerdas las fórmulas a aplicar. .

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
.pulsador {padding:15px; width: auto; display: inline-block; margin: 25px;
cursor: pointer; color: yellow; border-radius: 40px; background: purple;}
.caja{border: solid 2px blue; float: left;}
</style>
<script type="text/javascript">
function calculosCilindro(){
var radio = Number(prompt('Introduzca el radio en metros de la base de un cilindro: '));
var altura = Number(prompt('Introduzca la altura en metros del cilindro: '));
var areaBaseCilindro = Math.PI*(Math.pow(radio, 2));
var volumenDelCilindro = Math.PI*(Math.pow(radio, 2))*altura;
document.getElementById('altura').innerHTML = 'altura = ' + altura + ' metros';
document.getElementById('radio').innerHTML = 'radio = ' + radio + ' metros';
document.getElementById('areaBase').innerHTML = 'area de la base del cilindro = ' + areaBaseCilindro + ' metros';
document.getElementById('volumenCilindro').innerHTML = 'volumen del cilindro = ' + volumenDelCilindro + ' metros cubicos';
}
</script>
</head>
<body>
<div class="caja">
<h3>EJERCICIO 2</h3>
Crea un script que pida al usuario el dato de radio en metros de la base de un cilindro y el dato de altura del cilindro.
Utilizando la propiedad Math.PI debe realizarse el cálculo para determinar el área de la base del cilindro y el volumen del
cilindro y mostrar estos resultados. Consulta en internet si no recuerdas las fórmulas a aplicar. .</br>
<div class="pulsador" onclick="calculosCilindro()">Comenzar Ejercicio 2</div>
<div class="pulsador" id="radio">00</div>
<div class="pulsador" id="altura">00</div>
<div class="pulsador" id="areaBase">00</div>
<div class="pulsador" id="volumenCilindro">00</div>
</div>
</body>
</html>
Citar
EJERCICIO 3
Crea un script que dé lugar a lo siguiente:
a) En un div con id="volador” debes tener una palabra como <<JavaScript>>.
b) Utilizando las funciones trigonométricas, las propiedades de posicionamiento CSS y funciones para control de animaciones/tiempo debes dar lugar a que dicha palabra se desplace desde la izquierda hasta la derecha de la pantalla siguiendo un movimiento sinusoidal (es decir, subiendo y bajando suavemente describiendo ondas).

Aquí el código, con el ejercicio resuelto de dos formas distintas.
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
button {margin:10px;}
.volador{border: solid 1px; width: auto; text-align: center; padding:15px;
color: yellow; border-radius: 40px; background: purple; position:absolute; top: 400px; left: 0;position:absolute; left: 0;}
#volador2{top: 400px;}
#volador1{top: 200px;}
</style>
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;
var globalID;
var posicionHorizontal = 0;
var posicionVerticalA = 400;
var posicionVertical = 200;
var direccion = false;
function animacionRepetimos() {
posicionHorizontal++;
if(posicionVerticalA==450){direccion=true;}
if(posicionVerticalA==350){direccion=false;}
if(!direccion){
posicionVerticalA++;
}else{
posicionVerticalA--;
}
posicionVertical = posicionVertical+(Math.sin(0.04*posicionHorizontal));
document.getElementById('volador1').style.left = posicionHorizontal + 'px';
document.getElementById('volador1').style.top = posicionVertical + 'px';
document.getElementById('volador2').style.left = posicionHorizontal + 'px';
document.getElementById('volador2').style.top = posicionVerticalA + 'px';
globalID = requestAnimationFrame(animacionRepetimos);
}
function empezar() {globalID = requestAnimationFrame(animacionRepetimos);}
function detener() {  cancelAnimationFrame(globalID);}
</script>
</head>
<body >
<button id="start" onclick="empezar()">Empezar</button><button id="stop" onclick = "detener()">Detener</button>
<div id="volador1" class="volador">JavaScript</div>
<div id="volador2" class="volador">JavaScript</div>
<div id="posicionVertica"></div>
</body>
</html>
Saludos.
« Última modificación: 17 de Junio 2018, 17:55 por Ogramar »
En línea

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Re:Crear números aleatorios con JavaScript juego adivinar un número Math CU01165E.
« Respuesta #1 en: 24 de Noviembre 2015, 08:54 »
Hola Pedro los ejercicios en general los veo bien resueltos y además estás haciendo uso de aspectos clave de JavaScript correctamente. Hay un aspecto del ejercicio 3 que no me acaba de gustar, y es que si no detienes la animación los "objetos voladores" continúan yéndose hacia la derecha indefinidamente y esto da lugar a que el navegador vaya creando un scroll hacia la derecha que tendería a hacerse infinitamente grande y posiblemente llevara a que se bloqueara. En general debemos prever la posibilidad de que el usuario no haga lo que esperamos (en este caso por ejemplo pulsar el botón detener) y tener previsto algo que impida el bloqueo. En este caso podría ser que los objetos voladores reboten en el límite derecho de la pantalla y vuelvan hacia atrás, o que la animación se detenga cuando los objetos voladores lleguen al límite derecho.

Saludos
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Crear números aleatorios con JavaScript juego adivinar un número Math CU01165E.
« Respuesta #2 en: 24 de Noviembre 2015, 23:50 »
Hola Mario, muchas gracias por la corrección y los comentarios.

Retoqué un poco ese ejercicio, quedando así:

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
button {margin:10px;}
.volador{border: solid 1px; width: auto; text-align: center; padding:15px;
color: yellow; border-radius: 40px; background: purple; position:absolute; top: 400px; left: 0;position:absolute; left: 0;}
#volador2{top: 400px;}
#volador1{top: 200px;}
</style>
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;
var globalID;
var posicionHorizontal = 0;
var posicionVerticalA = 400;
var posicionVertical = 200;
var direccionVertical = false;
var direccionHorizontal = false;
function animacionRepetimos() {
if(posicionHorizontal==0){direccionHorizontal=false;}
if(posicionHorizontal==(Number(document.body.clientWidth)-100)){direccionHorizontal=true;}
if (direccionHorizontal==true){
posicionHorizontal--;
}else{
posicionHorizontal++;
}
if(posicionVerticalA==450){direccionVertical=true;}
if(posicionVerticalA==350){direccionVertical=false;}
if(!direccionVertical){
posicionVerticalA++;
}else{
posicionVerticalA--;
}
posicionVertical = posicionVertical+(Math.sin(0.04*posicionHorizontal));
document.getElementById('volador1').style.left = posicionHorizontal + 'px';
document.getElementById('volador1').style.top = posicionVertical + 'px';
document.getElementById('volador2').style.left = posicionHorizontal + 'px';
document.getElementById('volador2').style.top = posicionVerticalA + 'px';
globalID = requestAnimationFrame(animacionRepetimos);
}
function empezar() {globalID = requestAnimationFrame(animacionRepetimos);}
function detener() {  cancelAnimationFrame(globalID);}
</script>
</head>
<body >
<button id="start" onclick="empezar()">Empezar</button><button id="stop" onclick = "detener()">Detener</button>
<div id="volador1" class="volador">JavaScript</div>
<div id="volador2" class="volador">JavaScript</div>
<div id="posicionVertica"></div>
</body>
</html>
Saludos.
En línea

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Re:Crear números aleatorios con JavaScript juego adivinar un número Math CU01165E.
« Respuesta #3 en: 25 de Noviembre 2015, 09:19 »
Corregido ok!
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".