phaser 로 구현해 보는 콘웨이의 생명게임

존 호턴 콘웨이 교수님의 명복을 빕니다.

John Horton Conway, 1937년 12월 26일 ~ 2020년 4월 11일

라이프 게임(Life of Game) 이란

규칙

1. 죽은 칸과 인접한 8칸 중 정확히 3칸에 세포가 살아 있다면 해당 칸의 세포는 그 다음 세대에 살아난다.
2. 살아있는 칸과 인접한 8칸 중 2칸 혹은 3칸에 세포가 살아 있다면 해당 칸의 세포는 살아있는 상태를
   유지한다.
3. 그 이외의 경우 해당 칸의 세포는 다음 세대에 고립돼 죽거나 혹은 주위가 너무 복잡해져서 죽는다.
   혹은 죽은 상태를 유지한다.

표로 정리하면 다음과 같습니다.

코드로 옮기기

phaser scene system

전체 코드는 여기를 참조 하세요.
https://github.com/q_lazzarus/lifegame

먼저 phaser 의 scene 시스템을 이해해야 합니다.

typescript
Copy
1class MainScene extends Phaser.Scene {
2    constructor() {
3        super(SCENE_KEY);
4    }
5
6    public init(): void {
7        // init
8    }
9
10    public preload(): void {
11        // preload
12    }
13
14    public create(): void {
15        // create
16    }
17
18    public update(): void {
19        // update
20    }
21}

각 메쏘드는 다음의 내용을 정의 합니다.

실행 순서는 정리하자면 다음과 같습니다.

scene 메쏘드 실행 순서

최초 세포 생성 해봅시다.

typescript
Copy
1    public create(): void {
2        this.generation = 1; // 현재 세대를 정의
3        Array.from(Array(this.stageSize).keys()).forEach(index => {
4            // 각 픽셀단위로 cell 클래스를 생성하였습니다.
5            // 해당 셀은 위치값과 live/dead 를 표기하는 값만 가집니다.
6            this.cells.push(new Cell(this.numberToPosition(index)));
7        });
8
9        // this.nextGeneration 메쏘드를 타이머로 반복하게 실행하도록 하였습니다.
10        this.timer = this.time.addEvent({
11            delay: GameConfig.DELAY_INTERVAL,
12            callback: this.nextGeneration,
13            callbackScope: this,
14            loop: true
15        });
16    }

세포들을 계속 그려줍시다.

graphics property 는 프리젠테이션 레이어입니다.

이러면 코드상에서는 조작하는 부분과 UI 그리는 부분을 따로 제어할 수 있습니다.

typescript
Copy
1    public update(): void {
2        // 그려진 모든 버퍼를 지웁니다.
3        this.graphics?.clear();
4        this.cells.forEach(cell => {
5            // 생존한 cell 들만 그려줍니다.
6            cell.active && this.graphics?.fillRectShape(cell)
7        });
8    }

게임 규칙을 정의합니다.

typescript
Copy
1    private nextGeneration(): void {
2        this.generation++; // 현재 세대를 정의
3        Array.from(Array(this.stageSize).keys()).forEach(index => {
4            // 이전 세대에서 살아남았는지
5            const active = this.cells[index].active;
6            // 주변 세포들이 존재하는지 판단해서 점수를 매깁니다.
7            const score = this.neighborScore(index);
8
9            // 점수에 따른 세포들의 생존 유무
10            if (active && (2 > score || 3 < score)) {
11                this.cells[index].active = false;
12            } else if (!active && 3 == score) {
13                this.cells[index].active = true;
14            }
15        });
16    }

이제 실행해봅니다!

우와 대박

오늘도 고생하셨습니다.