stavo provando a creare un giochino in js, praticamente al centro dello schermo c'è un omino che si muove con le freccette direzionali e sullo schermo appare un bottone io vorrei che quando l'omino tocca il bottone parta una funzione solo che sto avendo molte difficoltà
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<script type="text/javascript">
function muoviti(e)
{ var tasto = e.keyCode;
switch(tasto)
{ case 37:
var sx = parseInt(document.getElementById('XXX').style.left );
if( sx>=2)
{ sx -= 2;
document.getElementById('XXX').style.left = sx+'%'; }
break;
case 38:
var up = parseInt(document.getElementById('XXX').style.top) ;
if( up>=20)
{ up -= 2;
document.getElementById('XXX').style.top = up+'%'; }
break;
case 39:
var dx = parseInt(document.getElementById('XXX').style.left );
if( dx<=85)
{ dx += 2;
document.getElementById('XXX').style.left = dx+'%'; }
break;
case 40:
var down = parseInt(document.getElementById('XXX').style.top) ;
if( down <= 75)
{ down += 2;
document.getElementById('XXX').style.top = down+'%'; }
break;
}
A=parseInt(document.getElementById('XXX').style.to p);
B=parseInt(document.getElementById('1').style.top) ;
C=parseInt(document.getElementById('XXX').style.le ft);
D=parseInt(document.getElementById('1').style.left );
if( (A<B) && (A+10>B) && (C<D) && (C+10>D) )
{
document.getElementById('XXX').setAttribute('src', '../../images/wally2.png');
//setTimeout('Errore();', 1000);
}
}
</script>
<script>
function Z()
{ Livello=17;
Lim_gio=4
URL_in="../..";
URL_fn="giuoco.html";
Livello=Livello+1;
Gioco=Math.round(Math.random()*Lim_gio)+1;
Dest = URL_in+"/"+Livello+"/"+Gioco+"/"+URL_fn;
location.href=Dest;
}
function Errore()
{ location.href = "../fail.html"; }
</script>
<style type="text/css">
body { background-image: url("../../backgrounds/bg.png"); }
a:hover{cursor:default;}
</style>
</head>
<body onkeydown="muoviti(event);">
<center>
<div id="title1" Style="background-image: url(../../backgrounds/div.jpg); -moz-border-radius-topleft: 9px; -webkit-border-radius: 9px; border: 0; padding: 4px; width: 30%; height: 15%; font-family: verdana;">
<font clor="#2e2e2e" size="6">
<span style="font-size: 80%;"> Muovi Wally cliccando le frecce per salvarlo! </span> [img]../../images/freccette.png[/img]
</font>
</div>
</center>
[img]../../images/wally.png[/img]
[img]../../buttons/1.png[/img]
</body>
</html>
l'unico modo che mi è venuto in mente per capire se le immagini si trovano una sopra l'altra è stato questo:
A=parseInt(document.getElementById('XXX').style.to p);
B=parseInt(document.getElementById('1').style.top) ;
C=parseInt(document.getElementById('XXX').style.le ft);
D=parseInt(document.getElementById('1').style.left );
if( (A<B) && (A+10>B) && (C<D) && (C+10>D) )
{
document.getElementById('XXX').setAttribute('src', '../../images/wally2.png');
//setTimeout('Errore();', 1000);
}
anche se non funziona proprio bene e non mi sembra molto elegnte, spero che qualcuno riesca ad aiutarmi
Rispondi quotando
