touch events (javascript event)

Question

touch events (javascript event)

Navigation

#1 by (2 votes)

1

Very good. I'm doing a canvas game for mobile and I have a problem with touch events.

I use the clientX, to move the player, if it is in the center of the screen it will jump, and if it is on the sides it will move to this one.

Using e.touches [0] and e.touches [1] I get the character to move and jump at the same time when a second touch is received.

The problem comes when one of the e.touches does not end in the same clientX defined for that action, and if I start the touch in the center and finish it on the right the character keeps jumping ...

I leave the code of the events to see if you can help me

var jumping = false;
    window.addEventListener("touchstart",function(e){
        if(e.touches[0].clientX > (canvas.width / 4) * 3 ){
            player.key.right = true;
        } else if(e.touches[0].clientX < (canvas.width / 4)) {
            player.key.left = true;
        } else {
            player.key.up = true;
            jumping = true;
            setTimeout(function() {

                jumping = false
            }, 25);
        }
        if(e.touches[1]) {
            if(jumping){
                if(e.touches[1].clientX > (canvas.width / 4) * 3 ){
                    player.key.right = true;
                } else if(e.touches[1].clientX < (canvas.width / 4)) {
                    player.key.left = true;
                }
            } else {
                player.key.up = true;
            }
        }
    });
    window.addEventListener("touchend",function(e){
        if(e.changedTouches[0].clientX > (canvas.width / 4)*3){
            player.key.right = false
        } else if(e.changedTouches[0].clientX < (canvas.width / 4)) {
            player.key.left = false;
        } else {
            player.key.up = false;
            jumping = false;
        }
        if(e.changedTouches[1]){
            player.key.up = false;
            jumping = false;
        }
    })

Thanks in advance.

javascript event touch

asked by Ivan Alcaide 14.03.2017 в 18:29

source

1 answer

Activate and deactivate concept using PHP PDO Jquery search in input checked the value of a [duplicate] property

score 2 · Answer 1

RESOLVE !:

I have created a variable to know the number of active touches that are on the screen, so if there is a single touch and it ends all the player's keys are false, and if not, only the one that remains pressed remains active. .

I leave the code in case someone needs it.

var touches = 0;
window.addEventListener("touchstart",function(e){
        touches++;
        if(e.touches[0].clientX > (canvas.width / 4) * 3 ){
            player.key.right = true;
        } else if(e.touches[0].clientX < (canvas.width / 4)) {
            player.key.left = true;
        } else {
            player.key.up = true;
            jumping=true;
        }
        if(e.touches[1]) {
            if(jumping){
                if(e.touches[1].clientX > (canvas.width / 4) * 3 ){
                    player.key.right = true;
                } else if(e.touches[1].clientX < (canvas.width / 4)) {
                    player.key.left = true;
                }
            } else {
                player.key.up = true;
            }
        }
    });
    window.addEventListener("touchend",function(e){
        touches--;
        if(touches > 0){
            if(e.changedTouches[0].clientX > (canvas.width / 4)*3){
                player.key.right = false;
            } else if(e.changedTouches[0].clientX < (canvas.width / 4)) {
                player.key.left = false;
            } else {
                player.key.up = false;
            }
        } else {
            player.key.up = false;
            player.key.left = false;
            player.key.right = false;
        }
    })