I am fairly new to JavaScript, but I am trying to make a basic game for a web browser. Essentially, I would like a picture to move from table cell to table cell on the browser screen. I am still working on the basics of the game, but I have set up my code to detect when the arrow keys are pressed and run a function based on which key is pressed. When one of the keys is pressed, the image moves in the corresponding direction until it hits on of the walls of the table. This is all fine, but the user can press multiple keys after one another, messing up the program. I the image to travel in a single direction until it hits a wall, then allowing it to be redirected. Is there a way to stop the user pressing multiple keys and only allow them to press one, and then another once my image stops moving?

My current code is as follows:
Code:
<script>
	key = 0
	x = [9,9];
	document.getElementById(x).setAttribute('background', 'images/ball.png');
	function moveUp(){
		document.getElementById(x).setAttribute('background', '');
		x[1] = x[1] + 1;
		setTimeout(moveUpLoop,0);
	}
	function moveUpLoop() {
		document.getElementById(x).setAttribute('background', 'images/ball.png');
		if(x[1] == "17"){
			alert("You lose!");
		}else{
		        setTimeout(moveUp,200);
		}
	}
	function moveLeft(){
		document.getElementById(x).setAttribute('background', '');
		x[0] = x[0] - 1;
		setTimeout(moveLeftLoop,0);
	}
	function moveLeftLoop() {
		document.getElementById(x).setAttribute('background', 'images/ball.png');
		if(x[0] == "1"){
			alert("You lose!");
		}else{
		        setTimeout(moveLeft,200);
		}
	}
	function moveRight(){
		document.getElementById(x).setAttribute('background', '');
		x[0] = x[0] + 1;
		setTimeout(moveRightLoop,0);
	}
	function moveRightLoop() {
		document.getElementById(x).setAttribute('background', 'images/ball.png');
		if(x[0] == "17"){
			alert("You lose!");
		}else{
			setTimeout(moveRight,200);
		}
	}
	function moveDown(){
		document.getElementById(x).setAttribute('background', '');
		x[1] = x[1] - 1;
		setTimeout(moveDownLoop,0);
	}
	function moveDownLoop() {
		document.getElementById(x).setAttribute('background', 'images/ball.png');
		if(x[1] == "1"){
			alert("You lose!");
		}else{
	          	setTimeout(moveDown,200);
		}
	}
</script>
<script>
        document.getElementById(block1).setAttribute('background', 'images/block.png');
        document.onkeyup = function() {
	        switch (window.event.keyCode) {
		        case 37:
			          setTimout(moveLeft());
			          break;
		        case 38:
			          moveUp();
			          break;
		        case 39:
			          moveRight();
			          break;
		        case 40:
			          moveDown();
			          break;
	        }
        }
</script>
The variable "x" corresponds to co-ordinates of table cells.

Any help on this problem would be greatly appreciated as I cannot figure it out at all.
Thanks,
spanner1122