Coder le jeu video html5 pong – Ajout du son




 

Septième partie consacrée au développement d’un jeu vidéo html5 javascript. Dans cet article, vous allez apprendre à jouer un son lorsque la balle va rencontrer un obstacle.


 

Prérequis

Avoir lu les tutoriaux suivants :
– 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;
– le contrôle de la raquette par le joueur à l’aide du clavier Coder le jeu vidéo Pong – Animer les raquettes;
– le contrôle de la raquette par le joueur à l’aide de la souris Coder le jeu vidéo Pong – Controle à la souris;
– le renvoi de la balle par les raquettes Coder le jeu video html5 pong – Renvoi de la balle.

 

Le son du choc de la balle contre les murs

En premier lieu, téléchargez le son que vouas allez intégrer dans le jeu ici pour le ping.
Un fois téléchargé, placez ce fichier son dans le dossier sound (à créer s’il n’existe pas) placé à la racine du projet du jeu.

Le fichier audio proposé ici est au format ogg, vous pourriez aussi utilisé un fichier au format mp3 si le navigateur supporte ce type de fichier.

Pour plus de détail sur les sons et l’objet javascript Audio, référez vous à l’article Le son et l’audio HTML5.

Ensuite, créez et initialisez une nouvelle variable qui permettra de jouer le son voulu.

Tout d’abord en la créant et l’intégrant au namespace javascript game :

var game = {
   
  groundWidth : 700,
  groundHeight : 400,
  netWidth : 6,
  groundColor : "#000000",
  netColor : "#FFFFFF",
  
  groundLayer : null,  
  scoreLayer : null,
  playersBallLayer : null,
    
  scorePosPlayer1 : 300,
  scorePosPlayer2 : 365,
  
  wallSound : null,
  ....
}

Et en l’initialisant dans la méthode init de ce même objet game :

var game = {
   
  groundWidth : 700,
  ....
  wallSound : null,
  ....  

  init : function() {
    this.groundLayer= game.display.createLayer("terrain", this.groundWidth, this.groundHeight, undefined, 0, "#000000", 0, 0); 
    game.display.drawRectangleInLayer(this.groundLayer, this.netWidth, this.groundHeight, this.netColor, this.groundWidth/2 - this.netWidth/2, 0);
    
    this.scoreLayer = game.display.createLayer("score", this.groundWidth, this.groundHeight, undefined, 1, undefined, 0, 0);
    game.display.drawTextInLayer(this.scoreLayer , "SCORE", "10px Arial", "#FF0000", 10, 10);
    
    this.playersBallLayer = game.display.createLayer("joueursetballe", this.groundWidth, this.groundHeight, undefined, 2, undefined, 0, 0);  
    game.display.drawTextInLayer(this.playersBallLayer, "JOUEURSETBALLE", "10px Arial", "#FF0000", 100, 100);
    
    this.displayScore(0,0);
    this.displayBall(200,200);
    this.displayPlayers();
   
    this.initKeyboard(game.control.onKeyDown, game.control.onKeyUp);
    this.initMouse(game.control.onMouseMove);
	
    this.wallSound = new Audio("./sound/wall.ogg");
  },
  ....
} 

Il ne reste plus qu’à déclencher ce son lorsque la balle rencontre un mur depuis la méthode bounce. Pour une meilleure écriture et une réutilisation future, intégrez un paramètre son à la fonction, son qu y sera utilisé :

  bounce : function(soundToPlay) {
    if ( this.posX > game.groundWidth || this.posX < 0 ) {
      this.directionX = -this.directionX;
      soundToPlay.play();
    }
    if ( this.posY > game.groundHeight || this.posY < 0  ) {
      this.directionY = -this.directionY;
      soundToPlay.play();
    }		
  },


Ce petit changement nécessite de modifier l'appel à la fonction <em>bounce</em> dans la méthode <em>moveBall</em> comme ceci (on ajoute le paramètre) :

  moveBall : function() { 
    this.ball.move();
    this.ball.bounce(this.wallSound);
    this.displayBall();
  } 

Et le tour est joué…..

 

Le son du choc de la balle contre les raquettes

Téléchargez le son ici pour le ping Raquette.
Et placez les dans le dossier sound du projet du jeu vidéo.

Tout comme le son pour le choc du mur, il vous faut créer un objet javascript Audio dédié au son du choc contre la raquette :

var game = {
   
  groundWidth : 700,
  groundHeight : 400,
  netWidth : 6,
  groundColor : "#000000",
  netColor : "#FFFFFF",
  
  groundLayer : null,  
  scoreLayer : null,
  playersBallLayer : null,
    
  scorePosPlayer1 : 300,
  scorePosPlayer2 : 365,
  
  wallSound : null,
  playerSound : null,
  ....
}

Et l’initialiser dans la méthode init de ce même objet game :

var game = {

  ....
  wallSound : null,
  playerSound : null,
  ....  
  init : function() {
    ....
	
    this.wallSound = new Audio("./sound/wall.ogg");
    this.playerSound = new Audio("./sound/player.ogg");
  },
  ....
} 

Il ne reste plus qu’à déclencher ce son lors des collisions de la balle avec d’abord les raquettes. Ceci se fait par par le biais de la méthode play de l’objet Audio, dans le cas présent l’objet playerSound.

La gestion du choc de la balle sur un mur est gérée par la fonction collideBallWithPlayersAndAction. Il suffit donc d’appeler wallSound.play() à cet endroit :

  collideBallWithPlayersAndAction : function() { 
    if ( this.ball.collide(game.playerOne) ) {
      game.ball.directionX = -game.ball.directionX;
      this.playerSound.play();
    }
    if ( this.ball.collide(game.playerTwo) ) {
      game.ball.directionX = -game.ball.directionX;
      this.playerSound.play();
    }
  }

Et c’est tout.

 
Pour voir en live le code, cliquez sur Pong

Le prochain article va consister à gérer une intelligence artificielle, l’adversaire va se déplacer et renvoyer la balle. A 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é développer pong, pong html5, pong javascript, tutoriel html5, tutoriel jeu vidéo, tutoriel pong  |  4 commentaires

4 réponses à "Coder le jeu video html5 pong – Ajout du son"

Répondre

*