Coder le jeu video html5 pong – Contrôle à la souris




 

Cinquième partie consacrée au développement d’un jeu vidéo html5 javascript. L’objectif du jour est d’animer la raquette du joueur par le biais de la souris : la raquette du joueur suivra le pointeur de la souris.


 

Prérequis

Avoir lu les tutoriaux consacrés à l’initialisation du projet Coder le jeu vidéo Pong, à la mise en place de l’environnement du jeu constitué du terrain, du filet, des raquettes, de la balle et du score Coder le jeu vidéo Pong – Raquettes et Balle, à l’animation de la balle Coder le jeu vidéo Pong – Animer la balle et au contrôle de la raquette par le joueur à l’aide du clavier Coder le jeu vidéo Pong – Animer les raquettes.

 

Rappel

Pour le déplacement de la raquette, nous avons créé deux indicateurs dédiés goUp et goDown rattachés aux 2 objets joueurs playerOne et playerTwo du namespace game :

var game = {
  ...
  playerOne : {
    width : 10,
    height : 50,
    color : "#FFFFFF",
    posX : 30,
    posY : 200,
    goUp : false,
    goDown : false
  },
   
  playerTwo : {
    width : 10,
    height : 50,
    color : "#FFFFFF",
    posX : 650,
    posY : 200,
    goUp : false,
    goDown : false
  },
  ...
};

goUp est l’indicateur de déplacement vers le haut et goDown est l’indicateur de déplacement vers le bas.

Ils sont fixés lorsque les touches fléchées du clavier sont pressées. Ensuite, ils sont utilisés par la fonction movePlayers pour incrémenter ou décrémenter, selon le cas, les coordonnées de la raquette du joueur dans le canvas html5.

Les coordonnées sont alors utilisées par la fonction displayPlayers du namespace game pour afficher la raquette du joueur au bon endroit.

 

Principe

C’est à partir des indicateurs goUp et goDown qu’est géré le déplacement : ils incrémentent ou décrémentent les coordonnées de la raquette dont l’affichage est rafraichi ensuite.

Pour gérer le déplacement de la raquette à la souris, nous allons continuer à travailler avec ces deux indicateurs dont les valeurs seront modifiées lorsque le pointeur de la souris se déplacera.

Cela nécessite d’utiliser l’événement de déplacement de la souris mousemove. Lorsque cet événement se produira, une fonction modifiant les indicateurs de déplacement (goUp et goDown) rattachés aux objets player.

Comme pour le déplacement avec le clavier, la mise à jour de la position de la raquette à partir des indicateurs goUp et goDown se fera avec la méthode movePlayers du namespace game.

L’impression de déplacement (la mise à jour de la position de la raquette sur l’écran) sera aussi réalisée par la méthode displayPlayers.

 

Le code

La première chose à faire est de déclarer une nouvelle variable mousePointer chargée de stocker la position du pointeur de la souris.

Du fait du rôle et de l’existence du namespace game.control, encapsuler cette nouvelle variable dans ce namespace n’est pas déconnant.

game.control = {
  
  mousePointer : null,
  
  onKeyDown : function(event) {
    if ( event.keyCode == game.keycode.KEYDOWN ) { 
	  game.playerOne.goDown = true;
    } else if ( event.keyCode == game.keycode.KEYUP ) { 
	  game.playerOne.goUp = true;
    }
  },
  
  onKeyUp : function(event) {
    if ( event.keyCode == game.keycode.KEYDOWN ) {
      game.playerOne.goDown = false;
    } else if ( event.keyCode == game.keycode.KEYUP ) {
	  game.playerOne.goUp = false;
    }
  }

}

Toujours dans le namespace game.controll, nous créons une nouvelle fonction onMouseMove prenant en argument un objet event contenant toutes les informations de la souris (notamment la position du pointeur) dont on a besoin.

La fonction mouseMove va comparer la position du pointeur de la souris à la position de la raquette du joueur.

Si le pointeur est positionné au dessus de la raquette, alors on pose la variable goUp à true et la variable goDown à false pour indiquer la direction (HAUT) dans laquelle doit se déplacer la raquette.

Inversement, si le pointeur est positionné en dessous de la raquette, alors on pose la variable goUp à false et la variable goDown à true pour indiquer la direction (BAS) dans laquelle doit se déplacer la raquette.

Le code de la fonction :

game.control = {
  
  mousePointer : null,
  
  onKeyDown : function(event) {
    if ( event.keyCode == game.keycode.KEYDOWN ) { 
	  game.playerOne.goDown = true;
    } else if ( event.keyCode == game.keycode.KEYUP ) { 
	  game.playerOne.goUp = true;
    }
  },
  
  onKeyUp : function(event) {
    if ( event.keyCode == game.keycode.KEYDOWN ) {
      game.playerOne.goDown = false;
    } else if ( event.keyCode == game.keycode.KEYUP ) {
	  game.playerOne.goUp = false;
    }
  },
  
  onMouseMove : function (event) {
    this.mousePointer = event.clientY;

    if ( this.mousePointer > game.playerOne.posY ) {
      game.playerOne.goDown = true;
      game.playerOne.goUp = false;
    } else if ( mousePointer < game.playerOne.posY ) {
      game.playerOne.goDown = false;
      game.playerOne.goUp = true;
    } else {
      game.playerOne.goDown = false;
      game.playerOne.goUp = false;
    }

}

Remarquez que la propriété mousePointer prend comme valeur la position du pointeur de la souris à laquelle on soustrait une valeur numérique.

Tout cela n’est pas suffisant, il faut maintenant invoquer la fonction onMouseMove sur tout mouvement de la souris. Et ceci passe par le biais de l’évènement onmousemove.

var game = {
  ...
  initMouse : function(onMouseMoveFunction) {
    window.onmousemove = onMouseMoveFunction;
  }
};

Si vous exécutez le jeu en l’état, vous constaterez que tout ne marche pas comme prévu : la raquette ne s’arrête pas à la position du pointeur. Elle se déplace jusqu’au bord du terrain en fonction du mouvement fait par le pointeur de la souris.

Ceci est du au fait que l’appel de la fonction onMouseMouve (fonction qui donne le mouvement à la souris) n’est appelée que sur déplacement de la souris. Du coup, une fois qu’un mouvement est donné et que le pointeur ne bouge plus, la raquette continue sa course.

Il suffit donc d’appeler la fonction onMouseMouve à chaque rafraichissement de la page dans la fonction main.

Toutefois lors de l’appel depuis la fonction principal, l’objet event n’est pas donné en paramètre puisqu’il est donné par l’événement onmousemove.

Si vous ne faites pas attention à cela, vous allez vous retrouver avec une erreur javascript undefined interrompant la fonction mouseMove.

Le remède est de tester que l’objet event existe comme suit :

game.control = {
  mousePointer : null,
  ...
 
  onMouseMove : function(event) {
  
    if ( event ) {
      game.control.mousePointer = event.clientY;
    }

    if ( game.control.mousePointer > game.playerOne.posY ) {
      game.playerOne.goDown = true;
      game.playerOne.goUp = false;
    } else if ( game.control.mousePointer < game.playerOne.posY ) {
      game.playerOne.goDown = false;
      game.playerOne.goUp = true;
    } else {
      game.playerOne.goDown = false;
      game.playerOne.goUp = false;
    }
  }
};

Simple non ? Remarquez qu’en l’état, le déplacement de la raquette ne s’arrête pas au pointeur de la souris, elle se déplace jusqu’aux extrêmes sans s’arrêter.

Ceci est du à la méthode game.movePlayers ci-dessous :
– on déplace la raquette vers le haut tant que sa position est supérieure à zéro, soit la limite en haut de l’espace de jeu;
– on déplace la raquette vers le bas tant que sa position est inférieure à la largeur de l’espace de jeu (game.groundHeight – game.playerOne.height), soit la limite en bas de l’espace de jeu.

var game = {
  ...
  movePlayers : function() {
    if (game.playerOne.goUp && game.playerOne.posY > 0)
      game.playerOne.posY-=5;
    else if (game.playerOne.goDown && game.playerOne.posY < game.groundHeight - game.playerOne.height)
      game.playerOne.posY+=5;
  },
  ...
}

Il suffit de changer ces 2 tests en faisant simplement un contrôle relatif à la position du pointeur de la souris stocké dans la variable game.control.mousePointer et alimentée lors de l’appel de la fonction game.control.onMouseMove. Ce qui donne:

var game = {
  ...
  movePlayers : function() {
    if (game.playerOne.goUp && game.playerOne.posY > game.control.mousePointer)
      game.playerOne.posY-=5;
    else if (game.playerOne.goDown && game.playerOne.posY < game.control.mousePointer)
      game.playerOne.posY+=5;
  },
  ...
}

L’affaire est quasiment terminée : en l’état rien ne se passe puisque l’initialisation de l’usage de la souris n’est pas encore fait. Il suffit pour cela d’appeler la fonction game.initMouse(game.control.onMouseMove); dans la méthode init du namespace javascript game.

Petit hic: le contrôle au clavier ne fonctionne plus. C’est un effet de bord lié à la modification du test dans la méthode movePlayers.

Il faut donc avoir deux tests (la version précédente et la version modifiée) dont l’un ou l’autre est appelé selon le type de contrôle utilisé.

Créez une nouvelle propriété controlSystem au sein du namespace game.control indicatrice du type de contrôle utilisé: MOUSE ou KEYBOARD.

Cette nouvelle propriété est valorisée lorsque l’un ou l’autre type de contrôle est utilisé, en occurrence les événements rattachés et plus particulièrement les fonctions appelées sur ces événements: les méthodes onKeyDown et onMouseMove du namespace javascript game.control.

game.control = {

  controlSystem : null,
  mousePointer : null,

  onKeyDown : function(event) {
  
    game.control.controlSystem = "KEYBOARD";

    if ( event.keyCode == game.keycode.KEYDOWN ) { 
    game.playerOne.goDown = true;
    } else if ( event.keyCode == game.keycode.KEYUP ) { 
    game.playerOne.goUp = true;
    }
  },
  ....
  onMouseMove : function(event) {
   
    game.control.controlSystem = "MOUSE";

    if ( event ) {
      game.control.mousePointer = event.clientY;
    }
 
    if ( game.control.mousePointer > game.playerOne.posY ) {
      game.playerOne.goDown = true;
      game.playerOne.goUp = false;
    } else if ( game.control.mousePointer < game.playerOne.posY ) {
      game.playerOne.goDown = false;
      game.playerOne.goUp = true;
    } else {
      game.playerOne.goDown = false;
      game.playerOne.goUp = false;
    }
  }
}

Ensuite, utilisez cette nouvelle propriété pour choisir le test à réaliser:

var game = {
  ...
  movePlayers : function() {
    if ( game.control.controlSystem == "KEYBOARD" ) {
      // keyboard control
      if ( game.playerOne.goUp ) {
        game.playerOne.posY-=5;
      } else if ( game.playerOne.goDown ) {
        game.playerOne.posY+=5;
      }
    } else if ( game.control.controlSystem == "MOUSE" ) {
      // mouse control
      if (game.playerOne.goUp && game.playerOne.posY > game.control.mousePointer)
        game.playerOne.posY-=5;
      else if (game.playerOne.goDown && game.playerOne.posY < game.control.mousePointer)
        game.playerOne.posY+=5;
    }
  }
  ...
}

Le tour est joué, il n’y a plus qu’à tester.
Pour voir en live le code, cliquez sur Pong

Lors du prochain article, vous apprendrez à renvoyer la balle avec la raquette, à suivre ici

 

Si vous avez aimé cet article, partagez le.

 

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

 

Posté dans html5, pongTaggé game mouse control, html5 game mouse control, jeu video contrôle à la souris, jeu video html5 contrôle à la souris  |  1 commentaire

Une réponse à "Coder le jeu video html5 pong – Contrôle à la souris"

Répondre

*