Angular Chess AI Implementation Issue with Piece Movement

Other Questions ai employee
1

Chess AI Problem with Angular Integration

I’m building a chess application using Angular and running into some trouble with the AI functionality. The main issue is that when I try to implement the computer player, the chess pieces get stuck to the mouse cursor and won’t drop properly.

I’m using the chess.js library for game logic and chessboard.js for the visual board. The problem seems to be that most AI examples are written with jQuery, but I need to make it work with Angular.

When I comment out these event handlers, the basic game works but the AI stops functioning:

  • onDrop
  • onMouseoutSquare
  • onMouseoverSquare
  • onSnapEnd

I keep getting an error that says “Cannot read property ‘moves’ of undefined” which suggests there’s a scope issue with the game object.

import { Component, OnInit } from '@angular/core';
import * as GameBoard from 'chessboardjs/www/js/chessboard';
declare var $: any;
declare var GameBoard: any;
declare var ChessEngine: any;

@Component({
  selector: 'app-game',
  templateUrl: './game.component.html',
  styleUrls: ['./game.component.scss']
})
export class GameComponent implements OnInit {
  chessBoard: any;
  chessGame: any;
  aiDifficulty = 2;

  ngOnInit() {
    this.setupGame();
    this.chessGame = new ChessEngine();
    
    let boardConfig = {
      orientation: 'white',
      draggable: true,
      position: 'start',
      moveSpeed: 'fast',
      onDrop: this.handlePieceDrop.bind(this),
      onDragStart: this.handleDragStart.bind(this)
    };
    
    this.chessBoard = new GameBoard('game-board', boardConfig);
  }

  handlePieceDrop(fromSquare, toSquare) {
    let playerMove = this.chessGame.move({
      from: fromSquare,
      to: toSquare,
      promotion: 'q'
    });
    
    if (playerMove === null) { 
      return 'snapback'; 
    }
    
    setTimeout(() => this.makeComputerMove(), 300);
  }

  makeComputerMove() {
    let bestMove = this.findBestMove();
    this.chessGame.move(bestMove);
    this.chessBoard.position(this.chessGame.fen());
  }

  findBestMove() {
    let possibleMoves = this.chessGame.moves();
    let topMove = -9999;
    let selectedMove;
    
    for (let move of possibleMoves) {
      this.chessGame.move(move);
      let score = this.evaluatePosition(this.aiDifficulty, -10000, 10000, false);
      this.chessGame.undo();
      
      if (score >= topMove) {
        topMove = score;
        selectedMove = move;
      }
    }
    return selectedMove;
  }
}

How can I properly bind the chess AI logic to work with Angular’s component architecture without the pieces getting stuck?

2

Had the exact same issue migrating a chess AI from vanilla JS to Angular. The problem is chessboard.js wants direct DOM control, but Angular handles component lifecycle differently. Here’s what fixed it for me: wrap your chessboard setup in ngAfterViewInit, not ngOnInit. Make sure the DOM element actually exists before you try binding to it. Also, you’re using ChessEngine but most examples use Chess() from the chess.js library - that might be part of your problem. For the scope issue, store your chess instance as a class property and reference it the same way everywhere. That ‘moves of undefined’ error happens when the game state gets lost between function calls. Double-check that handlePieceDrop is properly bound and your chess instance is ready before any board interactions happen. Using ViewChild to grab the board element and getting the initialization order right in Angular’s lifecycle hooks completely solved my sticky cursor problem.