Création de la raquette

Avant de pouvoir contrôler et intéragir avec la raquette, nous devons d’abord être en mesure de la voir à l’écran.

Affichage de la raquette

Pour commencer, nous allons utiliser un simple rectangle blanc pour représenter la raquette.

Nous allons attacher cet élément à notre scène en utilisant this.paddle, ce qui nous permettra d’y accéder facilement dans d’autres fonctions comme update().

function create() {
  this.paddle = this.add.rectangle(400, 550, 120, 20, 0xffffff);
}

• this.add.rectangle(400, 550, 120, 20, 0xffffff); ajoute un rectangle blanc de 120px de large et 20px de haut, positionné au centre bas de l’écran.

• this.paddle = … stocke ce rectangle dans la scène sous la variable paddle, ce qui nous permet de l’utiliser dans d’autres fonctions

À ce stade, notre raquette est visible, mais elle ne bouge pas encore !

Amélioration : Stocker les dimensions par défaut

Nous allons maintenant préparer la raquette pour pouvoir facilement modifier ses dimensions dynamiquement et revenir à ses dimensions du début.

Pour cela, nous allons stocker ses valeurs initiales dans une constante.

const DEFAULT_PADDLE = {
    WIDTH: 120,
    HEIGHT: 20,
    BACKGROUND_COLOR: 0xffffff,
}

function create() {
  this.paddle = this.add.rectangle(400, 550, DEFAULT_PADDLE.WIDTH, DEFAULT_PADDLE.HEIGHT, DEFAULT_PADDLE.BACKGROUND_COLOR);
}

Parfait ! Maintenant, il sera très simple de jouer avec la taille de la raquette.

Nous allons maintenant permettre au joueur de déplacer la raquette.

Déplacement avec le clavier

Nous allons utiliser les touches fléchées gauche et droite pour déplacer la raquette.

On va commencer par les activer dans la fonction create() avec this.cursors = this.input.keyboard.createCursorKeys();.

function create() {

  const DEFAULT_PADDLE = {
    WIDTH: 120,
    HEIGHT: 20,
    BACKGROUND_COLOR: 0xffffff,
  }

  this.paddle = this.add.rectangle(400, 550, DEFAULT_PADDLE.WIDTH, DEFAULT_PADDLE.HEIGHT, DEFAULT_PADDLE.BACKGROUND_COLOR);

  // Activation des touches de déplacement
  this.cursors = this.input.keyboard.createCursorKeys();
}

• this.input.keyboard.createCursorKeys(); permet de détecter les touches fléchées.

• this.cursors = … stocke les touches fléchées sur la scène pour pouvoir les utiliser

Maintenant, on va écouter les touches « LEFT » et « RIGHT » lorsqu’elles sont enfoncées et déplacer notre raquette en conséquence avec un pas de 5.

function update() {
  if (this.cursors.left.isDown) {
    this.paddle.x -= 5;
  } else if (this.cursors.right.isDown) {
    this.paddle.x += 5;
  }
}

Très bien, mais le problème c’est que notre raquette peut quitter l’écran…

Réglons ça en limitant ses déplacements aux bords du jeu. Pour ça, on va vérifier que la position du rectangle (représenté par le point en son centre) ne dépasse pas 0 à gauche ni 800 à droite.

On va utiliser la fonction Phaser.Math.Clamp(newPosition, minValue, maxValue);

function update() {
  if (this.cursors.left.isDown) {
    this.paddle.x = Phaser.Math.Clamp(this.paddle.x - 5, 0, 800);
  } else if (this.cursors.right.isDown) {
    this.paddle.x = Phaser.Math.Clamp(this.paddle.x + 5, 0, 800);
  }
}

Très bien, mais du coup notre raquette dépasse de l’écran de sa moitié

il faut donc qu’on réduise les limites de la moitiée de la largeur de la raquette en récupérant sa taille actuelle avec this.paddle.width / 2

function update() {
  if (this.cursors.left.isDown) {
    this.paddle.x = Phaser.Math.Clamp(this.paddle.x - 5, this.paddle.width / 2, 800 - (this.paddle.width / 2));
  } else if (this.cursors.right.isDown) {
    this.paddle.x = Phaser.Math.Clamp(this.paddle.x + 5, this.paddle.width / 2, 800 - (this.paddle.width / 2));
  }
}

Enfin, comme pour les dimensions, si on veut pouvoir rajouter des bonus / malus de vitesse on va stocker sa vitesse initiale en modifiant notre constante DEFAULT_PADDLE

const DEFAULT_PADDLE = {
  WIDTH: 120,
  HEIGHT: 20,
  BACKGROUND_COLOR: 0xffffff,
  SPEED : 5
}

Puis en l’utilisant :

function update() {
  if (this.cursors.left.isDown) {
    this.paddle.x = Phaser.Math.Clamp(this.paddle.x - DEFAULT_PADDLE.SPEED, this.paddle.width / 2, 800 - (this.paddle.width / 2));
  } else if (this.cursors.right.isDown) {
    this.paddle.x = Phaser.Math.Clamp(this.paddle.x + DEFAULT_PADDLE.SPEED, this.paddle.width / 2, 800 - (this.paddle.width / 2));
  }
}

Parfait ! Notre raquette est maintenant opérationnelle avec le clavier 🙂

Déplacement avec la souris

Nous allons maintenant ajouter le déplacement avec la souris pour une meilleure jouabilité.

Il va nous falloir ajouter l’événement pointermove dans la fonction create() pour écouter les déplacements de la souris

function create() {

  ...

  //  Ecoute de l'événement pointermove
  this.input.on('pointermove', (pointer) => {
    console.log(pointer.x);
  });
}

Il nous reste plus qu’à modifier la position de la raquette en respectant les limites du jeu

this.input.on('pointermove', (pointer) => {
    this.paddle.x = Phaser.Math.Clamp(pointer.x, this.paddle.width / 2, 800 - (this.paddle.width / 2));
  });

Félicitations ! Maintenant, la raquette suit la souris en temps réel !

Dans ce chapitre, nous avons :

• Créé et affiché la raquette

• Ajouté le déplacement au clavier (flèches gauche/droite)

• Implémenté le contrôle à la souris pour un gameplay fluide

Là prochaine étape ? Ajouter la balle bien sûr !