TS-LOG

프로그래밍/JavaScript 게임 개발

슬라이딩 퍼즐 게임 만들기 #2/4 (타일 이동)

비어 있는 타일 표시 마지막 타일은 비어 있는 타일이므로 모습을 보이지 않도록 처리 합니다. tile.js의 Tile 클래스에 setVisible() 함수를 추가 합니다. 해당 함수가 호출되면 타일의 숫자와, 사각형 그래픽을 감추도록 합니다. //tile.js setVisible(bVisible) { this.numberTxt.visible = bVisible; this.rect.visible = bVisible; } init() 함수의 this.emptyIndex값을 할당하는 코드 아래에서 setVisible() 함수를 호출합니다. // 생략 // 비어 있는 타일 this.emptyIndex = this.TOTAL_CELL - 1; this["tile_" + this.emptyIndex].setVisi..

프로그래밍/JavaScript 게임 개발

슬라이딩 퍼즐 게임 만들기 #1/4 (타일 배치)

"슬라이딩 퍼즐은 타일을 움직여서 순서대로 맞추면 되는 퍼즐 게임 입니다. 숫자의 순서를 맞추거나, 분할한 그림을 맞추게 됩니다. " tile.js 만들기 클래스를 생성할 파일을 따로 생성합니다. 위치는 main.js와 동일하게 src 폴더에 만들겠습니다. Tile 클래스 생성 Tile 클래스는 Pixi.js 의 Container를 상속 받아서 만듭니다. Container 는 Pixi.js 에서 가장 범용적인 클래스 입니다. Sprite 나 Graphics 을 배치 할 수 있습니다. 클래스 이름 그대로 뭔가 담을 수 있는 디스플레이 객체 입니다. import * as PIXI from "pixi.js"; export default class Tile extends PIXI.Container { const..