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 디자인 패턴

싱글턴 패턴 (Singleton Pattern)

싱글턴 패턴 기본 개념 싱글턴 패턴은 특정 클래스의 인스턴스를 하나만 생성하고 해당 인스턴스를 전역적으로 접근하게 해주는 것이다. 여기서 특정 클래스란 개발하는 주체에 유일하게 하나만 존재하는 자원이나 기능을 말한다. 예를 들어 마우스 컨트롤러나 파일이나 이미지 로더가 대표적인 예시다. 마우스를 제어하거나 파일 또는 이미지 로드하는 것은 전역적으로 사용되는 기능이다. 만약 그때마다 새 인스턴스를 생성한다면 이것은 자원 낭비다. 즉 싱글턴 패턴은 유일무이한 기능을 가진 하나만 존재하는 인스턴스이며 해당 인스턴스를 전역적으로 접근 보장해 주는 패턴이다. 싱글턴 패턴 구현 자바스크립트에서 싱글턴은 여러 방법으로 구현할 수 있다. 다음은 파일명을 지정하고 로드 세이브를 하는 파일매니저를 싱글턴 패턴으로 구현한 ..

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