Pong en javascript – ajout des effets sonores

Comment procéder à l’ajout du son dans le jeu Pong? 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 pour l’ajout du son dans le jeu Pong

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. 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.

const 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.

let 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 qui 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 bounce dans la méthode moveBall comme ceci en ajoutant un 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.

const 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.

const 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, vous avez vu comment procéder à l’ajout du son dans le jeu Pong. Le prochain article va consister à gérer une intelligence artificielle. L’adversaire va se déplacer et renvoyer la balle. A suivre ici.

Pong en javascript – ajout des effets sonores