Reboteer javascript

Esta rutina nos muestra como hacer rebotar distintas imágenes dentro de una zona delimitada.

Código Javascript


<html>
<head><title>Taller JS: RebotEr</title>
<SCRIPT languaje="javascript1.2">
<!--
/**************************
  RebotEr vs.0.2
  Guillermo BT - May1999
  http://netmania.cjb.net
  Utiliza HTML Dinamico
  Netscape y Explorer 4.x+
***************************/
/*
--------------------------------------------------------------------
  TAMANIOS Imagenes: se necesitan para que las "imagenes rebotantes"
  al llegar a los bordes NO se salgan de la imagen de fondo
   AyA(ancho,alto)
--------------------------------------------------------------------
*/
var n=new Array();
n[0]=new AyA(50,50);
n[1]=new AyA(50,50);
n[2]=new AyA(50,50);
n[3]=new AyA(50,50);
n[4]=new AyA(50,50);
/*
----------------------------------------------
 Definir DIMENSIONES del recinto donde REBOTAN 
 xMin==LEFT 
 yMin==TOP  
 xMax==LEFT + WIDTH foto de fondo
 yMax==TOP + HEIGHT foto de fondo
----------------------------------------------
*/
var xMin= 20;
var yMin= 20;
var xMax=xMin + 740;
var yMax=yMin + 388; 
/*
----------------------------------------
 Velocidad de movimiento de los objetos:
----------------------------------------
*/
//Incrementos para Eje Y: valores REALES
var incY= new Array(); 
incY[0]= 8.5;
incY[1]= 0.0;
incY[2]= 5.0;
incY[3]= 7.3;
incY[4]= 12.3;
//Incrementos para Eje X: valores ENTEROS
var incX= new Array(); 
incX[0]= 8;
incX[1]= 5;
incX[2]= 9;
incX[3]= 12;
incX[4]= 0;
/*
-----------------------------------------
 Como se mueve cada objeto inicialmente?:
-----------------------------------------
*/
var abde=new Array(); //Hacia: abajo-derecha
var abiz=new Array(); //Hacia: abajo-izquierda
var arde=new Array(); //Hacia: arriba-derecha
var ariz=new Array(); //Hacia: arriba-izquierda
//----------------------------------------
//solo UNO de cada cuarteto puede ser TRUE
//     (un cuarteto para cada foto)
//abde -> comenzar en sentido: ABajo DErecha
//abiz -> comenzar en sentido: ABajo IZquierda
//arde -> comenzar en sentido: ARrriba DErecha
//ariz -> comenzar en sentido: ARrriba IZquierda
//----------------------------------------
for (var r=0; r<= n.length; r++) {
  abde[r]= false;
  abiz[r]= false;
  arde[r]= false;
  ariz[r]= false;
}
//Si ANIADIMOS/QUITAMOS fotos, MODIFICAR AQUI:
abde[0]=true;
ariz[1]=true;
ariz[2]=true;
abiz[3]=true;
abiz[4]=true;

var NN4 = (document.layers)?true:false;
var IE4 = (document.all)?true:false;
lyr= new Array();
function Inicializa () {
  if (NN4){ //Netscape
  //Guardamos los objetos (fotos) en un Array
  //para poder manejarlos todos genericamente
  //Si ANIADIMOS/QUITAMOS fotos, MODIFICAR AQUI:
    lyr[0]= document.n1;  
    lyr[1]= document.n2;
    lyr[2]= document.n3;
    lyr[3]= document.n4;
    lyr[4]= document.n5;
    mostrarSi= 'show';
    mostrarNo= 'hide';
  }
  if (IE4){ //Explorer
  //Si ANIADIMOS/QUITAMOS fotos, MODIFICAR AQUI:
    lyr[0]= n1.style;
    lyr[1]= n2.style;
    lyr[2]= n3.style;
    lyr[3]= n4.style;
    lyr[4]= n5.style;
    mostrarSi= 'visible';
    mostrarNo= 'hidden';
  }
}	

function MoverRel (objeto,a,b) {
//Posicion (x,y) del objeto en cuestion
//Referido a la esquina superior izqda.
  objeto.left = parseInt(objeto.left) + a;
  objeto.top  = parseInt(objeto.top) + b;
  //status= "(x,y)= ("+objeto.left+", "+objeto.top+")";
}

function mueve() {
  Inicializa();
  //Para cada "foto rebotante" hacer:
  for (i=0; i<lyr.length; i++) {
    //BAJANDO: HACIA LA IZQUIERDA
    if (abiz[i]==true) {
      lyr[i].visibility= mostrarSi;
      MoverRel(lyr[i],-incX[i],incY[i]);
        
      if (parseInt(lyr[i].left)<xMin)          {abiz[i]=false; abde[i]=true; }
      if (parseInt(lyr[i].top)+n[i].alto>yMax) {abiz[i]=false; ariz[i]=true; }
    }
    //BAJANDO: HACIA LA DERECHA
    if (abde[i]==true) {
      lyr[i].visibility= mostrarSi;
      MoverRel(lyr[i],incX[i],incY[i]);
     
      if (parseInt(lyr[i].left)>xMax-n[i].ancho) {abde[i]=false; abiz[i]=true; }
      if (parseInt(lyr[i].top)+n[i].alto>yMax)   {abde[i]=false; arde[i]=true; }
    }
    //SUBIENDO: HACIA LA DERECHA
    if (arde[i]==true) {
      lyr[i].visibility= mostrarSi;
      MoverRel(lyr[i],incX[i],-incY[i]);
      if (parseInt(lyr[i].left)>xMax-n[i].ancho) {arde[i]=false; ariz[i]=true; }
      if (parseInt(lyr[i].top)<yMin)             {arde[i]=false; abde[i]=true; }
    }
    //SUBIENDO: HACIA LA IZQUIERDA
    if (ariz[i]==true) {
      lyr[i].visibility= mostrarSi;
      MoverRel(lyr[i],-incX[i],-incY[i]);
      if (parseInt(lyr[i].left)<xMin) {ariz[i]=false; arde[i]=true; }
      if (parseInt(lyr[i].top)<yMin)  {ariz[i]=false; abiz[i]=true; }
    }
  }
  setTimeout ("mueve()",20);  
}
function AyA (ancho, alto) {
  this.alto= alto;
  this.ancho=ancho;
  return this
}

// -->
</SCRIPT>
</head>
<body bgcolor=white onload="mueve();">
<!-- ESTA ES LA IMAGEN DE FONDO -->
<div id="fondo" style="position:absolute; left:20; top:20; visibility:show">
<img src="ejemplos/fondo.gif" width=740 height=388>
</div>
<!-- <img WIDTH=499 HEIGHT=335 src=acueduc.gif> -->
<!-- CARGAR AQUI LAS IMAGENES REBOTANTES QUE QUERAMOS -->
<div id="n1"  style="position:absolute; left:123; top:120; visibility:hide">
<img src="ejemplos/red.gif">
</div>
<div id="n2"  style="position:absolute; left:50; top:254; visibility:hide">
<img src="ejemplos/yellow.gif">
</div>
<div id="n3"  style="position:absolute; left:283; top:180; visibility:hide">
<img src="ejemplos/green.gif">
</div>
<div id="n4"  style="position:absolute; left:283; top:180; visibility:hide">
<img src="ejemplos/blue.gif">
</div>
<div id="n5"  style="position:absolute; left:643; top:250; visibility:hide">
<img src="ejemplos/red.gif">
</div>
</body>
</html>
Ver ejemplo Javascript en funcionamiento