Creer un jeu video html5 pong – version smartphone 1ere partie

Dans un précédent article, j’avais expliqué que l’intérêt du html5 pour les jeux était de développer pour plusieurs plateformes à la fois ; pc, smartphone, tablette, ios, ou android. Jusqu’à présent, le jeu Pong html5 que vous avez développé fonctionne sur PC. Sur smartphone ou tablette, il peut aussi fonctionner mais reste injouable pour des raisons aussi variées que la non prise en charge de la fonction tactile par le jeu, mais aussi la taille de l’écran inadaptée. Dans cette première partie, je vous propose de gérer l’orientation du smartphone (paysage ou portrait) tout en adaptant le jeu pour qu’il fonctionne aussi bien sur smartphone et tablette que sur PC du point de vue de l’affichage. La deuxième partie abordera l’adaptation du contrôle du jeu selon que ce soit un smartphone, une tablette ou un PC.

Introduction

Je ne parlerais pas des Media Queries CSS3. L’idée ici est d’adapter le contrôle de la raquette en la bougeant avec le doigt, mais aussi de forcer l’orientation du smartphone ou de la tablette en position paysage.

Pour spécifier le mode de contrôle de la raquette (tactile, touche ou souris), il vous faut détecter si le média est un smartphone, pc ou tablette. Idem en ce qui concerne la position paysage obligatoire.

Qu’est ce qui change par rapport à la version PC ?

D’un point de vue graphique, rien puisque la gestion des dimensions est déjà gérées (voir l’article ).
D’un point de vue contrôle, vous passez du contrôle à la souris ou au clavier à un contrôle tactile.
Toutefois que ce soit sur PC, smartphone ou tablette, le même code sera exécuté : il n’y aura pas un code par version.

 

Avant de commencer

L’initialisation du jeu vidéo html5 se fait en deux temps :
– d’abord initialiser les commandes du jeu vidéo html5 en fonction du type de média, demander à l’utilisateur le passage en mode paysage;
– puis initialiser le jeu.

Créez une nouvelle fonction demarrerJeu appelée au chargement de la page et chargée de gérer d’initialiser le mode de contrôle selon le média utilisé : tactile pour smartphone et tablette, souris pour PC.

var demarrerJeu = function() {
}

Pour que cette nouvelle fonction soit appelée au démarrage, remplacez :

window.onload = initialisation;

par

window.onload = demarrerJeu;

La fonction initialisation est quant à elle appelée par la fonction demarrerJeu lorsque toutes les commandes sont initialisées et que dans le cas dans smartphone ou d’une tablette l’orientation paysage est ok. Je détaille cela un peu plus loin.

 

Smartphone, PC ou tablette ?

Dans un premier temps, je vous invite à consulter l’article Différencier un PC, d’un smartphone et/ou d’une tablette qui traite de ce sujet et duquel vous allez vous inspirer.

Créez une nouvelle fonction typeMedia qui renvoie le type de média sur lequel est exécuté le jeu.

Cette fonction appelle un webservice php comme expliquer dans l’article précédemment évoqué à la différence que l’appel ici est synchrone : il faut attendre la réponse du webservice sans quoi on ne sait pas quel média nous avons entre les mains.

var typeMedia = function() {
 var returnValue = "PC";
 var resultUA = {};
 var xmlhttp = new XMLHttpRequest();
 xmlhttp.open("GET", "http://www.developper-jeux-video.com/download/ws/userAgentCapacityWS.php?ua="+navigator.userAgent+"&u=bla&p=bla", false);
 xmlhttp.send(null);
 if (xmlhttp.status === 200) {
  resultUA = JSON.parse(xmlhttp.responseText);
  if (resultUA.mobile == 1) {
   returnValue = "SMARTPHONE";
  } else if (resultUA.tablet == 1) {
   returnValue = "TABLETTE";
  }
 }
 return returnValue;
}

Cette nouvelle fonction va permettre en fonction du media de :
– sélectionner le type de contrôle (souris, clavier, ou tactile à activer);
– sélectionner/forcer l’orientation paysage dans le cas d’un smartphone ou d’une tablette.

Forcer l’orientation paysage

Préalablement, je vous invite à consulter l’article javascript orientation portrait ou paysage duquel vous allez vous inspirer.

Il faut indiquer à l’utilisateur qui utilise un smartphone ou une tablette de changer son orientation s’il est en mode portrait.

Du coup, vous devez ajouter un bloc div html5 qui n’est affiché que lorsque l’utilisateur a un smartphone ou une tablette et est en mode portrait.

Dans les autres cas, le bloc div html5 n’est pas affiché. Par défaut, ce bloc n’est pas visible et il faut aussi le dimensionner en fonction de la taille du smartphone.

Le code du bloc :

<div id="avertissement" style="background-color: #666666; z-index: 1000; width: 1168px; height: 300px; border: 2px solid #000000; text-align: center; font-size: 50px; vertical-align: middle; display: none; margin: auto;">Pour jouer, veuillez orienter votre smartphone ou tablette en position paysage.</div>

Créez une fonction qui redimensionne le bloc d’avertissement nommée ajusterDimensionsAvertissement :

var ajusterDimensionsAvertissement = function() {
 var pongAvertissement = document.getElementById("avertissement");
 pongAvertissement.style.width = tailleReelleEcranY*1.2 + "px";
 pongAvertissement.style.height = tailleReelleEcranX + "px";
}

Et appelez là depuis la fonction demarrerJeu :

var demarrerJeu = function() {
 ajusterDimensionsAvertissement();
 ....
}

Créez une nouvelle fonction nommée orientationPaysage qui renvoie une valeur booléenne :
– vrai si le smartphone ou la tablette sont en orientation paysage;
– faux si le smartphone ou la tablette sont en orientation portrait.

Cette fonction n’est à appeler que si le média détecté est un smartphone ou une tablette, la gestion de l’orientation n’a pas lieu d’être pour un PC.

var orientationPaysage = function() {
 var returnValue = true;
 var portraitOrientation = window.matchMedia("(orientation:portrait)");
 if ( portraitOrientation.matches ) {
   returnValue = false;
 }
 return returnValue;
}

L’orientation ainsi que le mode de contrôle sont des éléments à initialiser au lancement du jeu, les appels aux deux fonctions définies ci-dessus sont donc à faire dans la fonction demarrerJeu :

var demarrerJeu = function() {
 ajusterDimensionsAvertissement();
 if ( typeMedia() == "PC" ) {
 ...
 } else {
  // activer le contrôle tactile
  if ( !orientationPaysage() ) {
   // afficher la fenêtre d'avertissement invitant l'utilisateur à orienter
   // sa tablette et son smartphone en paysage
  }
 }
}

Vous devez maintenant créer une fonction qui active/désactive le bloc div de l’avertissement défini précédemment : lorsque l’utilisateur change l’orientation de son smartphone, il faut désactiver le bloc div d’avertissement.

Cela passe par le biais de l’événement onorientationchange qui est levé lorsqu’a lieu un changement d’orientation :

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";
 }
}

Cet événement n’est à définir que si le média est un smartphone ou une tablette : pour un PC, c’est inutile.

.....
if ( typeMedia() == "PC" ) {
.....
} else {
 // initialisation de l'événement onorientationchange
 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";
 }
}
.....

Il est aussi nécessaire de désactiver le bloc div si le smartphone est en position paysage au démarrage du jeu : vous devez donc tester s’il l’est ou pas lorsque l’utilisateur a un smartphone ou une tablette entre les mains :

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";
} 

Souvenez vous que l’appel à la fonction initialisation a été remplacé par un appel à la fonction demarrerJeu. De ce fait, l’initialisation du jeu comportant le dimensionnement et autres traitements ne se fait plus.

Vous devez donc réintégrer l’appel à cette fonction lorsque le mode d’orientation est correcte ou lorsque le média est un PC :

La fonction demarrerJeudevient donc :

var demarrerJeu = function() {

 ajusterDimensionsAvertissement();

 // pc, tablette ou smartphone
 // initialisation de l'orientation est du mode de contrôle
 if ( typeMedia() == "PC" ) {
  ...
  initialisation();
 } 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";
    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 {
   initialisation();
  }
 }
 // fin initialisation de l'orientation
}

Les contrôles souris et clavier ne sont à activer que dans le cas d’un PC : déplacez le code initialisant les événements relatifs au clavier et à la souris dans la clause if relative au PC :

.....
if ( typeMedia() == "PC" ) {
 // activer le contrôle à la souris et/ou au clavier
 // association des méthodes aux événements :
 // onKeyDown = à l'appui de la touche
 // onKeyUp = au relèvement de la touche
 window.onkeydown = onKeyDown;
 window.onkeyup = onKeyUp;
 // association de la méthode à l'événement :
 // onmousemove = mouvement de la souris
 window.onmousemove = mouseMove;
 initialisation();
} else {
.....

Cette première se termine ici : remarquez qu’il est possible de démarrer le jeu en cliquant sur le bouton start.

Pour la démo : cliquez ici.

Autre remarque : le configuration de l’écran est, du fait de la taille de l’écran, clairement inadapté au smartphone. Il y a donc nécessité à rendre les choses plus lisibles sur smartphone, objet d’un prochain article.

[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, Jeu HTML5, make html5 games  |  3 commentaires

3 réponses à "Creer un jeu video html5 pong – version smartphone 1ere partie"

Répondre