Help bouncing ball user input javascript

soulcode

12-02-2009, 03:18 AM

Spent past few days helping my son for his project of manipulating bouncing ball. Please help me this script work. Once user inputs the new ani value, the ball goes out. I want user to set any value ani, int and size of the ball to achieve desired animation. Seriously urgent... Thanks!

<HTML>
<HEAD>
</HEAD>
<BODY>

<IMG ID="ball" STYLE="position: absolute; left: 325; top: 200; width: 30; height: 30;" SRC="images/ball1.gif">

<SCRIPT LANGUAGE="JavaScript">
function showAlert() {
alert('ANI=' + ani + ', INT=' + int + ', SIZE=' + wxh + '');
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.2">
function readText (form) {
if(form.f_ani.value != ""){
ani = form.f_ani.value ;

myBall = document.getElementById("ball");
loc = 200;
direction = 0;
int = 50;
setInterval("myFunction()", int);

myFunction();
}
showAlert();
}
</SCRIPT>

<FORM action="" method="Get">

Ball Movement (10 pixels):<input type='text' NAME="f_ani" value="10" size="20"><br>
Interval (200 milliseconds):<INPUT type="text" id="f_int" value="200" size="20" name="1"><br>
Ball Size (10 pixels W&H):<INPUT type="text" id="f_size" value="30" size="20" name="2"><br>
<input type='button' value='Send' onclick="readText(this.form)"> <INPUT type="reset">

</FORM>
</BODY>
</HTML>

Philip M

12-02-2009, 07:41 AM

Your problem is that as input ani is a string and the + sign concatenates rather than adds. So we need to make ani a number.

Change this:-

loc += ani;
to
loc = loc + ani*1;

and

loc -= ani;
to
loc = loc -ani*1;

<script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead.
The  comment (hiding) tags have not been necessary since IE3. If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

“I don't pretend we have all the answers. But the questions are certainly worth thinking about..” - Arthur C. Clarke quotes (English Writer of science fiction, b.1917

rnd me

12-02-2009, 08:01 AM

Philip M

12-02-2009, 08:26 AM

speak of the devil.
here's a version (http://danml.com/balls/) of the same kinda thing i made last weekend. i thought it might be of interest.
you can use it for reference; it's got some nice "ball" css...

C'est magnifique, mais ce n'est pas la guerre. :D Soulcode's son can hardly submit that as his own project work! ;)

soulcode

12-02-2009, 01:24 PM

Thank you very much Philip for your help and suggestions,
I changed,

loc += ani;
to
loc = loc + ani*1;

and

loc -= ani;
to
loc = loc -ani*1;

Ball stays inside now... But everytime we hit the send button from form the speed of ball is increased, even with the same value "10".

And also any hint on changing INT and SIZE values from form field?

rnd me, Thank you too for being concerned. That is a real nice script you made there. It's cool especially with user customization. But i my just be able to use it as reference to his senior college project. hehe!!

any hint on above issue and changing INT and SIZE values from form field will be appreciated.

Philip M

12-02-2009, 01:48 PM

Ball stays inside now... But everytime we hit the send button from form the speed of ball is increased, even with the same value "10".

That is because you repeatedly trigger
setInterval("myFunction()", int); starting another cycle.

Clear the setInterval before you trigger another one. Declare a variable tim and then:

window.clearTimeout(tim);
tim = window.setInterval("myFunction()", int);

You should change the interval and ball size variables in your readText() function in the same way as you change the value of ani.

Note: we will gladly assist with homeowrk but we will not do it for you!

rnd me

12-02-2009, 07:16 PM

mines actually not a whole lot more code; i wrote the core in about an hour, and added frills the next day...

i was hoping it would demo setInterval handling, and how to convert inputs to numbers, but i forgot i used selectedIndex mostly...

anyway, a few random observations that might help (to reiterate):

-Number("123") will convert input's string value.
-clearing the interval will stop the ball.
-adding more intervals will speed up your ball.
-if you set more than one interval, you need to clear all of them to stop the ball.

a small performance tip:
window.clearTimeout(tim);
tim = window.setInterval(myFunction, int);
should be a bit faster than
window.clearTimeout(tim);
tim = window.setInterval("myFunction()", int);
with the quotes, the string has to be evaluated each fireing, whereas passing just the function name bind it correctly the first time out...

soulcode

12-03-2009, 06:33 AM

This was my first post in this forum.. and forum was extraordinarily helpful. Especially Philip and "Rnd Me" for my son's animation project. He is done with the project with user interaction in java script (EXTRA CREDIT). By the way.. the reason my son asked me for help was.. i am in programming too... may not be compatible with new versions... but logic and mood always get it right, Thank you very much for your help. I will try my best to help other here too with my knowledge. Never thought forums could be this helpful... Thanks guys... keep up the good job...

About the name RND ME(??) ( it could be some core command... or may be not...) Common man!! what's up with the name?? only thing i can remember "REND" is in WoW.... I don't know.... but your name sounds like Like you have resistance against "REND". You know.. bring it on...!! "REND MEE!!!!" hehe

Thank you guys.. It's been solved with your help... i hope i can be same to others here...
:thumbsup: