Hola. Dejo los ejercicios del tema CU01166E del curso gratuito de programación JavaScript.
Efectos JavaScript visuales, imagen, texto. Recursión. setTimeOut no funciona en bucles for o while.
EJERCICIO 1Realiza 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 …
<!DOCTYPE html> .Sirve para indicar qué estándar de HTML es el que declaramos usar
<html> Define que se trata de código html
<head> Cabecera del documento html
<title>Cursos aprende a programar</title> Titulo que aparecerá en la barra de titulo del navegador
meta : Sirven para informar de características de la página web, como una descripción breve y sus palabras clave. Define los meta datos que no pueden ser definidos usando otro elemento HTML.
charset : Tipo de codificación de caracteres utilizada en este caso utf-8
name : Identificador
content: Descripción del contenido
style: elemento encargado de indicar la información de estilo de hoja de estilo
type : Indica el lenguaje de hojas de estilo usado. En este caso text/css
El * es el selector universal para toda la pagina
font-family : verdana , sans-serif : familia de la fuente de letra verdana sans-serif para toda la pagina
#principal : # Selector de ID principal. En este caso un DIV
text-align:center – Alineación de texto centrada en el div
width:95% – tamaño del div 95% de la pagina.
margin : 0 auto – Todos los margenes a cero y el centrado horizontal automático.
.tituloCurso: . Selector de CLASS tituloCurso, En este caso 10 DIV.
color: white – color del texto blanco.
float: left – Posicionamiento flotante de los elementos a la izquierda.
font-size : 2.65em – tamaño de la fuente relativo al tamaño de la letra
font-style:bold – estilo de la fuente negrita
text-decoration:none – texto sin subrayado superior, inferior y sin tachado.
a:hover – cuando el puntero del ratón este encima de la etiqueta a
color: orange ¡important – color del texto naranja se tendrá en cuenta antes que otras reglas del mismo tipo para esta etiqueta.
</style> fin de la hoja de estilos.
<script type="text/javascript"> Inicio del script de java.
function ejemplo() Funcion de nombre ejemplo
{
var nodosTituloCurso = document.querySelectorAll(".tituloCurso"); -- Variable donde se seleccionan todos los elementos class tituloCurso del documento.
var contador = 0 ; – variable que se utilizar de contador se inicia a cero.
var nodosCambiados = new Array(); se crea un nuevo array en la variable nodosCambiados
var tocaCambiar = true; – se crea una variable booleana
setTimeout – Funcion para ejecutar pasado un cierto intervalo de tiempo
(function(){ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar)}, 1500);
Se ejecutara la funcion ejemploAccion pasados 1500 milisegundos.
A esta funcion se le pasan los parametros nodosTituloCurso, nodosCambiados, contador, tocaCambiar.
function ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar) {
Funcion llamada con la funcion setTimeout de la cual recibe los parametros nodosTituloCurso, nodosCambiados, contador, tocaCambiar
if (contador<nodosTituloCurso.length){ Si la variable contador es menor que la longitud de nodosTituloCurso entrar y ejecutar
var indice = Math.floor((Math.random() * (nodosTituloCurso.length)));
Creacion de la variable indice con el valor redondeado al entero superior del calculo aleatorio por la longitud de nodosTituloCurso.
if (nodosCambiados.length!=0) { Si la longitud de nodosCambiados no es igual a cero ejecutar
for (var i=0; i<nodosCambiados.length; i++) { repetir mientras i sea menor que la longitud de nodosCambiados.
if(nodosCambiados[i]==indice) {tocaCambiar = false;} si nodosCambiados[i]==indice hacer que la variable tocaCambiar sea falsa
if (tocaCambiar==true) { si tocaCambiar = verdadero ejecutar
cambiarNodo(nodosTituloCurso[indice]); se invoca la funcion cambiarNodo y se le pasa el parametro nodosTituloCurso[indice] con el valor de indice
nodosCambiados.push(indice); se pone en nodos cambiados el valor de indice
contador = contador+1; se incrementa el valor contador mas uno
setTimeout(function() {ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar)}, 1500);
Se llama la funcion de forma recursiva con la funcion setTimeout pasados 15000 milisegundos pasandose los parametros nodosTituloCurso, nodosCambiados, contador, tocaCambiar con los nuevos valores.
Si la condicion del if tocaCambiar es falsa ejecutar
else {tocaCambiar=true; Se cambia el valor de tocaCambiar a verdadero
ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar); se llama de nuevo a la funcion ejemploAccion con los nuevos valores de los parametros.
Este else se complementa con el primer if de la funcion y es para el fin de la recursion
else { //Caso base fin de la recursión
document.body.style.backgroundColor='black'; Color del fondo negro
document.getElementById('principal').style.color='white'; color del texto del ID principal blanco
for (var i=0; i<nodosTituloCurso.length; i++) repetir mientras i sea menor que la longitud de nodosTitulosCurso.
nodosTituloCurso[i].style.color='yellow'; Color del texto para nodosTitulosCurso[n] amarillo
Cuando se invoca esta funcion se le pasa el parametro de elNodo y al ejecutarse la funcion cambia el color del fondo de nodo a negro
function cambiarNodo(elNodo){elNodo.style.backgroundColor = 'black'; }
</script> fin del script de java
</head> fin de la cabecera del documento html
<body onload="ejemplo()"> cuerpo del documento html al cargar se llama a la funcion ejemplo() del script de java.
<div id="principal"> div de id principal el cual contiene todos los demas div dentro del cuerpo del documento
<h1>Cursos de programación</h1> h1 a h6 tamaño del texto de las cabeceras del documento
<h3>Reconocidos por su calidad didáctica</h3>
<div > divs secundarios contenidos en el div principal que a su vez contienen llamadas a otras paginas.
<a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59"> Fundamentos</a>
etiqueta <a> hiperenlace a otra pagina a todas las etiquetas se les asigna la clase tituloCurso
href: indica la url del recurso que se quiere enlazar.
</div> fin de etiqueta div
</body> fin del cuerpo del documento.
</html> fin del documento.
EJERCICIO 2Crea 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.
He buscado en los ejercicios de CSS HTML y JAVASCRIPT de aprenderaprogramar.com y me ha salido esto.
Espero que este todo correcto
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Juego de Frontenis</title>
<script type="text/javascript">
var controlY=Math.floor((Math.random() * 1) + 0);// controlY, determina dirección vertical: 1-baja|0-sube
var controlX=Math.floor((Math.random() * 1) + 0); // controlX, determina dirección vertical: 1-derecha|0-izquierda
var x=y=0;// definimos las variables que contienen la posicion de la pelota
var velocidad=5;// definimos la velocidad de movimiento en pixels debe de estar de cinco para arriba
var idSetInterval=0;// variable que contiene el intervalo de tiempo
var puntos;
//Capturar movimiento del puntero del raton
document.addEventListener("mousemove", mouseMoveHandler, false);//Capturar movimiento del raton
var msg="";
msg=msg+"Juego de frontenis que consiste en devolver la pelota al fronton.\n";
msg=msg+"Cada vez que se devuelve la pelota se suman 2 puntos,si pasa la bola se restan 5 puntos\n";
msg=msg+"Cuando llega la puntuacion a 20, 40, 80 se suma uno a la velocidad llegando a 8.";
msg=msg+"\nSi se llega a 100 puntos o se superan, la velocidad es de 9.";
msg=msg+"\n\n\nEL RETO ES LLEGAR A 100 PUNTOS O SUPERARLOS"
alert(msg)
// al cargar la pagina iniciar variables y elementos DOM
window.onload=function()
{
//Coger elementos DOM
fronton=document.getElementById("pizarra");
paleta=document.getElementById("paleta");
bola=document.getElementById("bola");
// posicionar la pelota de manera aleatoria en la pantalla
y=Math.floor((Math.random() * (fronton.offsetHeight-22)) + 1);
x=Math.floor((Math.random() * (fronton.offsetWidth-22)) + 1);
bola.style.left=String(x)+"px";
bola.style.top=String(y)+"px";
// coger posicion de la paleta
posPaletaX=fronton.offsetHeight-20; //Posicion vertical de la paleta
posPaletaY=(fronton.offsetWidth-(paleta.offsetWidth/2)); //Posicion horizontal de la paleta
//Posicionar paleta en pantalla
paleta.style.top=posPaletaX+"px";
paleta.style.left=posPaletaY+"px";
marcador.innerHTML="000"
}
function mouseMoveHandler(e)
{
// Mover la paleta con el raton
relativeY = e.clientX - fronton.offsetLeft;// Posicion horizontal del puntero del raton
if(relativeY > 0 && relativeY < (fronton.offsetWidth-paleta.offsetWidth))
{
posPaletaY = (relativeY+344); ;
paleta.style.left=posPaletaY+"px";
}
}
// Iniciar movimiento de la bola al pulsar el boton
function iniciar()
{
puntos=0;
if(idSetInterval==0)
{
idSetInterval=setInterval("mover()",10);
}
}
// funcion que se ejecuta por cada iteracion del setInterval()
function mover()
{
// movimiento vertical de la bola
if(controlY==1)
{
y+=velocidad;
}else{
y-=velocidad;
}
if(y<0)
{
controlY=1;
y=velocidad;
}else if(y>=fronton.offsetHeight-22){
controlY=0;
y=fronton.offsetHeight-22;
puntos-=5;
alert("Paso la Bola")
}
// movimiento horizontal de la bola
if(controlX==1)
{
x+=velocidad;
}else{
x-=velocidad;
}
if(x<0)
{
controlX=1;
x=velocidad;
}else if(x>=fronton.offsetWidth-22){
controlX=0;
x=fronton.offsetWidth-22;
}
bola.style.left=String(x)+"px";
bola.style.top=String(y)+"px";
// Coger posiciones de la pelota y la paleta
posBolaX = bola.offsetTop; //posicion vertical actual de la bola
posBolaY =bola.offsetLeft; //posicion horizontal actual de la bola
posPaletaColisionX=paleta.offsetTop-21; //posicion vertical de la paleta -valor higth - valor borde
posPaletaColisionY=paleta.offsetLeft; //posicion horizontal actual de la paleta
//Controlar colision vertical
if ( posBolaY<=posPaletaColisionY || posBolaY>=posPaletaColisionY+115)
{
var boolColisionV=false
}
else{boolColisionV=true ;}
//Controlar colision Horizontal
if ( posBolaX<=posPaletaColisionX )
{
var boolColisionH=false
}
else{boolColisionH=true ;}
if (boolColisionV && boolColisionH)
{
controlY=0;
y=fronton.offsetHeight-42;
y-=velocidad;
puntos+=2
}
//Mostrar puntos en pantalla
if(puntos<10){var msgPuntos="00"+puntos;}
if(puntos>=10 && puntos<=99){var msgPuntos="0"+puntos;}
if(puntos>99){var msgPuntos=puntos;}
// Aumentar velocidad de la bola al llegar a 20,40,80 y 100
if (puntos<20){velocidad=5}
if (puntos>=20 && puntos<=40){velocidad=6}
if (puntos>40 && puntos<=80){velocidad=7}
if (puntos>80 && puntos<=100){velocidad=8}
if (puntos>100){velocidad=9;}
if (puntos>1 && puntos%100==0)
{
alert(" !!!!! BIEN JUGADO ¡¡¡¡¡\n !!! HAS SUPERADO EL RETO ¡¡¡\n DIBUJA UNA MEDALLA Y TE LA PONES\n TE LA MERECES")
boolBien=false;
puntos=puntos+2
}
marcador.innerHTML=msgPuntos;
}
// Al pulsar el boton parar, se para la bola
function parar()
{
clearInterval(idSetInterval);
idSetInterval=0;
}
</script>
<style>
#paleta{
position: absolute;
border:groove red 2px;
border-radius:25px 25px;
background-color:yellow;
width:150px;
height:15px;
}
body{
background-color:yellow;
}
h1 {
width:1350px;
text-align:center;
float:left;
margin:0;
padding:0;
}
input {
margin-top:10px auto;
padding:0;
float:left;
}
#iniciar{
width:80px;
margin-left:585px;
}
#parar{
width:80px;
margin-left:10px;
}
#bola {
border:2px green solid ;
background-color:orange;
border-radius:15px;
position:relative;
display:block;
height:20px;
width:20px;
}
#pizarra
{
width:675px;
height:500px;
border:groove red 2px;
border-radius:25px 25px;
overflow: hidden;
background-color:black;
color:white;
margin-left:335px;
}
@charset "utf-8";
#marcador {
font-weight: bold;
font-size: 50px;
font-family: "Arial";
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
color: black;
text-align:center;
float:left;
}
</style>
</head>
<body>
<div id="marcador"></div>
<div >
<div id="pizarra">
<div id="bola"></div>
<div id="paleta"></div>
</div>
<div>
<h1>Frontenis</h1>
<input type="button" value="Iniciar juego" id="iniciar" onclick="iniciar();"/>
<input type="button" value="Parar juego" id="parar" onclick="parar();"/>
</div>
</div>
</body>
</html>
Gracias.
Un saludo.
Tema: Crear un juego Efectos JavaScript visuales, imagen, texto. Recursión CU01166E# (Leído 1819 veces)
RSS -
WAP2