How can I map mobile touch events to simulate key press up/down in Javascript?

Question

I have two button-like div elements that I would like to map to the left & right arrow keys on a keyboard.

<div id="leftBtn" ontouchstart="simKeyDown(event, LEFT_KEYCODE);" ontouchend="simKeyUp(event, LEFT_KEYCODE);" onmspointerup="simKeyUp(event, LEFT_KEYCODE);" onmspointerdown="simKeyDown(event, LEFT_KEYCODE);"><img src="../images/left.png"></div>

<div id="rightBtn" ontouchstart="simKeyDown(event, RIGHT_KEYCODE);" ontouchend="simKeyUp(event, RIGHT_KEYCODE);" onmspointerup="simKeyUp(event, RIGHT_KEYCODE);" onmspointerdown="simKeyDown(event, RIGHT_KEYCODE);"><img src="../images/right.png"></div>

Then in my Javascript I have:

//Key codes for simulating key events
var LEFT_KEYCODE = 37; //Left cursor key
var RIGHT_KEYCODE = 39; //Right cursor key
                    
//Simulate a key up event
function simKeyUp(e, keyCode) {
    //Suppress the default action
    e.preventDefault();

    //Send the event as a key up event
    queueKeyboardEvent('KeyUp', keyCode);
}

//Simulate a key down event
function simKeyDown(e, keyCode) {
    //Suppress the default action
    e.preventDefault();

    //Send the event as a key down event
    queueKeyboardEvent('KeyDown', keyCode);
}

function queueKeyboardEvent(eventType, keyCode) {

**something goes here**

}

I am stuck at the last function where I want to map the touch event to the key press. Any help or direction would be greatly appreciated. I'm also open to other ways of implementing.

Answer 1

You can use 2 variables to track if the left/right key are pressed. And based on that you can check those values in your canvas render animation method to handle necessary actions. eg:

var LEFT_KEY_PRESSED = false;
var RIGHT_KEY_PRESSED = false;

And whenever your keyUp or keyDown methods are called you can update the variables to ture/false

//Key codes for simulating key events
var LEFT_KEYCODE = 37; //Left cursor key
var RIGHT_KEYCODE = 39; //Right cursor key

var LEFT_KEY_PRESSED = false;
var RIGHT_KEY_PRESSED = false;

//Simulate a key up event
function simKeyUp(e, keyCode) {
    //Suppress the default action
    e.preventDefault();

    //Send the event as a key up event
    queueKeyboardEvent('KeyUp', keyCode);
}

//Simulate a key down event
function simKeyDown(e, keyCode) {
    //Suppress the default action
    e.preventDefault();

    //Send the event as a key down event
    queueKeyboardEvent('KeyDown', keyCode);
}

function queueKeyboardEvent(eventType, keyCode) {
  if (eventType === 'KeyUp') {
    if (keyCode == LEFT_KEYCODE) {
      LEFT_KEY_PRESSED = true
    }
    
    if (keyCode == RIGHT_KEYCODE) {
      RIGHT_KEY_PRESSED = true
    }
  }

  if (eventType === 'KeyDown') {
    if (keyCode == LEFT_KEYCODE) {
      LEFT_KEY_PRESSED = false
    }
    
    if (keyCode == RIGHT_KEYCODE) {
      RIGHT_KEY_PRESSED = false
    }
  }

}

And if you have any requestframe method or animation method there you can check for the values and do the required updates.

eg:

function animate() {

  if (LEFT_KEY_PRESSED ) {
    player.left++
  }

  if (RIGHT_KEY_PRESSED ) {
    player.right++
  }

}