Creer un jeu video html5 pong – version smartphone 2eme partie

 

Le jeu vidéo html5 Pong développé dans cette série d’article est pour le moment jouable uniquement sur PC. En effet, le contrôle tactile n’est pas possible : seul le contrôle au clavier ou à la souris est possible. Or sur smartphone ou tablette, il n’y a ni clavier ni souris. Cette 2ème partie est consacrée à la gestion tactile sur smartphone ou tablette tout en gardant à l’esprit qu’il n’y a qu’un seul code source pour smartphone, PC ou tablette.

Au terme de cet article, vous allez vous rendre compte en jouant que la stratégie employée est incomplète en l’état.

 

Gestion des contrôles en fonction du type de média

Jusqu’à présent seuls les contrôles à la souris et au clavier sont pris en charge : ils sont initialisés dans la clause if qui détecte le PC.

Le contrôle tactile se fait par le biais des doigts : javascript met à disposition des évènements relatifs au contrôle tactile.

Ceux qui seront utilisés dans le cadre de cet article sont :
ontouchmove : lorsque les doigts bougent sur l’écran;
ontouchstart : lorsque les doigts touchent l’écran.

Selon le même principe que le contrôle à la souris, Ces événements vont appeler deux fonctions :
touchMove;
– et touchStart.

Le corps de la fonction touchMove est très proche de celui de la fonction mouseMove : la différence se fait uniquement au niveau des propriétés de l’objet event qui sont utilisées : au lieu d’utilisé positionPointeurSouris = event.clientY – 200;, vous allez utiliser positionDoigt = event.targetTouches[0].pageY – 200;.

La propriété event.clientY se rapporte à la position de la souris alors que la propriété event.targetTouches[0].pageY se rapporte à la position du premier doigt (par le biais de l’index 0 pour le premier doigt) du tableau targetTouches mouvement sur l’écran tactile.

Autre différence : vous devez ignorer la levée des évènements par défaut, sans quoi le doigt va faire scroller l’écran au lieu de bouger la raquette. Ceci se fait par le biais de la commande event.preventDefault().

Référez vous à l’article Détecter les fonctions tactiles par défaut en javascript pour plus de détails.

Le code de la fonction touchMove :

var positionDoigt;
var touchMove = function (event) {

 if ( event) {
  event.preventDefault();
  positionDoigt = event.targetTouches[0].pageY - 200;
 }

 if ( positionDoigt > positionYRaquetteA ) {
  ALLER_BAS = true;
  ALLER_HAUT = false;
 } else if ( positionDoigt < positionYRaquetteA ) {
  ALLER_BAS = false;
  ALLER_HAUT = true;
 } else {
  ALLER_BAS = false;
  ALLER_HAUT = false;
 }
}

En comparant le code des fonctions touchMove et mouseMove, remarquez qu’une factorisation est possible.

Pour gérer la lancement de la balle par le joueur qui sur PC se fait par le biais du clavier, je vous propose de le faire par le biais du touché d’un deuxième doigt sur l’écran sans en retirer le premier.

var touchStart = function(event) {
 event.preventDefault();
 var twoTouch = false;
 var touches = event.touches;
 if ( touches.length > 1 && !echangeEnCours && joueurQuiEngage == 1 ) {
  if ( partieEnCours != 1 )  {
   partieEnCours = 1;
   chronometrer();
  }
  twoTouch = true;
  echangeEnCours = true;
  initialiserEngagementJoueur();
 }
 return twoTouch;
}

Il ne reste plus qu’à initialiser ces deux événements. L’initialisation est à faire dans la clause else du if détectant le type de média : cas où un smartphone ou une tablette sont détectés.

De surcroit, cette initialisation ne doit se faire que lorsque le smartphone ou la tablette sont en mode paysage.

// pc, tablette ou smartphone
// initialisation de l'orientation est du mode de contrôle
if ( typeMedia() == "PC" ) {
 ...
} else {
 window.onorientationchange = function() {
  var portraitOrientation = window.matchMedia("(orientation:portrait)");
  if ( portraitOrientation.matches ) {
   document.getElementById("avertissement").style.display = "block";
  } else {
   document.getElementById("avertissement").style.display = "none";
   window.ontouchmove = touchMove;
   window.ontouchstart = touchStart;
   initialisation();
  }
 }

 if ( !orientationPaysage() ) {
  // afficher la fenêtre d'avertissement invitant l'utilisateur à orienter
  // sa tablette et son smartphone en paysage
  document.getElementById("avertissement").style.display = "block";
 } else {
  // activer le contrôle tactile
  // association de la méthode à l'événement :
  // ontouchmove = mouvement du doigt sur l'écran
  window.ontouchmove = touchMove;
  window.ontouchstart = touchStart;
  initialisation();
 }
}
// fin initialisation de l'orientation est du mode de contrôle

 

La démo

Je vous conseille de l’exécuter sur un smartphone Android depuis le navigateur chrome. En effet, le résultat sous Firefox ou autres n’est pas des plus probants. Cependant, cet aspect sera abordé plus en détail dans un prochain article.

Cliquez ici pour tester la démo.

Pour la démo en vidéo sur un Samsung Galaxy S2 sous Chrome :



 

Remarque sur la stratégie employée

Les choses ne sont pas parfaites : sur smartphone l’écran est beaucoup trop petit pour être jouable correctement.
A cela s’ajoute, une balle beaucoup trop rapide qui rend impossible le renvoi de la balle par l’ihm.

Il va donc falloir faire des ajustements de dimensions spécifiques aux smartphones ou encore changer la forme l’écran en l’adaptant spécifiquement au smartphone.

Enfin dernière remarque, le code en l’état devient de moins en moins lisible. Il parait donc opportun de le modifier en utilisant les principes du développement objet en javascript.

[important]Si vous constatez des coquilles, ou avez des remarques à faire ou des améliorations à proposer ou encore souhaitez manifester votre satisfaction de ce tuto, n’hésitez pas les commentaires sont faits pour ça.[/important]

 

Posté dans html5Taggé html5 facile, html5 games, html5 multiplateforme, html5 tactile, Jeu HTML5, jeu vidéo tactile html5, make html5 games  |  Laisser un commentaire

Répondre