Autor Tema: Efectos visuales en JavaScript juego arrastrar y soltar ejemplo código CU01166E (Leído 3520 veces)

Dimitar Stefanov · « **en:** 04 de Abril 2016, 18:35 »

Buenas tardes.

A continuación pongo unas posibles soluciones de los ejercicios de la entrega CU01166E del curso JavaScript desde cero.

Primer ejercicio:

Citar

EJERCICIO 1

Realiza una descripción de cada una de las instrucciones del código del ejemplo anterior indicando cuál es su cometido. Si has seguido el curso desde el principio, debes ser capaz de interpretar todo el código.

Ejemplo: La primera línea <!DOCTYPE … realiza la declaración de tipo de documento HTML a efectos de que los navegadores interpreten en qué versión de HTML está escrito el código.

La etiqueta html es la etiqueta de apertura del código HTML. La etiqueta head es …

El código:

Código: [Seleccionar]

<!DOCTYPE html> <!-- Declaración del tipo de documento-->
<html> <!-- Se abre el "html"-->
<head> <!-- Se abre el "head"-->
	<title>Cursos aprender a programar</title> <!-- El título de la página-->
	<meta charset="UTF-8"> <!-- Declaración del unicode del documento-->
	<meta name="description" content="Aprender a programar con cursos reconocidos por su calidad didáctica"/> <!-- La descripción de la página-->
	<meta name="keywords" content="HTML, CSS, JavaScript, Java, Visual Basic, Joomla, PHP"/> <!-- Las palabras claves de la página--> 
	<style type="text/css"> /* Empezamos con los estilos de la página*/
	*{
		font-family: verdana, sans-serif; /* Establecemos, para cada elemento de la página una fuente de la familia "verdana" y en su defecto "sans-serif"*/
	}
	#principal{ /*para el elemento con id "principal"*/
		text-align: center; /* que se centre el texto*/
		width: 95%; /*el elemento que tenga una anchura de 95% respecto a su padre*/
		margin: 0 auto; /*el elemento que tenga un margen automático (centrado) a la derecha y a la izquierda y 0 arriba y abajo*/
	}
	.tituloCurso{ /*para el elemento con class "tituloCurso"*/
		color: white; /* que tenga un color blanco*/
		float: left; /*que flote a la izquierda*/
		padding: 36px 44px; /*que tenga un relleno (arriba y abajo) de 36px y 44px a la derecha e izquierda*/
		font-size: 2.65em; /*la fuente que tenga una medida de 2.65em*/
		font-style: bold; /* la fuente que sea gruesa*/
		text-decoration: none; /*que no tenga ninguna decoración el texto (normalmente se pone para anular es subrayado de los enlaces)*/
	}
	a:hover{ /* cuando estemos encima de los enlaces*/
		color: orange !important; /*que el color se convierta en naranja. La instrucción "!important" significa que esta característica prevalezca por encima de cualquier otra*/
	}
	</style> <!-- Cerramos los estilos-->
	<script type="text/javascript"> //Abrimos el JavaScript
		
		function ejemplo(){ //Funcion con nombre "ejemplo()"
			var nodosTituloCurso = document.querySelectorAll('.tituloCurso'); //Seleccionamos mediante los selectores para el lenguaje CSS
			var contador = 0; // definimos e inicializamos la variable "contador"
			var nodosCambiados = new Array(); // definimos e inicializamos la variable "nodosCambiados" como una array
			var tocaCambiar = true; //Inicializamos una variable de tipo boolean
			setTimeout(function(){ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar)},1500); // para la función "ejemmploAccion()" un retardo de 1,5 segundo. También le pasamos parámetros
		}

		function ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar){ // función "ejemploAccion()" con parámetros: nodosTituloCurso, nodosCambiados, contador, tocaCambiar
			if(contador<nodosTituloCurso.length){ // si el "contador" es más pequeño que la cantidad de "nodosTituloCurso"
				var indice = Math.floor((Math.random()*(nodosTituloCurso.length))); //Inicilizamos una variable al azar multiplicada por el número de los "nodosTituloCurso" y la redondemos hacia abajo
				if(nodosCambiados.length!=0){ // si la cantidad de "nodosCambiados" es diferente a cero
					for(var i=0;i<nodosCambiados.length;i++){ //Un bucle que empiece con cero y que continúe mientras la variable "i" sea menor que la cantidad de "nodosCambiados"
						if(nodosCambiados[i]==indice){tocaCambiar=false;} // si "nodosCambiados" con el correspondiente índice de la array es igual a la variable "indice" la variable "tocaCambiar" es false
					}// Cerramos el bucle
				}// Cerramos la condicional
				if(tocaCambiar==true){ // si la variable "tocaCambiar" es igual a true
					cambiarNodo(nodosTituloCurso[indice]); // invocamos la función "cambiarNodo" con parámetro array "nodosTituloCurso" con el índice correspondiente
					nodosCambiados.push(indice); //añadimos a la array "nodosCambiados" el correspondiente índice
					contador = contador+1; //Añadimos una unidad  a la variable "contador"
					setTimeout(function(){ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar)},1500); //invicamos la función "ejemploAccion" con parámetros y retardo de 1,5 segundos
				}else{tocaCambiar=true; ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar);} //si no es así, establecemos que la variable "tocaCambiar" sea false e invocamos la función "ejemploAccion" con parámetros
			}//Cerramos la condicional 
			else{ //Caso base fin de la recursión
				document.body.style.backgroundColor='black'; //El body que tenga un fondo negro
				document.getElementById('principal').style.color = 'white'; // el elemento con id "principal" que tenga color blanco
				for(var i=0;i<nodosTituloCurso.length;i++){ //Bucle empezado desde cero que se recorra mientras la variable "i" sea menos que los "nodosTituloCurso"
					nodosTituloCurso[i].style.color = 'yellow'; // que los "nodosTituloCurso" tengan color amarillo
				}// Cerramos el bucle

			} // Cerramos el caso de base fin de la recursión
		} // Cerramos la función "ejemploAccion()"

		function cambiarNodo(elNodo){elNodo.style.backgroundColor = 'black';} // que los "nodosTituloCurso" tengan un fondo negro

</script> <!-- Cerramos el script de JavaScript-->
</head> <!-- Cerramos "head"-->
<body onload="ejemplo()"> <!-- Abrimos "body" e invocamos la función "ejemplo()" al cargarse la página-->
	<div id="principal"> <!-- Abrimos el div con id "principal"-->
		<h1>Cursos de programación</h1> <!-- Título principal-->
		<h3>Reconocidos por su calidad didáctica</h3> <!-- Título secundario-->
		<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59">Fundamentos</a></div> <!-- Enlace: Fundamentos-->
		<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=68&Itemid=188">Java</a></div> <!-- Enlace: Java-->
		<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192">HTML</a></div> <!-- Enlace: HTML-->
		<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203">CSS</a></div> <!-- Enlace: CSS-->
		<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206">JavaScript</a></div> <!-- Enlace: JavaScript-->
		<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193">PHP</a></div> <!-- Enlace: PHP-->
		<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=38&Itemid=152">Joomla</a></div> <!-- Enlace: Joomla-->
		<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=37&Itemid=61">Visual Basic</a></div> <!-- Enlace: Visual Basic-->
		<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59">Pseudocódigo</a></div> <!-- Enlace: Pseudocódigo-->
		<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=section&layout=blog&id=7&Itemid=26">Libros/ebooks</a></div> <!-- Enlace: Libros/ebooks-->
		<div><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=64&Itemid=87">Cursos tutorizados</a></div> <!-- Enlace: Cursos tutorizados-->
	</div> <!-- Cerramos el div con id "principal"-->
</body> <!-- Cerramos body-->
</html> <!-- Cerramos html-->

El segundo ejercicio:

Citar

EJERCICIO 2

Crea una animación JavaScript (decide tú el efecto que quieres implementar: pueden ser cosas moviéndose por la pantalla, texto cambiando de tamaño o cualquier otra cosa que se te ocurra) con las herramientas que hemos ido conociendo a lo largo del curso. Ejecútalo en distintos navegadores y comprueba que se ejecute tal y como esperas en todos ellos.

El código:

Código: [Seleccionar]

 <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<style type="text/css">
	body{
		background-color: black;
	}
	#principal{
		color: white; 
		background-color: black; 
		width: 1250px; 
		height: 700px; 
		border: solid 2px white;
	}
	#bienvenida{
		text-align: center;  
		width: 1200px; 
		height: 650px; 
		background: black; 
		color: white; 
		position: absolute; 
		top: 0; 
		left: 0; 
		z-index: 2; 
		padding: 40px;
	}
	#p01{
		font-size: 36px;
	}
	#p02{
		font-size: 40px;
	}
	#p03{
		font-size: 20px;
	}
	#p04{
		font-size: 36px;
	}
	#p04 span{
		color: red; 
		font-size: 60px;
	}
	#soga01{
		position: relative; 
		left: 25px;
	}
	#cuerda{
		position: relative; 
		left: 25px; 
		top: -10px;
	}
	#soga2{
		transform: rotate(180deg); 
		position: relative; 
		left: 13px; 
		top: -15px;
	}
	#bola{
		border: solid white; 
		border-radius:40px; 
		color: white; 
		position: relative; 
		display: inline-block; 
		padding: 15px; 
		width: auto; 
		left: 23px; 
		background-color: red; 
		top: -20px; 
		z-index: 1;
	}
	#hr01{
		position: absolute; 
		top: 640px; 
		border: solid 15px; 
		width: 20px; 
		left: 50px; 
		border-color: blue;
	}
	#hr02{
		position: absolute; 
		top: 670px; 
		border: solid 2px yellow; 
		width: 200px; 
		left: 20px;
	}
	#hr03{
		transform: rotate(90deg); 
		position: absolute; 
		left: 15px; 
		width: 350px; 
		border: solid 10px red; 
		top: 486px; 
		z-index: 1;
	}
	#hr04{
		border: solid 2px; 
		position: absolute; 
		width: 250px; 
		top: 370px; 
		left: 140px;
	}
	#ventilador{
		position: absolute; 
		top: 305px; 
		left: 320px; 
		transform: rotateY(70deg);
	}
	#marcoVentana{
		border: solid 2px white; 
		width: 550px; 
		height: 400px; 
		position: absolute; 
		top: 213px; 
		left: 610px; 
		border: solid; 
		border-image: url(http://stefjogest.com/marco_ventana.gif); 
		border-image-slice: 42; 
		border-image-width: 20px; 
		background-image: url(http://stefjogest.com/playa.jpg);
	}
	#alaIzquierda{
		position: absolute; 
		top: 230px; 
		left: 628px;
	}
	#alaDerecha{
		position: absolute; 
		top: 231px; 
		left: 898px;
	}
	#cerradura{
		position: absolute; 
		top: 445px; 
		left: 858px;
	}
	#cortina{
		position: absolute; 
		top: 10px; 
		left: 570px; 
		width:680px; 
		height: 700px;
	}
	#cerilla{
		position: absolute; 
		z-index: 1; 
		top: 100px; 
		left: 370px; 
		cursor: grab;
	}
	#llave{
		position: absolute; 
		top: 125px; 
		left: 250px; 
		z-index: 1; 
		cursor: grab;"
	}
	#herramientas{
		position: absolute; 
		border: solid 2px; 
		height: 150px; 
		top: 25px; 
		left: 225px; 
		cursor: grab;
	}
	#aprenderaprogramar{
		position: absolute; 
		top: 350px; 
		left: 750px; 
		text-align: center; 
		transform: scale(0);
	}
	#aprenderaprogramar a{
		color: orange; 
		text-decoration: none;
	}
	</style>
	<script type="text/javascript">

	var inicio;
	var fin;

	function quitarBienvenida(){
		bienvenida.style.zIndex = -1;
		inicio = new Date();
	}

	var sostenerCerilla = false;
	var sostenerLlave = false;

	function cogerCerilla(){
		var div = document.getElementsByTagName('div');
		div[0].onmousemove = moverCerilla;
		div[0].ondblclick = quitar;
	}

	function quitar(){
		var div = document.getElementsByTagName('div');
		document.getElementById('principal').style.cursor = "auto";
		div[0].onmousemove = function (){};
	}


	function moverCerilla(evobject){
		var screenX = evobject.screenX;
		var screenY = evobject.screenY;
		cerilla.style.top = (screenY-63)+"px";
		cerilla.style.left = (screenX-10)+"px";
		sostenerCerilla = true;
		sostenerLlave = false;
		document.getElementById('principal').style.cursor = "none";
	}

	function cogerLlave(){
		var div = document.getElementsByTagName('div');
		div[0].onmousemove = moverLlave;
		div[0].ondblclick = quitar;
	}

	function moverLlave(evobject){
		var screenX = evobject.screenX;
		var screenY = evobject.screenY;
		llave.style.top = (screenY-63)+"px";
		llave.style.left = (screenX-10)+"px";
		sostenerLlave = true;
		sostenerCerilla = false;
		document.getElementById('principal').style.cursor = "none";
	}

	

	function detectarCerilla(){
		setTimeout(quemarCuerda,500);
	}

	
	function quemarCuerda(){
		if(sostenerCerilla==true){
		cuerda.style.zIndex = "-1";
		globalID = requestAnimationFrame(caida);
		}
	}
	

	var i = 0;
	var j = 180;
	var k = 13;
	var l = 30;

	function caida(){
		soga2.style.top = (i+10)+"px";
		bola.style.top = i+"px";
		i+=3;
		globalID = requestAnimationFrame(caida);
		if(i>300){
			cancelAnimationFrame(globalID);
			globalID01 = requestAnimationFrame(tumbarCuerda);

		}
	}

	function tumbarCuerda(){
		soga2.style.transform = "rotate("+j+"deg)";
		soga2.style.top = i+"px"; 
		soga2.style.left = k+"px";
		j--; i++; k--
		globalID01 = requestAnimationFrame(tumbarCuerda);
		if(k<-50){
		cancelAnimationFrame(globalID01);
		globalID02 = requestAnimationFrame(girarAspas);
		globalID03 = requestAnimationFrame(abrirCortina);
		}
	}

	function girarAspas(){
		document.getElementById('ventilador').style.transform = "rotateY(70deg) rotate("+l+"deg)";
		globalID02 = requestAnimationFrame(girarAspas);
		l=l+20;
	}

	var widthCortina=680;

	function abrirCortina(){
		document.getElementById('cortina').style.width = widthCortina+"px";
		document.getElementById('cortina').style.left = (680-widthCortina)+570+"px";
		widthCortina--;
		globalID03 = requestAnimationFrame(abrirCortina);
		if(widthCortina<70){
			cancelAnimationFrame(globalID03);
		}
	}

	var rotacionVentana = 0;
	function abrirVentana(){
		if(sostenerLlave==true){
		var fin = new Date();
		document.getElementById('alaIzquierda').style.transform = "rotateY("+rotacionVentana+"deg)";
		document.getElementById('alaIzquierda').style.left = 627-(rotacionVentana*1.7)+"px";
		document.getElementById('alaDerecha').style.zIndex = "1";
		document.getElementById('alaDerecha').style.transform = "rotateY("+(rotacionVentana*(-1))+"deg)";
		document.getElementById('alaDerecha').style.left = 897+(rotacionVentana*1.5)+"px";
		document.getElementById('cerradura').style.display = "none";
		var globalID04 = requestAnimationFrame(abrirVentana);
		if(rotacionVentana>150){
			cancelAnimationFrame(globalID04);
			var resultado = ((fin-inicio)/1000)/60;
			setTimeout(function(){tiempoRecurrido(resultado)},3000);
			var globalID05 = requestAnimationFrame(aap);
		}
		rotacionVentana++;
		}
	}

	function tiempoRecurrido(resultado){
		bienvenida.innerHTML = '<div style="text-align: center; font-size: 40px; cursor: auto;"><img src="an_oliva_png.png"><br><a href="https://www.aprenderaprogramar.com/" style="color: orange; text-decoration: none;">aprenderaprogramar.com</a><p>Didáctica y divulgación de la programación</p><p style="color: red;">Has resuelto el misterio en: '+resultado.toFixed(2)+" minutos</p></div>";
		alaDerecha.style.display = "none";
		document.getElementById('bienvenida').style.zIndex = 2;
	}

	var escalaAap = 1;
	var topAap = 0;
	function aap(){
		aprenderaprogramar.style.transform = "scale("+escalaAap+")";
		aprenderaprogramar.style.top = (350-topAap)+"px";
		aprenderaprogramar.style.left = (750-topAap)+"px";
		escalaAap = escalaAap + 0.01;
		topAap = topAap+3;
		var globalID05 = requestAnimationFrame(aap);
	}
	</script>
</head>
<body>
	<div id="principal">
		<div id="bienvenida">
			<h1>Bienvenido a nuestro juego</h1>
			<p id="p01">Recuerda, para coger herramientas - un sólo click, para soltarlas - doble click</p>
			<p id="p02">Buena suerte</p>
			<p id="p03">¿Estas preparado?</p>
			<button onclick="quitarBienvenida()">Sí</button><br><br><br>
			<p id="p04">El navegador tienes que estar a <span>100% de zoom</span></p>
		</div>
		<img id="soga01" onmouseover="detectarCerilla()" src="http://stefjogest.com/soga201.gif"><br>
		<img  id="cuerda" src="http://stefjogest.com/palito.gif"><br>
		<img id="soga2" src="http://stefjogest.com/soga201.gif"><br>
		<div id="bola">20kg</div>
		<hr id="hr01">
		<hr id="hr02">
		<hr id="hr03">
		<hr id="hr04">
		<img id="ventilador" src="http://stefjogest.com/ventilador01.png">	
		<div id="marcoVentana">
		</div>
		
		<img id="alaIzquierda" src="http://stefjogest.com/ala_izquierda.gif">
		<img id="alaDerecha" src="http://stefjogest.com/ala_derecha.gif">	
		<img id="cerradura" onmouseover="abrirVentana()" src="http://stefjogest.com/cerradura.gif"><br>
		<img id="cortina" src="http://stefjogest.com/cortina.jpg">
		<img onclick="cogerCerilla()" src="http://stefjogest.com/cerilla-07.gif" id="cerilla">
		<img onclick="cogerLlave()" id="llave" src="http://stefjogest.com/llave.gif">
		<div id="herramientas">
			<h1>Herramientas:</h1>
		</div>
		
		<div id="aprenderaprogramar" onclick="aap()">
		<img src="http://stefjogest.com/an_oliva_png.png"><br>
		<a href="https://www.aprenderaprogramar.com/">aprenderaprogramar.com</a>
		<p>Didáctica y divulgación de la programación</p>
		</div>
	</div>
</body>
</html>

Cómo podría evitar la utilización de tantas variables globales?

Gracias

PD: Los enlaces hacía las fotos nos es una publicidad de la página, simplemente tengo este dominio contratado para hacer pruebas y pensé que es más fácil así y no colgar todas las fotos en el foro.

César Krall · « **Respuesta #1 en:** 06 de Abril 2016, 11:41 »

Hola!

Enhorabuena porque has hecho unos comentarios muy buenos y muy exhaustivos en el ejercicio 1 y un código muy bueno y muy divertido en el ejercicio 2 (al principio me costó aprender a coger las herramientas, soltarlas y llegar a resolver el misterio)

Sobre los enlaces es preferible enlazar como tú lo has hecho en lugar de estar subiendo los archivos al foro que supone más trabajo tanto para quien lo sube como para quien quiere ver el código

Sobre el uso de variables globales yo no me preocuparía ahora mucho por ello. A medida que vayas programando más, leyendo más código de otros programadores, etc. irás cogiendo experiencia que hará que cada vez seas mejor programador y que tus diseños sean cada vez mejores

Felicitaciones por tu código!

Dimitar Stefanov · « **Respuesta #2 en:** 06 de Abril 2016, 17:33 »

Buenas tardes, César.

Primero que nada, gracias por corregir y revisar el ejercicio.

No sabes lo que me alegre leer que he logrado el cometido de los ejercicios. La verdad es que el segundo ejercicio me costó bastante hacerlo funcionar. He utilizado 11 funciones en total y estaba preocupado si no fueran muchas para este tipo de ejercicios. Vamos, que seguro que se podrá llegar a la misma funcionalidad con mucho menos codigo, pero espero que sea como tú dices, que un día pueda hacer códigos mucho mejores y más limpios.

Sí, a veces las variables y todo el lenguaje JavaScript en sí son un misterio, pero poco a poco se me van aclarando las cosas. Ahora voy por el tema de los closure en JavaScript, y no veas el lío que tengo en la cabeza, jejeje.

Un saludo.

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

Noticias: