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
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question setTimout not working for animation, please help!

    I have been trying to recreate the breakout game using javascript as a uni project. I have been able to get animation to work a certain way but not the way i have been asked to do it which is annoying.
    I have he following code:

    Code:
    var lives = 2;
    var score = 0;
    var ball;
    var position;
    var direction;
    
    function initialize()
    {
    	document.getElementById('lives').innerHTML = "Lives: " + lives;
    	document.getElementById('score').innerHTML = "Score: " + score;
    	ball = new object();
    	direction = "north";
    }
    			
    function object()
    {
    	this.move = move;
    	
    	function move()
    	{
    		var style = document.getElementById('ball');
    		
    		if (direction == "north") 
    		{
    			position = parseInt(style.style.top);
    			if (position > 0) 
    			{
    				position = position - 2;
    				setTimeout('move()', 10);
    				style.style.top = position;
    			}
    			else 
    			{
    				direction = "south"
    				collide();
    			}
    		}
    		if (direction == "south") 
    		{
    			position = parseInt(style.style.top);
    			if (position < 287) 
    			{
    				position = position + 2;
    				setTimeout('move()', 10);
    				style.style.top = position;
    			}
    			else 
    			{
    				direction = "north";
    				collide();
    			}
    		}
    	}
    }
    
    function collide()
    {
    	if (direction == "north")
    	{
    		bounce("north");
    	}
    }
    	
    function bounce(dir)
    {
    	if (dir == "north")
    	{
    		direction = "north";
    		move();
    	}
    }
    I got it working by using:
    style = document.getElementById('ball').style - inside the move() function, but i have been asked to define ball as an object with methods. The code above only moves the ball 2 pixels when i call ball.move() so is it the setTimeOut that needs changing? Any help would certainly be very much appreciated
    Here's the markup:
    Code:
    <body onload = "initialize()">
                 <hr/>
    	<h1>Javascript Game</h1>
    	<hr/>
    	<a href = "#">Home</a>
    	<p/>
    	<form>
    		<div id = "gameBoard">
    			<div id = "boundary">
    				<div id = "ball"style = "left: 202.5px; right: 207.5; top: 287.5px; bottom: 292.5;"></div>
    				<div id = "paddle"></div>
    			</div>
    			<div id = "gameControl">
    				<div id = gameTitle>Breakout
    Game</div>				
                                                       <div id = "lives"></div>
    				<div id = "score"></div>
    				<input type = "button" value = "Start" id = "buttonStart" onclick = "ball.move()">
    				<br>
    				<input type = "button" value = "Stop" id = "buttonStop">
    				<br>
    				<input type = "button" value = "End Game" id = "buttonEnd">
    				<br>
    			</div>
    		</div>
    	</form>	
    </body>

  • #2
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    in your move function, before the setTimeout add
    Code:
    var me = this;
    and change "move()" in setTimeout to me.move (no parenthesis, we're looking for the function reference)
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • Users who have thanked mjlorbet for this post:

    Emancip8 (04-22-2008)

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Emancip8, please don't cross post. You have the same question here:
    http://www.codingforums.com/showthread.php?t=138130
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    mjlorbet that worked beautifully, thankyou so much


  •  

    Posting Permissions

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