straker / endless-runner-html5-game

An Endless Runner Style HTML5 Canvas Game. Hosts all the files for the two part tutorial series on http://blog.sklambert.com/endless-runner-html5-game/.
78 stars 67 forks source link

Mobile device compatibility #3

Closed dsyenket closed 6 years ago

dsyenket commented 6 years ago

Hi, do you have any idea on how to make this game works on mobile device? I found out that the action was attached specifically to the space bar key code which doesn't work on mobile device. The codes below is what I used now but it doesn't work smoothly, when the player jumps there is a bit of lag. canvas.addEventListener('touchstart', function(e) { KEY_STATUS[KEY_CODES[32]] = true; e.preventDefault(); }, false);

canvas.addEventListener('touchend', function(e) { KEY_STATUS[KEY_CODES[32]] = false; e.preventDefault(); }, false);

straker commented 6 years ago

I'm afraid I won't be much help on this one. Your code looks like it should work, so I'm not sure why there would be a bit of lag when the player touches the screen.

dsyenket commented 6 years ago

do you have other ways to make it work on mobile devices?

straker commented 6 years ago

If you want to have the canvas scale with the size of the device, I have a codepen showing how to do that with css. For this game, the one button touch should be enough for controls. I can't think of anything else that is needed for mobile.

dsyenket commented 6 years ago

Hi, i think this issue can be closed.