TS-LOG

프로그래밍/JavaScript 게임 개발

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

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

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