Multitouch sur un navigateur mobile?

Question

J'ai ce jeu de navigateur que je développe pour le plaisir. Mais j'essaie de le faire fonctionner dans les navigateurs mobiles aussi. Mais je n'arrive pas à le faire fonctionner en appuyant sur plusieurs boutons à la fois.

J'ai ce jeu où vous pouvez vous déplacer à gauche et à droite et sauter. (Voir l'image ci-dessous)

touch buttons in game http://www.userhome.org/mobilegame.png

Mon code ressemble à ceci:

function inittouchcontrols() { 

$("body").append("<div id='btn_moveleft' keyid='37'></div><div id='btn_moveright' keyid='39'></div><div id='btn_jump' keyid='38'></div>"); 

    $('body').on('taphold', function (e) { 
     e.preventDefault(); 
    }); 

    $('body').on('tap', function (e) { 
     e.preventDefault(); 
    }); 

    $('body').on('vmouseover', function (e) { 

     if($(e.target).attr("keyid") != undefined) 
      $(e.target).css("background-color", "red"); 

     window["keyDown" + $(e.target).attr("keyid")](); 

     c_key_x = c_key_left + c_key_right; 
     c_key_y = c_key_up + c_key_down; 

     $("#pushedkeys").html("keys: " + c_key_x + " " + c_key_y); 

    }); 

    $('body').on('vmouseout', function (e) { 

     if ($(e.target).attr("keyid") != undefined) 
      $(e.target).css("background-color", "aqua"); 

     window["keyUp" + $(e.target).attr("keyid")](); 

     c_key_x = c_key_left + c_key_right; 
     c_key_y = c_key_up + c_key_down; 


     $("#pushedkeys").html("keys: " + c_key_x + " " + c_key_y); 

    }); 

} 

J'utilise jQuery mobile vmouseover et vmouseout pour détecter des presses sur les divs aqua couleur. Mais il ne fera que pousser un bouton à la fois.

Donc, ma question est:
Y at-il un moyen que je peux mettre en œuvre multitouch à mon code?

Answer 1

Vous pouvez utiliser l'événement touche api touchstart, touchmove et touchEnd (https://developer.mozilla.org/en-US/docs/Web/Guide/Touch_events)

chacun sera une collection de touches, entre autres, attaché à c'est l'objet de l'événement.

Une chose à noter est que les propriétés tactiles ne sont pas inclus dans l'objet événement jQuery normale, donc vous devez utiliser event.originalEvent pour y accéder

$('#ele').on('touchstart', function(e) { 
    var touches = e.originalEvent.touches; 
});