Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy Help bouncing ball user input javascript

    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">
    <!--
    var myBall = document.getElementById("ball");
    var loc = 200;
    var ani = 10;
    var direction = 0;
    var int = 50;
    var wxh = 30;
    setInterval("myFunction()", int);

    function myFunction(){

    if(0 == direction)
    {
    /* move down */
    loc += ani;

    if(loc >= 500)
    {
    /* reached lower limit, change direction */
    direction = 1;
    }
    }
    else
    {
    /* move up */
    loc -= ani;

    if(loc < 10)
    {
    /* reached upper limit, change direction */
    direction = 0;
    }
    }

    myBall.style.top = loc;
    }
    // -->
    </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&amp;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>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    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 <!-- and //--> 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

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,275
    Thanks
    10
    Thanked 581 Times in 562 Posts
    speak of the devil.
    here's a version 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...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by rnd me View Post
    speak of the devil.
    here's a version 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. Soulcode's son can hardly submit that as his own project work!

  • Users who have thanked Philip M for this post:

    soulcode (12-03-2009)

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by soulcode View Post
    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!

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,275
    Thanks
    10
    Thanked 581 Times in 562 Posts
    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:
    Code:
    window.clearTimeout(tim);
    tim = window.setInterval(myFunction, int);
    should be a bit faster than
    Code:
     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...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    soulcode (12-03-2009)

  • #8
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up Resolved... Thank you philip & rnd me(??)

    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...


  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •