Phaser Baduk Metaverse 프로젝트의 Phaser.js 게임 엔진 구현에 대해 설명합니다.

Phaser.js는 HTML5 게임 개발을 위한 JavaScript 프레임워크로, 바둑 게임의 시각적 요소와 인터랙션을 구현합니다.

메인 게임 파일 (game.js):

import Phaser from 'phaser';
import BadukScene from './scenes/BadukScene';
import MenuScene from './scenes/MenuScene';
 
const config = {
    type: Phaser.AUTO,
    width: 1200,
    height: 800,
    parent: 'game-container',
    backgroundColor: '#2c3e50',
    scene: [MenuScene, BadukScene],
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false
        }
    },
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    }
};
 
const game = new Phaser.Game(config);
export default game;

메뉴 씬 (MenuScene.js):

import Phaser from 'phaser';
 
export default class MenuScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MenuScene' });
    }
 
    preload() {
        // 메뉴 배경 및 버튼 이미지 로드
        this.load.image('menu-bg', 'assets/menu-background.png');
        this.load.image('play-button', 'assets/play-button.png');
        this.load.image('settings-button', 'assets/settings-button.png');
    }
 
    create() {
        // 배경 설정
        this.add.image(600, 400, 'menu-bg');
 
        // 제목 텍스트
        this.add.text(600, 200, '바둑 메타버스', {
            fontSize: '48px',
            fill: '#ffffff',
            fontFamily: 'Arial'
        }).setOrigin(0.5);
 
        // 플레이 버튼
        const playButton = this.add.image(600, 350, 'play-button')
            .setInteractive();
 
        playButton.on('pointerdown', () => {
            this.scene.start('BadukScene');
        });
 
        // 설정 버튼
        const settingsButton = this.add.image(600, 450, 'settings-button')
            .setInteractive();
 
        settingsButton.on('pointerdown', () => {
            // 설정 씬으로 이동
            console.log('설정 메뉴 열기');
        });
    }
}

바둑 게임 씬 (BadukScene.js):

import Phaser from 'phaser';
import BadukBoard from '../sprites/BadukBoard';
import BadukStone from '../sprites/BadukStone';
 
export default class BadukScene extends Phaser.Scene {
    constructor() {
        super({ key: 'BadukScene' });
        this.board = null;
        this.stones = [];
        this.currentPlayer = 'black'; // 'black' 또는 'white'
    }
 
    preload() {
        // 바둑판과 돌 이미지 로드
        this.load.image('board', 'assets/baduk-board.png');
        this.load.image('black-stone', 'assets/black-stone.png');
        this.load.image('white-stone', 'assets/white-stone.png');
        this.load.image('grid', 'assets/grid-lines.png');
    }
 
    create() {
        // 바둑판 생성
        this.board = new BadukBoard(this, 600, 400);
 
        // 그리드 라인 추가
        this.add.image(600, 400, 'grid');
 
        // 클릭 이벤트 설정
        this.input.on('pointerdown', (pointer) => {
            this.handleBoardClick(pointer);
        });
 
        // 플레이어 표시
        this.createPlayerIndicator();
    }
 
    handleBoardClick(pointer) {
        const boardX = pointer.x - 600;
        const boardY = pointer.y - 400;
 
        // 바둑판 좌표로 변환
        const gridX = Math.round(boardX / 40);
        const gridY = Math.round(boardY / 40);
 
        // 유효한 위치인지 확인
        if (this.isValidMove(gridX, gridY)) {
            this.placeStone(gridX, gridY);
        }
    }
 
    isValidMove(x, y) {
        // 바둑판 범위 내인지 확인
        if (x < 0 || x > 18 || y < 0 || y > 18) {
            return false;
        }
 
        // 이미 돌이 놓인 위치인지 확인
        return !this.stones.some(stone => 
            stone.gridX === x && stone.gridY === y
        );
    }
 
    placeStone(x, y) {
        const stoneImage = this.currentPlayer === 'black' ? 'black-stone' : 'white-stone';
        const stone = new BadukStone(this, x, y, this.currentPlayer);
 
        this.stones.push(stone);
 
        // 플레이어 변경
        this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
 
        // UI 업데이트
        this.updatePlayerIndicator();
 
        // 서버에 이동 전송
        this.sendMoveToServer(x, y, this.currentPlayer);
    }
 
    createPlayerIndicator() {
        this.playerText = this.add.text(50, 50, '현재 플레이어: 흑돌', {
            fontSize: '24px',
            fill: '#ffffff'
        });
    }
 
    updatePlayerIndicator() {
        const playerName = this.currentPlayer === 'black' ? '흑돌' : '백돌';
        this.playerText.setText(`현재 플레이어: ${playerName}`);
    }
 
    sendMoveToServer(x, y, player) {
        // Socket.IO를 통해 서버에 이동 전송
        if (window.socket) {
            window.socket.emit('move', {
                x: x,
                y: y,
                player: player,
                gameId: this.gameId
            });
        }
    }
}

바둑판 스프라이트 (BadukBoard.js):

import Phaser from 'phaser';
 
export default class BadukBoard extends Phaser.GameObjects.Sprite {
    constructor(scene, x, y) {
        super(scene, x, y, 'board');
 
        this.setOrigin(0.5);
        this.setInteractive();
 
        // 바둑판 크기 설정
        this.setScale(1.0);
 
        // 그리드 좌표 시스템
        this.gridSize = 40;
        this.boardSize = 19; // 19x19 바둑판
    }
 
    // 그리드 좌표를 픽셀 좌표로 변환
    gridToPixel(gridX, gridY) {
        const pixelX = this.x + (gridX - 9) * this.gridSize;
        const pixelY = this.y + (gridY - 9) * this.gridSize;
        return { x: pixelX, y: pixelY };
    }
 
    // 픽셀 좌표를 그리드 좌표로 변환
    pixelToGrid(pixelX, pixelY) {
        const gridX = Math.round((pixelX - this.x) / this.gridSize) + 9;
        const gridY = Math.round((pixelY - this.y) / this.gridSize) + 9;
        return { x: gridX, y: gridY };
    }
}

바둑돌 스프라이트 (BadukStone.js):

import Phaser from 'phaser';
 
export default class BadukStone extends Phaser.GameObjects.Sprite {
    constructor(scene, gridX, gridY, color) {
        const imageKey = color === 'black' ? 'black-stone' : 'white-stone';
        const { x, y } = scene.board.gridToPixel(gridX, gridY);
 
        super(scene, x, y, imageKey);
 
        this.gridX = gridX;
        this.gridY = gridY;
        this.color = color;
 
        this.setOrigin(0.5);
        this.setScale(0.8);
 
        // 애니메이션 효과
        this.setScale(0);
        scene.tweens.add({
            targets: this,
            scaleX: 0.8,
            scaleY: 0.8,
            duration: 200,
            ease: 'Back.easeOut'
        });
 
        scene.add.existing(this);
    }
 
    // 돌 제거 (착수)
    remove() {
        this.scene.tweens.add({
            targets: this,
            scaleX: 0,
            scaleY: 0,
            duration: 150,
            ease: 'Back.easeIn',
            onComplete: () => {
                this.destroy();
            }
        });
    }
}

실시간 통신 설정:

// game.js에서 Socket.IO 연결
import io from 'socket.io-client';
 
const socket = io('http://localhost:3000');
 
socket.on('connect', () => {
    console.log('서버에 연결되었습니다.');
});
 
socket.on('game-update', (data) => {
    // 다른 플레이어의 이동 처리
    if (data.player !== currentPlayer) {
        scene.placeStoneFromServer(data.x, data.y, data.player);
    }
});
 
socket.on('game-start', (data) => {
    console.log('게임이 시작되었습니다.');
    scene.startGame(data.gameId);
});
 
// 전역에서 접근 가능하도록 설정
window.socket = socket;

게임 UI 컴포넌트:

export default class GameUI {
    constructor(scene) {
        this.scene = scene;
        this.createUI();
    }
 
    createUI() {
        // 패스 버튼
        this.passButton = this.scene.add.text(50, 150, '패스', {
            fontSize: '20px',
            fill: '#ffffff',
            backgroundColor: '#e74c3c',
            padding: { x: 10, y: 5 }
        }).setInteractive();
 
        this.passButton.on('pointerdown', () => {
            this.handlePass();
        });
 
        // 항복 버튼
        this.surrenderButton = this.scene.add.text(50, 200, '항복', {
            fontSize: '20px',
            fill: '#ffffff',
            backgroundColor: '#c0392b',
            padding: { x: 10, y: 5 }
        }).setInteractive();
 
        this.surrenderButton.on('pointerdown', () => {
            this.handleSurrender();
        });
 
        // 점수 표시
        this.scoreText = this.scene.add.text(50, 250, '점수: 0 - 0', {
            fontSize: '18px',
            fill: '#ffffff'
        });
    }
 
    handlePass() {
        // 패스 처리
        if (window.socket) {
            window.socket.emit('pass', {
                gameId: this.scene.gameId,
                player: this.scene.currentPlayer
            });
        }
    }
 
    handleSurrender() {
        // 항복 처리
        if (window.socket) {
            window.socket.emit('surrender', {
                gameId: this.scene.gameId,
                player: this.scene.currentPlayer
            });
        }
    }
 
    updateScore(blackScore, whiteScore) {
        this.scoreText.setText(`점수: ${blackScore} - ${whiteScore}`);
    }
}

바둑 규칙 구현:

export default class BadukRules {
    constructor() {
        this.board = Array(19).fill().map(() => Array(19).fill(null));
        this.capturedStones = { black: 0, white: 0 };
    }
 
    // 돌 놓기
    placeStone(x, y, color) {
        if (this.isValidMove(x, y, color)) {
            this.board[y][x] = color;
 
            // 착수 확인
            const captured = this.checkCapture(x, y, color);
            this.capturedStones[color] += captured;
 
            return true;
        }
        return false;
    }
 
    // 유효한 이동인지 확인
    isValidMove(x, y, color) {
        if (x < 0 || x >= 19 || y < 0 || y >= 19) {
            return false;
        }
 
        if (this.board[y][x] !== null) {
            return false;
        }
 
        // 자충 확인
        this.board[y][x] = color;
        const hasLiberties = this.hasLiberties(x, y);
        this.board[y][x] = null;
 
        return hasLiberties;
    }
 
    // 자유도 확인
    hasLiberties(x, y) {
        const color = this.board[y][x];
        const visited = new Set();
 
        return this.checkGroupLiberties(x, y, color, visited);
    }
 
    checkGroupLiberties(x, y, color, visited) {
        const key = `${x},${y}`;
        if (visited.has(key)) return false;
        visited.add(key);
 
        // 상하좌우 확인
        const directions = [[0, 1], [0, -1], [1, 0], [-1, 0]];
 
        for (const [dx, dy] of directions) {
            const nx = x + dx;
            const ny = y + dy;
 
            if (nx < 0 || nx >= 19 || ny < 0 || ny >= 19) {
                continue;
            }
 
            if (this.board[ny][nx] === null) {
                return true; // 자유도 발견
            }
 
            if (this.board[ny][nx] === color) {
                if (this.checkGroupLiberties(nx, ny, color, visited)) {
                    return true;
                }
            }
        }
 
        return false;
    }
 
    // 착수 확인
    checkCapture(x, y, color) {
        const directions = [[0, 1], [0, -1], [1, 0], [-1, 0]];
        let captured = 0;
 
        for (const [dx, dy] of directions) {
            const nx = x + dx;
            const ny = y + dy;
 
            if (nx < 0 || nx >= 19 || ny < 0 || ny >= 19) {
                continue;
            }
 
            const opponentColor = color === 'black' ? 'white' : 'black';
 
            if (this.board[ny][nx] === opponentColor) {
                if (!this.hasLiberties(nx, ny)) {
                    captured += this.removeGroup(nx, ny);
                }
            }
        }
 
        return captured;
    }
 
    // 그룹 제거
    removeGroup(x, y) {
        const color = this.board[y][x];
        if (!color) return 0;
 
        let count = 0;
        const stack = [[x, y]];
 
        while (stack.length > 0) {
            const [cx, cy] = stack.pop();
 
            if (this.board[cy][cx] === color) {
                this.board[cy][cx] = null;
                count++;
 
                const directions = [[0, 1], [0, -1], [1, 0], [-1, 0]];
                for (const [dx, dy] of directions) {
                    const nx = cx + dx;
                    const ny = cy + dy;
 
                    if (nx >= 0 && nx < 19 && ny >= 0 && ny < 19) {
                        if (this.board[ny][nx] === color) {
                            stack.push([nx, ny]);
                        }
                    }
                }
            }
        }
 
        return count;
    }
}

• 바둑 게임 로직
• UI/UX 구현
• Socket.IO 실시간 통신

— 이 페이지는 자동으로 생성되었습니다.