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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts

    i never thought trying to get a box to bounce off all four walls

    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

    Code:
    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);
    	}
    }

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    107
    Thanks
    3
    Thanked 5 Times in 5 Posts
    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...

    PHP Code:
    <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 windowChange 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 50;var Tt 60;

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

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

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    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";
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by felgall View Post
    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".


  •  

    Posting Permissions

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