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
    New Coder
    Join Date
    Dec 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to move two different images at the same time

    Currently, my code works in a way that it moves both images with the same arrow keys, i want each image to move interdependently with different key events. The idea is to get sq 1 moving up and down a background image using the up and down arrow keys, with sq 2 doing the same with the w and s keys.

    Any help or advice will be greatly appreciated.

    Code:
    var x = 0;
    var y = 0;
    var sq1 = document.getElementById("sq1");
    var sq2 = document.getElementById("sq2");
    
    function move_up() { y--; } //down
    function move_down() { y++; } //up
    
    function key_down(key_code) {
    	user_key = key_code;
    	console.debug("::"+key_code);
    }
    
    function key_up() {
    	user_key = 0;
    }
    
    function loop() 
    {
    	var sq1 = document.getElementById("sq1")
    	sq1.style.position = "absolute";
    	sq1.style.left = x+"px";
    	sq1.style.top = y+"px";
    	window.setTimeout("loop()", 10);
    	if(user_key == 40) { y++;
    		}
    	if(user_key == 38) { 
    		y--;
    	} 
            var sq2 = document.getElementById("sq2");
    	sq2.style.position = "absolute";
    	sq2.style.left = x+"px";
    	sq2.style.top = y+"px";
            window.setTimeout("loop()", 10);
    	if(user_key == 83) { y++;
    		}
    	if(user_key == 87) { 
    		y--;
    	} 
    
    	}
    
    function on_load() {
    	window.addEventListener('keydown', function(evt) {
    			key_down(evt.keyCode);
    		},true);
    	window.addEventListener('keyup', function(evt) {
    			key_up();
    		},true);
    		
        loop();	
    }

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    
    <img id="sq1" src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" />
    <img id="sq2" src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" />
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    
    function key_down(e) {
     e=e||window.event;
     var charCode=e.which?e.which:event.keyCode ;
     if (charCode==38||charCode==40){
      loop('sq1',charCode==38?1:-1);
     }
     if (charCode==115||charCode==119){
      loop('sq2',charCode==115?1:-1);
     }
    }
    
    function key_up() {
     clearTimeout(loop.to);
    }
    
    function loop(id,ud){
     key_up();
     var sq = document.getElementById(id)
     sq.style.position = "absolute";
     sq.style.left = sq.offsetLeft+ud+"px";
     sq.style.top = sq.offsetTop+ud+"px";
     loop.to=setTimeout(function(){ loop(id,ud);   }, 100);
    }
    
    document.onkeypress=function(evt){ key_down(evt); }
    document.onkeydown=function(evt){  key_down(evt); }
    document.onkeyup=function(evt){  key_up(evt); }
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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