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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post

    Thumbs up Random JS Animation

    Hello,

    I am trying to make a <div> follow a random path -- it is supposed to be a random path that a person will walk within a 600x600 grid.

    Once I create one then I hope to create 5-10 different "people" walking randomly at different acceleration speeds throughout this div.

    But for now I am trying to figure out how to make one div/person walk in a random path across the div. I managed to animate the div from right to left.. and i added in a random function but I am unsure how to proceed from here.

    Any advice?

    Code:
    <html>
    <head>
    <style type="text/css">
    
    body {
     font:76% normal verdana,arial,tahoma;
    }
    
    h1, h2 {
     font-size:1em;
    }
    
    #moveMe {
     /* simple box */
     position:absolute;
     left:0px;
     top:8em;
     width:5em;
     line-height:3em;
     background:#99ccff;
     border:1px solid #003366;
     white-space:nowrap;
     padding:0.5em;
    }
    
    </style>
    <script type="text/javascript">
    
    var moveDiv = null; // object
    var maxXaxis = '600px';
    function doMove() {
    	// alert(moveDiv.style.left);
    	if (moveDiv.style.left != maxXaxis) {
    
    		// var randomnumber=Math.floor(Math.random()*11) // random number between 1 and 10
    	     	moveDiv.style.left = parseInt(moveDiv.style.left)+1+'px'; // pseudo-property code: Move right by 1px
         		setTimeout(doMove,20); // call doMove in 20msec
    	}
    
    }
    
    function init() {
    
            moveDiv = document.getElementById("moveMe"); // get the "moveDiv" object
      	moveDiv.style.left = '0px'; // set its initial position to 0px
      	doMove(); // start animating
    }
    
    window.onload = init;
    
    </script>
    </head>
    <body>
    <div id="wrapper" style="background: #eee; height: 600px; width: 600px; overflow: hidden;">
    	
    	<div id="moveMe">foo</div>
    
    </div>
    </body>
    </html>

  • #2
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Try this:
    Code:
    <html>
    <head>
    <style type="text/css">
    
    body {
     font:76% normal verdana,arial,tahoma;
    }
    
    h1, h2 {
     font-size:1em;
    }
    
    #moveMe {
     /* simple box */
     position:absolute;
     left:0px;
     top:8em;
     width:5em;
     line-height:3em;
     background:#99ccff;
     border:1px solid #003366;
     white-space:nowrap;
     padding:0.5em;
    }
    
    </style>
    <script type="text/javascript">
    
    var moveDiv = null; // object
    var maxXaxis = '600px';
    var x,y,randCount = 0;
    function doMove() {
    	// alert(moveDiv.style.left);
    	if(randCount == 0)
    	{
    		x = Math.floor(Math.random()*2);
    		y = Math.floor(Math.random()*2);
    		if(x == 0)
    			x = -1
    		if(y == 0)
    			y = -1
    	}
    	randCount += 1;
    	if(randCount == 10)
    		randCount = 0;
    	if (moveDiv.style.left != maxXaxis) {
    
    		// var randomnumber=Math.floor(Math.random()*11) // random number between 1 and 10
    	     	moveDiv.style.left = parseInt(moveDiv.style.left)+x+'px'; // pseudo-property code: Move right by 1px
    		moveDiv.style.top = parseInt(moveDiv.style.top)+y+'px';
         		setTimeout(doMove,20); // call doMove in 20msec
    	}
    
    }
    
    function init() {
    
            moveDiv = document.getElementById("moveMe"); // get the "moveDiv" object
      	moveDiv.style.left = '0px'; // set its initial position to 0px
    	moveDiv.style.top = '0px';
      	doMove(); // start animating
    }
    
    window.onload = init;
    
    </script>
    </head>
    <body>
    <div id="wrapper" style="background: #eee; height: 600px; width: 600px; overflow: hidden;">
    	
    	<div id="moveMe">foo</div>
    
    </div>
    </body>
    </html>


  •  

    Posting Permissions

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