setTimeout not working, javascript

Emancip8 · 04-22-2008, 08:49 AM

I'm recreating breakout using javascript and have run into a problem with the animation. I have been trying to use setTimeout for a function when i call the function it is only running once. I am clueless!

Any help with this would be greatly appreciated
Here's the script and markup:

Code:

<html>
            <head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Web Programming Assignment 2 - Javascript Game</title>
		<link rel = "stylesheet" type = "text/css" href = "style.css" \>
		<script>
			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('ball');
				direction = "north";
			}
			
			function object(element)
			{
				this.style = document.getElementById(element).style;
				this.move = move;
			}
			
			function move(object)
			{
				var me = this;

				if (direction == "north") 
				{
					position = parseInt(object.style.top);
					if (position > 0) 
					{
						position--;
						object.style.top = position;
						setTimeout(me.move, 0);
					}
					else 
					{
						direction = "south";
					}
				}
				if (direction == "south") 
				{
					position = parseInt(object.style.top);
					if (position < 287) 
					{
						position++;
						object.style.top = position;
						setTimeout(me.move, 0);
					}
					else 
					{
						direction = "north";
						collide();
					}
				}
			}
			
			function collide()
			{
				if (direction == "north")
				{
					move();
				}
			}
		</script>	
	</head>
	<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: 205px; right: 210; 
					top: 287px; bottom: 292;"></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(ball)">
					<br>
					<input type = "button" value = "Stop" id = "buttonStop">
					<br>
					<input type = "button" value = "End Game" id = "buttonEnd">
					<br>
				</div>
			</div>
		</form>	
	</body>
</html>

falsepride · 05-19-2008, 01:15 PM

i recently had the same problem you are. you can't use 'this.function()' in setTimer. when set timer goes off, it calls the function outside the scope of the this keyword. you must use a specific object in setTimer(i think youll want it to be setTimeout(ball.move(), 0); ). by the way when trying to run the script in IE, it pointed out a few other javascript errors. you might want to thorough check your script.