Chess Lab #5 — Kéo-thả quân & animation di chuyển mượt

Bốn bài qua, demo của ta là một bàn cờ "đẹp nhưng câm". Bài này, mỗi nước trong đầu bạn được thực thi: kéo Tốt e2 lên e4, Mã g1 ra f3, Tượng… và cả ván cờ Sicilian mở màn nhỏ trên trang anhtu.dev. Click cũng chơi được — chọn quân, click ô đích, đi.

Mở rộng adapter: tryMove

tryMove(from: Square, to: Square, promotion: PieceSymbol = "q"): Move | null {
  try {
    return this.game.move({ from, to, promotion }) as Move;
  } catch {
    return null;
  }
}

chess.js v1 ném exception khi nước không hợp lệ — try/catch quy đổi thành null cho call site dễ dùng. promotion: 'q' mặc định — nếu Tốt sang hàng cuối, tự phong Hậu. Bài 6 thay bằng modal cho người chơi chọn.

Bật draggable trên pieces

Trong drawPieces, sau khi tạo Text:

piece.setInteractive({ useHandCursor: true, draggable: true });
piece.setData("square", square);
this.pieces.set(square, piece);

setData("square", …) lưu ô gốc của quân ngay trên GameObject — khi sự kiện drag bắn về ta đọc lại bằng piece.getData("square"). Tránh phải duy trì map ngược "GameObject → Square" tay.

Đăng ký 3 listener trong create:

this.input.on("dragstart", this.handleDragStart, this);
this.input.on("drag", this.handleDrag, this);
this.input.on("dragend", this.handleDragEnd, this);

Drag handler

Đây là nơi nhiều thứ phải khớp tay đúng nhịp:

private handleDragStart(_, gameObject) {
  const piece = gameObject as Phaser.GameObjects.Text;
  const from = piece.getData("square") as Square;

  const owner = this.chess.pieceAt(from);
  if (!owner || owner.color !== this.chess.turn()) {
    // Không phải lượt — huỷ drag.
    this.input.setDragState(_, 0);
    return;
  }

  this.dragging = true;
  this.selectSquare(from);              // hiện chấm xanh / vòng đỏ trong khi drag
  piece.setDepth(DEPTH_DRAGGING);       // nâng lên trên mọi quân khác
}

private handleDrag(_, gameObject, dragX, dragY) {
  (gameObject as Phaser.GameObjects.Text).setPosition(dragX, dragY);
}

private handleDragEnd(pointer, gameObject) {
  this.dragging = false;
  const piece = gameObject as Phaser.GameObjects.Text;
  const from = piece.getData("square") as Square;
  const to = this.pixelToSquare(pointer.x, pointer.y);
  const legal = to ? this.chess.legalMoves(from).some(m => m.to === to) : false;

  if (legal && to) {
    this.clearSelection();
    const target = this.squarePixel(to);
    this.tweens.add({
      targets: piece, x: target.x, y: target.y - 2,
      duration: 140, ease: "Cubic.Out",
      onComplete: () => this.applyMove(from, to, false),
    });
  } else {
    // Drop sai → tween về ô gốc.
    const home = this.squarePixel(from);
    this.tweens.add({
      targets: piece, x: home.x, y: home.y - 2,
      duration: 180, ease: "Cubic.Out",
      onComplete: () => piece.setDepth(DEPTH_PIECE),
    });
    this.clearSelection();
  }
}

Bốn DEPTH_* là Z-order khi vẽ — DEPTH_DRAGGING = 10 cao hơn DEPTH_PIECE = 2 đảm bảo quân đang kéo luôn nằm trên quân khác (đi qua quân địch trên đường kéo).

applyMove: tween + resync

private applyMove(from: Square, to: Square, clickFlow: boolean): void {
  const move = this.chess.tryMove(from, to);
  if (!move) { this.drawPieces(); return; }

  if (clickFlow) {
    // Click flow chưa có tween → tween nhanh trước khi resync.
    const piece = this.pieces.get(from);
    if (piece) {
      const target = this.squarePixel(to);
      piece.setDepth(DEPTH_DRAGGING);
      this.tweens.add({
        targets: piece, x: target.x, y: target.y - 2,
        duration: 140, ease: "Cubic.Out",
        onComplete: () => this.drawPieces(),
      });
      return;
    }
  }
  this.drawPieces();
}

Quan trọng: sau mỗi nước thành công, gọi drawPieces() để fully redraw từ chess.js state. Lý do: một nước có thể đổi nhiều ô:

• Capture thường: quân ở ô đến biến mất.
• En-passant: quân bị bắt nằm ở ô khác, không phải ô đến.
• Nhập thành: vua đi 2 ô + xe nhảy qua. Cần update 2 quân.
• Promotion: Tốt biến thành Hậu — Text glyph phải đổi.

Quản lý từng case bằng tay là rước nợ. Chess.js đã đúng — copy nó về UI.

Click-to-move

Vẫn giữ click pattern bài 4, thêm một nhánh "click ô đích để đi":

if (this.selected) {
  const legal = this.chess.legalMoves(this.selected).some(m => m.to === square);
  if (legal) {
    const from = this.selected;
    this.clearSelection();
    this.applyMove(from, square, true);   // clickFlow = true
    return;
  }
  // ... đổi quân hoặc bỏ chọn như bài 4
}

Phaser bắn pointerdown trước khi dragstart, nhưng nếu pointer di chuyển vài px sau đó thì dragstart lên ngay. Field dragging được set trong handleDragStart và check ngay đầu handlePointer — đảm bảo click-flow và drag-flow không giẫm chân nhau.

Bẫy hay gặp

Bài tập

1. Thêm âm thanh "click" rất ngắn khi quân đặt xuống ô (sau tween snap). Gợi ý: tạm thời dùng new Audio("data:audio/...") inline. Bài 13 sẽ nâng cấp lên Phaser sound manager đúng chuẩn.
2. Đặt keyboard?.on("keydown-Z", () => …) để undo nước cuối — gợi ý: thêm method undo() cho adapter wrap game.undo(). Sau undo, gọi drawPieces() resync.
3. Thí một ván Sicilian Najdorf 6 nước đầu, nhấn F sau nước 3 để đổi phía. Có hint nào sai vị trí không? (Test cho bẫy 3 ở bài 4 + revert trong bài này.)

Bài tiếp theo

Bài 6 — Luật đặc biệt: phong cấp, nhập thành, en-passant: modal chọn quân phong cấp khi Tốt vào hàng 8, animate đồng thời vua + xe khi nhập thành, highlight đặc biệt cho en-passant. Sau bài 6, mọi luật cờ đã được tôn trọng từ phía UI — không còn case nào "chess.js đúng mà demo trông sai".