Problema movimiento aleatorio javascript.

Rubendevid · #1 (**permalink**) 19/01/2010, 19:15

Tengo un problema y esque tengo un código con un movimiento aleatorio con un texto que se mueve por toda la pantalla, pero ahora quiero que se mueva dentro de un <div> y que no salga de ahí. Me han dicho que falta un if. Aquí dejo el código por si alguien lo quiere probar, funciona todo, solamente necesito que me digan como se hace para que no pase del <div> creado. Aqui el codigo:

<html>
<head>
<script language="javascript">
function moure_dalt(ID_objecte) {
var objecte_moure = document.getElementById(ID_objecte);
objecte_moure.style.top = parseInt(objecte_moure.style.top) + 10;

}

function moure(){
var aleatori;
aleatori = Math.floor (Math.random()*4)+1;

if (aleatori==1) {
moure_dalt('objecte');
}

if (aleatori==2) {
moure_dreta('objecte');
}

if (aleatori==3) {
moure_arriba('objecte');
}

if (aleatori==4) {
moure_esquerra('objecte');
}
window.setTimeout("moure()",1);

}
function moure_dreta(ID_objecte) {
var objecte2_moure = document.getElementById(ID_objecte);
objecte2_moure.style.left = parseInt(objecte2_moure.style.left) + 10;
}

function moure_arriba(ID_objecte) {
var objecte3_moure = document.getElementById(ID_objecte);
objecte3_moure.style.top = parseInt(objecte3_moure.style.top) - 10;
}

function moure_esquerra(ID_objecte) {
var objecte4_moure = document.getElementById(ID_objecte);
objecte4_moure.style.left = parseInt(objecte4_moure.style.left) - 10;
}

</script>
</head>
<body onLoad="moure()">
<div id="objecte" style="position: absolute; left:50px; top:200px; background-color: #cccccc;">El meu objecte</div>
<div id="cuerpo" style="width:100%; height:100%; background-color: #F5F5DC; border:1px solid #CCCCCC;margin-bottom:10px;"></div>
</body>
</html>

quimfv · #2 (**permalink**) 20/01/2010, 07:55

Código HTML:

Ver original<html>
<head>
<script language="javascript">
function moure_dalt(ID_objecte) {
var objecte_moure = document.getElementById(ID_objecte);
if (parseInt(objecte_moure.style.top) + 10>90){
objecte_moure.style.top = 90;
}else{
objecte_moure.style.top = parseInt(objecte_moure.style.top) + 10;
}
}
 
function moure(){
var aleatori;
aleatori = Math.floor (Math.random()*4)+1;
 
if (aleatori==1) {
moure_dalt('objecte');
}
 
if (aleatori==2) {
moure_dreta('objecte');
}
 
if (aleatori==3) {
moure_arriba('objecte');
}
 
if (aleatori==4) {
moure_esquerra('objecte');
}
window.setTimeout("moure()",1);
 
 
}
function moure_dreta(ID_objecte) {
var objecte2_moure = document.getElementById(ID_objecte);
if (parseInt(objecte2_moure.style.left) + 10>90){
objecte2_moure.style.left = 90;
}else{
objecte2_moure.style.left = parseInt(objecte2_moure.style.left) + 10;
}
}
 
 
function moure_arriba(ID_objecte) {
var objecte3_moure = document.getElementById(ID_objecte);
if (parseInt(objecte3_moure.style.top) - 10<0){
objecte3_moure.style.top = 0;
}else{
objecte3_moure.style.top = parseInt(objecte3_moure.style.top) - 10;
}
}
 
function moure_esquerra(ID_objecte) {
var objecte4_moure = document.getElementById(ID_objecte);
if (parseInt(objecte4_moure.style.left) - 10<0){
objecte4_moure.style.left = 0;
}else{
objecte4_moure.style.left = parseInt(objecte4_moure.style.left) - 10;
}
}
 
 
 
 
</script>
</head>
<body onLoad="moure()">
<br>
<br>
<br>
<br>
<div id="cuerpo" style="width:100px; height:100px; background-color: #F5F5DC; border:1px solid #CCCCCC;margin-bottom:10px;z-index:0">
<div id="objecte" style="position: relative; width:10px; height:10px; left:0px; top:0px; background-color: #cccccc; z-index:1">&nbsp;</div>
</div>
</body>
</html>

Analiza lo que he hecho, no es una solución general depende de la medida del div contenedor y del objeto flotante.

Quim

(Sembla una mosca collonera)