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

pedro,, · « **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.

Mario R. Rancel · « **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

pedro,, · « **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.

Mario R. Rancel · « **Respuesta #3 en:** 25 de Noviembre 2015, 09:19 »

Corregido ok!

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

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

pedro,,

Crear números aleatorios con JavaScript juego adivinar un número Math CU01165E#

Mario R. Rancel

Re:Crear números aleatorios con JavaScript juego adivinar un número Math CU01165E.

pedro,,

Re:Crear números aleatorios con JavaScript juego adivinar un número Math CU01165E.

Mario R. Rancel

Re:Crear números aleatorios con JavaScript juego adivinar un número Math CU01165E.

Preguntas y respuestas