View Full Version : Click/touch Icon, send keyboard input to canvas

12-22-2011, 04:51 AM
Edit2:: This is what I got to work.

<INPUT class=touch type=button value='UP' onMouseDown="up=true;" onMouseUp="up=false;">
<INPUT class=touch type=button value='DOWN' onMouseDown="down=true;" onMouseUp="down=false;">

Then added a check to see if (up==true) {move up code}
else if (down==true) {move down code}


<INPUT class=touch type=button value='38' onMouseDown="movingUP();">

Then in JS

function movingUP(){
window.event.keyCode = 38;

But what do I put in movingUP() to send keyCode 38 when while the button is being clicked?????????????????????

Trying to add 8 icons of W,A,S,D, LEFT, RIGHT, UP, DOWN which upon click/touch will input the relative command to the screen canvas for mobiles that don't have a keyboard.

They aren't clicking on the canvas. I need some buttons/icons/images outside the canvas probably in a div, that send input events as an alternative to a keyboard...Something that can be clicked and held down to repeatedly spam that key to walk in that direction.

I have script to click icons from a keyboard and output the clicked key to a text field, but I don't know how to tie it into my keyboard listener in my game..

My game code uses:

// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);

Then elsewhere I can trigger events when keysDown contains the number of a key that triggers an item like:

if (38 in keysDown && hero.y > 0 ) { // Player holding UP key
//walk north code here

Is there a simple way to click on a button and send the "UP" keyCode to the entire screen? Particularly the canvas element......Or get it into my keysDown[e.keyCode];

I found this:
function addKey(cKey)
d = document.forms["foo"].elements["bar"];
d.value = (cKey.value=='backspace') ? d.value.slice(0,-1) : d.value+cKey.value;

//elsewhere in html body
<INPUT class=touch type=button value=w onClick="addKey(this)">

which will send 'w' when clicked, and I tried to send '38' instead but it only sends it to 1 element and not the entire screen....so it shows 38 in a text box each time I click it but it doesn't actually send 38 to keys being pressed.

Is there a simple way to do this? I wanted to add a fire button and others I figured I could just put an image with an event but can't figure it out....