Jogo da Memória

A carta tem três representações visuais: verso (fundo colorido sem símbolo), frente (símbolo revelado) e par encontrado (destaque verde). O método setState troca entre elas sem recriar o objeto.

// Estados possíveis de uma carta
export const CARD_STATE = {
  HIDDEN:   'hidden',
  REVEALED: 'revealed',
  MATCHED:  'matched'
}

export default class Card {
  constructor(scene, x, y, symbol, id) {
    this.scene  = scene
    this.symbol = symbol   // emoji ou letra do par
    this.id     = id       // índice único na grade
    this.state  = CARD_STATE.HIDDEN
    this.locked = false   // bloqueia clique durante animação

    // ─── Elementos visuais ────────────────────────────────

    // Fundo da carta
    this.bg = scene.add
      .rectangle(x, y, 108, 108, 0x0F6E56)
      .setStrokeStyle(2, 0x085041)
      .setInteractive()      // habilita clique

    // Símbolo (fica invisível enquanto hidden)
    this.label = scene.add
      .text(x, y, symbol, {
        fontSize: '36px',
        fontFamily: 'monospace'
      })
      .setOrigin(0.5)
      .setAlpha(0)  // começa invisível

    // Ícone de verso (fica visível enquanto hidden)
    this.icon = scene.add
      .text(x, y, '?', {
        fontSize: '32px',
        fontFamily: 'monospace',
        color: '#9FE1CB'
      })
      .setOrigin(0.5)
  }

  // Registra o callback de clique vindo da cena
  onClick(callback) {
    this.bg.on('pointerdown', () => {
      if (this.locked || this.state !== CARD_STATE.HIDDEN) return
      callback(this)
    })

    // Feedback visual de hover
    this.bg.on('pointerover',  () => {
      if (this.state === CARD_STATE.HIDDEN) this.bg.setFillStyle(0x1D9E75)
    })
    this.bg.on('pointerout', () => {
      if (this.state === CARD_STATE.HIDDEN) this.bg.setFillStyle(0x0F6E56)
    })
  }

  setState(state) {
    this.state = state
    switch (state) {

      case CARD_STATE.HIDDEN:
        this.bg.setFillStyle(0x0F6E56)
        this.label.setAlpha(0)
        this.icon.setAlpha(1)
        break

      case CARD_STATE.REVEALED:
        this.bg.setFillStyle(0xE1F5EE)
        this.label.setAlpha(1)
        this.icon.setAlpha(0)
        break

      case CARD_STATE.MATCHED:
        this.bg.setFillStyle(0x9FE1CB)
        this.bg.setStrokeStyle(3, 0x1D9E75)
        this.label.setAlpha(1)
        this.icon.setAlpha(0)
        break
    }
  }

  destroy() {
    this.bg.destroy()
    this.label.destroy()
    this.icon.destroy()
  }
}

O CardManager é responsável por três coisas: embaralhar os símbolos (Fisher-Yates shuffle), registrar qual carta foi clicada e comparar dois pares quando o segundo clique acontece.

import { CARD_STATE } from '../objects/Card'

// 8 pares de símbolos — cada um aparece 2 vezes no deck
const SYMBOLS = ['🌻','🍎','🌟','🌎','🚀','⚽','🆕','☕']

export default class CardManager {
  constructor(onMatch, onMismatch, onVictory) {
    this.onMatch    = onMatch      // callback: par correto
    this.onMismatch = onMismatch   // callback: par errado
    this.onVictory  = onVictory    // callback: todos pares encontrados

    this.firstCard  = null  // primeira carta do turno
    this.locked     = false // bloqueia durante a comparação
    this.matchCount = 0    // pares encontrados
    this.moves      = 0    // jogadas realizadas

    // Cria e embaralha o deck: [🌻,🌻,🍎,🍎, ...]
    this.deck = shuffle([...SYMBOLS, ...SYMBOLS])
  }

  // Chamado pela cena quando uma carta é clicada
  handleClick(card, scene) {
    if (this.locked) return

    card.setState(CARD_STATE.REVEALED)

    // ── Primeiro clique do turno ──────────────────────────
    if (!this.firstCard) {
      this.firstCard = card
      return
    }

    // ── Segundo clique: comparar ──────────────────────────
    this.moves++
    const first  = this.firstCard
    const second = card
    this.firstCard = null
    this.locked    = true  // bloqueia novos cliques

    if (first.symbol === second.symbol) {
      // ✔ Par correto
      first.setState(CARD_STATE.MATCHED)
      second.setState(CARD_STATE.MATCHED)
      first.locked  = true
      second.locked = true
      this.matchCount++
      this.locked = false
      this.onMatch(this.moves)

      if (this.matchCount === SYMBOLS.length) {
        this.onVictory(this.moves)
      }
    } else {
      // ✘ Par errado: aguarda 900ms e vira de volta
      scene.time.delayedCall(900, () => {
        first.setState(CARD_STATE.HIDDEN)
        second.setState(CARD_STATE.HIDDEN)
        this.locked = false
        this.onMismatch(this.moves)
      })
    }
  }
}

// Fisher-Yates shuffle: embaralhamento imparcial
function shuffle(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    ;[arr[i], arr[j]] = [arr[j], arr[i]]
  }
  return arr
}

A cena cria as 16 cartas em uma grade 4×4 e instancia o CardManager com os três callbacks. O update() desta cena é mínimo — quase toda a lógica vive nos callbacks de clique.

import Card        from '../objects/Card'
import CardManager from '../systems/CardManager'

export default class MemoryScene extends Phaser.Scene {
  constructor() { super('Game') }

  create() {
    const { width: W, height: H } = this.cameras.main

    // Fundo
    this.add.rectangle(W/2, H/2, W, H, 0x041a14)

    // ─── CardManager com callbacks ────────────────────────
    this.manager = new CardManager(
      (moves) => this.onMatch(moves),
      (moves) => this.onMismatch(moves),
      (moves) => this.showVictory(moves)
    )

    // ─── Grade 4x4 de cartas ─────────────────────────────
    this.cards = []
    const cols = 4, rows = 4
    const cardW = 112, cardH = 112
    const gapX  = 8,  gapY  = 8
    const totalW = cols * cardW + (cols - 1) * gapX
    const totalH = rows * cardH + (rows - 1) * gapY
    const startX = (W - totalW) / 2 + cardW / 2
    const startY = 100

    for (let row = 0; row < rows; row++) {
      for (let col = 0; col < cols; col++) {
        const id  = row * cols + col
        const x   = startX + col * (cardW + gapX)
        const y   = startY + row * (cardH + gapY)
        const sym = this.manager.deck[id]

        const card = new Card(this, x, y, sym, id)

        // Passa o clique ao CardManager
        card.onClick((c) => this.manager.handleClick(c, this))

        this.cards.push(card)
      }
    }

    // ─── HUD ─────────────────────────────────────────────
    this.add.text(W/2, 30, 'Jogo da Memória', {
      fontSize: '20px', fontFamily: 'monospace',
      fontStyle: 'bold', color: '#9FE1CB'
    }).setOrigin(0.5)

    this.movesText = this.add.text(16, H - 36, 'Jogadas: 0', {
      fontSize: '15px', fontFamily: 'monospace', color: '#9FE1CB'
    })

    this.timerText = this.add.text(W - 16, H - 36, '0s', {
      fontSize: '15px', fontFamily: 'monospace', color: '#9FE1CB'
    }).setOrigin(1, 0)

    // ─── Cronômetro ───────────────────────────────────────
    this.elapsed  = 0
    this.gameOver = false

    // Atualiza o cronômetro a cada segundo
    this.time.addEvent({
      delay: 1000,
      loop: true,
      callback: () => {
        if (this.gameOver) return
        this.elapsed++
        this.timerText.setText(this.elapsed + 's')
      }
    })
  }

  onMatch(moves) {
    this.movesText.setText('Jogadas: ' + moves)
  }

  onMismatch(moves) {
    this.movesText.setText('Jogadas: ' + moves)

    // Shake rápido na câmera como feedback de erro
    this.cameras.main.shake(120, 0.004)
  }

  showVictory(moves) {
    this.gameOver = true
    const { width: W, height: H } = this.cameras.main

    // Overlay escuro semitransparente
    this.add.rectangle(W/2, H/2, W, H, 0x000000, 0.65)

    this.add.text(W/2, H/2 - 50, 'Parabéns!', {
      fontSize: '44px', fontFamily: 'monospace',
      fontStyle: 'bold', color: '#9FE1CB'
    }).setOrigin(0.5)

    this.add.text(W/2, H/2 + 10,
      moves + ' jogadas  ·  ' + this.elapsed + 's', {
      fontSize: '20px', fontFamily: 'monospace', color: '#ffffff'
    }).setOrigin(0.5)

    this.add.text(W/2, H/2 + 65,
      'ESPAÇO = jogar de novo', {
      fontSize: '13px', fontFamily: 'monospace', color: '#5DCAA5'
    }).setOrigin(0.5)

    this.input.keyboard
      .addKey('SPACE').on('down', () => this.scene.restart())
  }

  update() {
    // Nada aqui — toda a lógica vive nos callbacks de clique
  }
}

Entender o fluxo de um turno é fundamental para não se perder nos callbacks. Cada jogada completa passa por estas etapas:

// Resumo do fluxo no CardManager:

// Clique 1: apenas salva a referência
if (!this.firstCard) {
  this.firstCard = card
  return                    // espera o segundo clique
}

// Clique 2: compara e decide o destino
this.locked = true           // ninguém mais clica agora

if (first.symbol === second.symbol)  // ✔ par correto
  marcarComoMatched()
  this.locked = false       // libera imediatamente

else                               // ✘ par errado
  aguardar900ms()
  virarDeVolta()
  this.locked = false       // libera após a pausa

O Jogo da Memória também não usa física arcade. O config é simples — apenas adicione a cena à lista.

import { useEffect, useRef } from 'react'
import Phaser from 'phaser'
import BootScene   from './scenes/BootScene'
import MenuScene   from './scenes/MenuScene'
import MemoryScene from './scenes/MemoryScene'

export default function PhaserGame() {
  const divRef = useRef(null)

  useEffect(() => {
    const config = {
      type: Phaser.AUTO,
      width: 560,
      height: 640,
      parent: divRef.current,
      backgroundColor: '#041a14',
      // Sem physics — o jogo é baseado em eventos de clique
      scene: [BootScene, MenuScene, MemoryScene]
    }

    const game = new Phaser.Game(config)
    return () => game.destroy(true)
  }, [])

  return <div ref={divRef} />
}