How to move two different images at the same time

Fatt101 · 12-16-2012, 11:26 PM

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();	
}

vwphillips · 12-17-2012, 06:41 AM

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>