...

View Full Version : i never thought trying to get a box to bounce off all four walls



mhunt
01-05-2007, 12:31 AM
would be so difficult in javascript, coming from actionscript i thought it would be simple but im tearing my hair out over it/
anyone wanna help me?
here is what i have so far


var timer
function moveit() {
var d = document.getElementById("mover").style;
d.left = parseInt(d.left) + 5 + "px";
d.top = parseInt(d.top) + 5 + "px";
store = parseInt(d.left);
store2 = parseInt(d.top);
if(store < 500 && store2 < 500){
setTimeout("moveit()",10);
}
if(store >= 500 && store2 >= 500){
moveback();
}
}
setTimeout("moveit()",10);
function moveback() {
var a = document.getElementById("mover").style;
a.left = parseInt(a.left) - 5 +"px";
a.top = parseInt(a.top) - 5 +"px";
stor = parseInt(a.left);
stor2 = parseInt(a.top);
if(stor <= 25 || stor2 <= 25) {
moveit();
} else {
setTimeout("moveback()",10);
}
}

rubenbuhr
01-05-2007, 01:56 AM
Here s a project I dug out of my hard drive. I wrote it a couple years ago for IE
I'll look at your script now...


<HTML>
<HEAD><TITLE>Bounced</TITLE>

<STYLE>
#box{background-color:#FFFF99;color:#FFFFAA;padding:10px;font-family:arial;font-size:14px;
border:0px dashed black;position:absolute;top:100px;left:100px;}
#ball {background-color:#000000;z-index:-1;
border:0px solid black;position:absolute;top:1px;left:1px;}
</STYLE>

</HEAD>
<BODY>
<div id="box">Bounced <br>Containing DIV can be positioned anywhere in the window. Change the size of the 'ball' or add an image or background
<div id="ball"></div></div>
<button onclick="gostop()">go/stop</button>

<SCRIPT TYPE="TEXT/JAVASCRIPT">

//Change DIV sizes in these variables

var boxw=box.style.width=250;boxh=box.style.height=110;
var ballw=ball.style.width=150;ballh=ball.style.height=90;
var x=1;var y=1;var T = 50;var Tt = 60;

function gorite(){
if(x==1 && ball.style.pixelLeft < boxw-ballw ){ball.style.pixelLeft+=1;
rite = setTimeout("gorite()",T);}
else {x=2;if(x==2 && ball.style.pixelLeft >= 0 ){ball.style.pixelLeft-=1;
rite = setTimeout("gorite()",Tt);}
else {x=1;gorite();}}}

function goso(){
if(y==1 && ball.style.pixelTop < boxh-ballh){ball.style.pixelTop+=1;
gos=setTimeout("goso()",Tt);}
else {y=2;if(y==2 && ball.style.pixelTop >= 0 ){ball.style.pixelTop-=1;
gos=setTimeout("goso()",T);}
else {y=1;goso();}}}

var gs=1;
function gostop(){
if (gs==1){gorite();goso();gs=0;}
else{clearTimeout(rite);clearTimeout(gos);gs=1;}
}

</SCRIPT>
</BODY>
</HTML>

felgall
01-05-2007, 01:58 AM
With

d.left = parseInt(d.left) + 5 + "px";

since one of the fields is a string they will all be converted to strings and then concatenated. Try this instead:

d.left = (parseInt(d.left) + 5) + "px";

jkd
01-05-2007, 10:33 PM
With

d.left = parseInt(d.left) + 5 + "px";

since one of the fields is a string they will all be converted to strings and then concatenated. Try this instead:

d.left = (parseInt(d.left) + 5) + "px";


That's not true. Addition is evaluated left to right, so in 5+1+"px", the interpretter sees 5+1, which is 6, then + "px", which evaluates to "6px".



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum