전회( Angular에서 브라우저 버전 Mine Sweeper를 만들어 보았습니다. )에 이어, Angular 게임 제작 시리즈입니다.

완성된 것

이쪽은 모두 수동으로, 컴퓨터전과 같은 자동 조작은 없습니다.

구현할 수 있는 기능

조각 이동할 수 있는 송어 표시

캐슬링과 폰의 특수 움직임 구현

체크 표시 (킹을 빨간색으로 둘러싼다)

프로모션 메뉴 표시

조각 움직임 애니메이션

구현할 수 없는 기능

무승부 결정 (어려운)

궁리한 점

조각 움직임 규칙 구현

각 조각마다 1개 1개 클래스를 만들고 메서드를 만드는 것은 조금 번거롭기 때문에 PiecesMaster 추상 클래스를 만듭니다.

PiecesMaster

export abstract class PiecesMaster {
    // 方向と距離を決めるオブジェクト
    protected bectorInfo: {
        // 方向
        bectors: {
            file: number,
            rank: number,
        }[],
        // 距離
        infinite: boolean
    };

    protected pieceObjectInfo: Piece;

    constructor(piece: Piece) {
        this.pieceObjectInfo = piece;
        this.setBectorsInfo();
    }

    protected abstract setBectorsInfo();

    public getBectorInfo(){
        return this.bectorInfo;
    }
}

각 조각 유형별 클래스에서 PiecesMaster 클래스를 상속합니다.
감독과 왕의 예를 아래에 적는다.

Bishop

export class Bishop extends PiecesMaster{
    constructor(piece: Piece){
        super(piece);
    }

    // 斜め4方向
    protected setBectorsInfo() {
        const bectors = [
            {
                file: 1,
                rank: 1
            },
            {
                file: 1,
                rank: -1
            },
            {
                file: -1,
                rank: 1
            },
            {
                file: -1,
                rank: -1
            }
        ]

        this.bectorInfo = {
            bectors: bectors,
            // 可能な限り遠くまで動ける
            infinite: true
        };
    }
}

킹

export class King extends PiecesMaster{
    constructor(piece: Piece, bis: BoardInfoService){
        super(piece);
    }

    // 8方向
    protected setBectorsInfo() {
        const bectors = [
            {
                file: 1,
                rank: 0
            },
            {
                file: 1,
                rank: 1
            },
            {
                file: 0,
                rank: 1
            },
            {
                file: -1,
                rank: 1
            },
            {
                file: -1,
                rank: 0
            },
            {
                file: -1,
                rank: -1
            },
            {
                file: 0,
                rank: -1
            },
            {
                file: 1,
                rank: -1
            },
        ]

        this.bectorInfo = {
            bectors: bectors,
            // 1マスのみ進める
            infinite: false
        };
    }
}

각 조각의 Component는 이러한 클래스 중 하나의 인스턴스를 생성하여 자체 이동 규칙을 가질 수 있습니다.

체크 판정

체크의 판정은, 각 조각의 Component(PieceComponent)가, 현재의 반면으로부터 자신의 이동할 수 있는 매스를 판정해, 그것을 체크 판정 서비스(CheckJudger)에 건네주어 판정해 달라고 합니다. 그 결과를 GameMaster에 건네주고, GameMaster가 상대의 킹의 Component에 결과를 알리는 것으로, 킹의 Component 자신이 자신을 빨강으로 둘러싸게 되어 있습니다.


또한, 체스의 규칙상, 조각이 움직인 것으로 자신의 킹이 체크가 되는 것 같은 이동은 금지되어 있으므로, 시스템측이 그것을 불가능하게 해 둘 필요가 있습니다.

이하, 그 움직임의 예. 체크를 막는 손만 움직일 수 있게 되어 있습니다.


어느 조각이 어디로 움직이면 체크가 되어 버리는지를 미리 계산해 둘 필요가 있습니다만, 위의 체크 판정의 처리를 응용합니다.

감상

체스는 마인 스위퍼 이상으로 규칙이 복잡하고 캐슬링이나 언패산 등의 변동이 많기 때문에 모든 것을 구현하는 것이 힘들었습니다. 그들을 모두 새지 않고 혼자 구현할 수 있었던 것은 기적이라고 생각합니다.

여유가 있으면 AI 도입도 해보고 싶습니다. AI 자체는 OSS가 있으므로, 그것을 Angular에 어떻게 포함시키는가가 과제가 될지도 모르겠네요.