www.webdeveloper.com
Results 1 to 3 of 3

Thread: Having "document.onkeyup" Problems

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Posts
    2

    Question Having "document.onkeyup" Problems

    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

  2. #2
    Join Date
    Jun 2008
    Posts
    106
    Do you only plan for it to work on IE?

  3. #3
    Join Date
    Oct 2013
    Posts
    2
    I would really like it to be able to work on any browser, but as I said, I am fairly new to JavaScript, and I don't really know what I am doing. This code seemed to work on the version of Chrome that I was using, but I haven't tested it on anything else. Is there a problem that would stop this from running on IE?
    Thanks,
    spanner1122

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles