javascript help mootools

[LumbergTech]

I am having difficulty handling the situation where a key / keys are held down.

My javascript code here works to enable me to move an object around in the div it is contained in, but when I hold one of the arrow keys down I only get one event fired off, and not multiple repeated events. I want the object to continue to move while the key is held down.

Anyone know how to handle this properly?

The relevant part of the code begins with: window.addEvent('keyup' , function(event) {

window.addEvent("domready", function() {
	var duration = 40000;
	var length = 2000;
	var count = 0;
	
	var tweener;
	
	var run = function() {
		tweener.tween("background-position", "-" + (++count * length) + "px 0px");
	};
	
	//defines a tween
	tweener = $("animate-area").setStyle("background-position", "0px 0px").set("tween", {
		duration: duration,
		transition: Fx.Transitions.linear,
		onComplete: run,
		link: "cancel"
	
	});
	
	window.addEvent('keyup' , function(event) {
		
		var shipX = $("ship").getStyle("margin-left");
		var shipY = $("ship").getStyle("margin-top");
		
		//alert(event.key);
		
		var newy, newx;
		
		
		//alert("ShipX: " + shipX + " ShipY: " + shipY);
		
		switch(event.key){
		
			case "up":
				newy = parseInt(shipY, 10) - 5;
				newx = parseInt(shipX, 10);
			break;
			
			case "down":
				newy = parseInt(shipY, 10) + 5;
				newx = parseInt(shipX, 10);
			break;
			
			case "left":
				newy = parseInt(shipY, 10);
				newx = parseInt(shipX, 10) - 5;
			break;
			
			case "right":
				newy = parseInt(shipY, 10);
				newx = parseInt(shipX, 10) + 5;
			break;
			
			case "space":
				
			break;
			
			default:
				return;
			break;
		}

		
		
		//alert("newy: " + newy + " newx: " + newx);
		
		var shiptween = $("ship").setStyles({
		
		  "margin-top" : newy + "px",
		  "margin-left" : newx + "px"
		
		}).set("tween", {
			duration: 100,
			transition: Fx.Transitions.linear,
			link: "cancel"
		});
	
	});
	
	//start initial run of transition
	run();

	

});

 

[Tweak155]

Does it only move when you release the key (since you have a 'keyup' function)? If so maybe look at 'keydown'?

 

[Jaydip]

Create a bkeyDown variable and set it to true in keydown event and false in keyup event.Check this variable before running your animation.

 

[LumbergTech]

Create a bkeyDown variable and set it to true in keydown event and false in keyup event.Check this variable before running your animation.

Can you explain this a little further?

 

[LumbergTech]

I switched the event to keydown instead of keyup and now I can hold the key and it will continue on in that direction. I am now trying to implement 8 direction controls instead of just 4. Seems a little trickier than the basic case. I saw one solution online that used an array to keep track of whether or not specific keys were pressed.

 

[Jaydip]

Can you explain this a little further?

Before you start running your animation verify the vale of the variable.If it's true continue otherwise abort.