Card Flip Game [Pointer not working

Phaser 3
1

Hi, newbie at Phaser 3 - am currently creating a memory match card flipping game.

Based on my current code, I used a loop function to churn out the 3X3 cards. However, I am having trouble getting the click on the card function to work. I want to be able to click on the card, let it flip to show the back. But the click itself is not working and the flip as well.

Will appreciate any pointers thanks!

Attached is my code.

import Phaser from 'phaser';

export default class Preloader extends Phaser.Scene {
  constructor() {
    super('preloader');
  }

  preload() {
    this.load.image('cardfront', 'textures/cardback.png', {
      frameWidth: 80,

      frameHeight: 100,
    });

    this.load.image('cardback', 'textures/card-clubs-1.png', {
      frameWidth: 80,

      frameHeight: 100,
    });
  }

  create() {
    this.scene.start('game');
  }
}

// GAME.JS

import Phaser from 'phaser';

export default class Game extends Phaser.Scene {
  /**@type{Phaser.Physics.Arcade.Static} */

  boxGroup;

  constructor() {
    super('game');
  }

  create() {
    const { width, height } = this.scale;

    this.boxGroup = this.physics.add.staticGroup();

    this.createBoxes();

    const cards = this.boxGroup;

    var pointer = this.input.activePointer;

    this.input.on(Phaser.Input.Events.POINTER_UP, () => {
      this.flip(cards);
    });
  }

  createBoxes() {
    const width = this.scale.width;

    let xPer = 0.25;

    let y = 100;

    for (let row = 0; row < 3; ++row) {
      for (let col = 0; col < 3; ++col) {
        this.boxGroup.get(width * xPer, y, 'cardfront');

        xPer += 0.25;
      }

      xPer = 0.25;

      y += 150;
    }
  }

  /**

        * @param {Phaser.GameObjects.Sprite} cards

        */

  flip(cards) {
    const timeline = this.tweens.timeline();

    timeline.add({
      targets: cards,

      scale: 200,

      duration: 300,
    });
  }
}

//  MAIN>JS

import Phaser from 'phaser';
import Preloader from './scenes/preloader';
import Game from './scenes/game';

const config = {
  type: Phaser.AUTO,
  width: 700,
  height: 500,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 },
    },
  },
  scene: [Preloader, Game],
};

export default new Phaser.Game(config);
2

Change to

const cards = this.boxGroup.getChildren();
3

Hi, I did change it to the const cards = this.boxGroup.getChildren(); , but the click is still not working unfortunately :frowning: Is there anywhere else where I may have gone wrong?

4

Add

timeline.play();
5

Thanks so much! Got it to work!