TS-LOG

프로그래밍/JavaScript 게임 개발

슬라이딩 퍼즐 게임 만들기 #4/4 (완성 및 리팩토링)

정답 확인 함수 생성 타일 객체는 answerIndex 와 currentIndex 변수를 가지고 있다. answerIndex는 init() 함수에서 타일 생성시 for문의 i값을 넣어주고 있는데 이 값이 자신의 정위치 인덱스 값이다. currentIndex는 현재 타일의 인덱스 값이므로 answerIndex와 currentIndex의 값이 동일하다면 해당 타일은 정위치에 있다고 볼 수 있다. 위 조건으로 모든 타일이 정위치에 있는지 체크 하는 함수를 하나 만들었다. 함수명은 checkAnswer 이다. 로직은 단순하다. bClear 란 이름의 boolean 타입 변수를 선언한다. 디폴트 값은 true 이다. 그 다음 for문에서는 각 타일이 정위치 인지 판단한다. 만약 하나라도 정위치가 아니라면 for문..

프로그래밍/JavaScript 게임 개발

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

셔플 조건 타일의 움직임을 구현했으니 이제 섞기(Shuffle)을 구현할 차례이다. 언뜻 생각하면 타일의 순서를 아무렇게나 섞으면 될것 같지만 그렇게 하면 안 된다. 슬라이딩 퍼즐은 다음과 같은 조건이 있다. 출처는 나무위키다. NxN의 형태로 배치하였고, '자신보다 큰 수가 자신의 앞에 있는 개수'의 합계가 I이며, 빈 칸에 해당하는 X가 있을 떄 다음과 같다. N이 홀수, I가 짝수이면 풀 수 있는 배치. N이 짝수, X가 맨 아래 짝수 칸, I가 홀수이면 풀 수 있는 배치. N이 짝수, X가 맨 아래 홀수 칸, I가 짝수이면 풀 수 있는 배치. 그 외에는 전부 불가능. 정말로 불가능한지 테스트 해보자. 아래와 같이 코드를 수정하여 타일 순서를 의도적으로 바꿔 진행해 본다. testArr 배열을 하나..

프로그래밍/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..