Question

I have this script for moving a character in a game in a html 5 canvas, it simply calls a function to move the character if the mouse is detected either side. How would I swap that for a touch gesture to be used on a mobile device?

document.onmousemove = function(e){  
    if (player.X + c.offsetLeft > e.pageX) {  
        player.moveLeft();  
    } else if (player.X + c.offsetLeft < e.pageX) {  
        player.moveRight();  
    }  
}

Answer 1

I wouldn’t recommend swapping it out. Instead just add handlers for touch events and translate the events into something your onmousemove handler can understand.

So for instance, add an ontouchmove handler that translates the event’s screenX and screenY to pageX and pageY and then calls your existing onmousemove handler. That would be for handling events from iOS devices running mobile Safari. You’ll probably have to add some additional translations to handle other devices/browsers as well.