Simulate spacebar press with touchevent in javascript/html

Question

I'm trying to port a game on Android and in the game the player press space to jump and I can't find any working solution to simulate a spacebar event when a user touch the screen

Here's the code I've found until now :

/**
 * Keep track of the spacebar events
 */
var KEY_CODES = {
  32: 'space'
};
var KEY_STATUS = {};
for (var code in KEY_CODES) {
  if (KEY_CODES.hasOwnProperty(code)) {
     KEY_STATUS[KEY_CODES[code]] = false;
  }
}
document.onkeydown = function(e) {
  var keyCode = (e.keyCode) ? e.keyCode : e.charCode;
  if (KEY_CODES[keyCode]) {
    e.preventDefault();
    KEY_STATUS[KEY_CODES[keyCode]] = true;
  }
};
document.onkeyup = function(e) {
  var keyCode = (e.keyCode) ? e.keyCode : e.charCode;
  if (KEY_CODES[keyCode]) {
    e.preventDefault();
    KEY_STATUS[KEY_CODES[keyCode]] = false;
  }
};
document.addEventListener("touchstart", function(e) {
  document.onkeydown({ keyCode: 32 });
});
document.addEventListener("touchend", function(e) {
  document.onkeyup({ keyCode: 32 });
});

I don't understand why this doesn't work...

And then this :

// jump higher if the space bar is continually pressed
if (KEY_STATUS.space && jumpCounter) {
  player.dy = player.jumpDy;
}

Above is all the code that use the space bar event

Full Game code

See http://stackoverflow.com/questions/961532/firing-a-keyboard-event-in-javascript — Michał Perłakowski, Aug 19 '16 at 22:06

Ram Segev · Answer 1 · 2016-08-19T22:22:37.150

1

You need to take the keyCode from the event, try writing ({ e.keyCode: 32});

edited Aug 19 '16 at 22:22

answered Aug 19 '16 at 22:13

Ram Segev

2,563
2
12
24

afmeva · Answer 2 · 2016-08-20T15:41:38.433

1

you can define a handler and then wrap the jump function. fire it with the event needed. Ex:

function jump(keyEvent) { /* code to jump*/}

this is a bad idea but it can work for you. This way you dont have to worry about the preventDefault method.

function jumpHandler(e) { e.keyCode = 32; jump(e) /*object to simulate the keydown event object*/ }

to avoid the manipulation of event object you could pass an empty function in the same way yo are passing the keyCode property. But you will lose the preventDefault functionality.

function jumpHandler() { jump({keyCode:32, preventDefault: function(){}}) /*object to simulate the keydown event object*/ }

document.addEventListener('touchstart', jumpHandler);
document.onKeydown = jump // here just the reference to the handler

Some times returnig false at the end of function can have the same behavior of preventDefault, I´m telling you this just whether you want to return false instead of calling preventDefault.

:)

edited Aug 20 '16 at 15:41

answered Aug 19 '16 at 22:14

afmeva

839
7
13

In the /* code to jum*/ I can the full jump code ? It's : if (KEY_STATUS.space && player.dy === 0 && !player.isJumping) { player.isJumping = true; player.dy = player.jumpDy; jumpCounter = 12; assetLoader.sounds.jump.play(); } – k0spwn Aug 19 '16 at 22:34
yes, you can put all you need into the jump function. Just be sure that you provide all needed for the required context. – afmeva Aug 19 '16 at 22:40
I´m testing the fragment of code i wrote and it is working. do you have your game uploaded in some place where i can test it?... – afmeva Aug 20 '16 at 15:03
I'm testing in your site and it is working too. I just injected my code and test it with devtool in order to simulate touch events. It works but the mandarine is jumping like crazy. I had to comment the e.preventDefaultt because our fake object does not have this method, I will edit my answer to give aditional idea. To prevent this you have to simulate the keyup event too in the same way. – afmeva Aug 20 '16 at 15:30
I might have wroted it all wrong since it doesn't work for me... Here's the piece of script I wrote with yours. Paste link : http://pastebin.com/m4LekmpK – k0spwn Aug 20 '16 at 16:00

Simulate spacebar press with touchevent in javascript/html

2 Answers2