XELF개발자모드를 활용한 SPACE CROSSWORD 제작 가이드

개발자 모드로 콘텐츠를 만들어볼까요?

저번 포스팅에서는 개발자 모드를 통해 방탈출 게임을 제작하는 방법에 대해 설명해드렸는데요.
http://blog.xelf.io/?p=1171

이번 포스팅에서는 개발자 모드에서 스크립트 코드를 추가해 SPACE CROSSWORD 게임을 제작하는 방법에 대해 알려드리겠습니다.

 

 

 

 

 

 

 

 

SPACE CROSSWORD

SPACE CROSSWORD는 낱말 가로세로 퍼즐을 모티브로 하여 만든 게임으로 두개의 스테이지로 나누어져 있으며 해당 문제에 정답을 입력하고 모두 정답을 맞추게 되면 행성을 정복하는 스토리의 게임입니다.

https://xelf.io/land/73556af8-776b-40e8-a54e-1576dda6da4c

설명드릴 중심적인 개발 기능은 다음과 같습니다.

  • 페이지 UI Custom

 

▶ 페이지 UI Custom


변수를 설정하기 전 데이터 입력을 보여드리겠습니다.

퍼즐을 선택하면 해당 퍼즐마다 문제가 다르기 때문에 퍼즐 문제에 관련된 데이터를 직접 넣었습니다.

이후 onPageEvent에서 setGlobalData를 통해 다른 페이지에서 사용할 수 있도록 데이터를 넣어 줍니다.

퍼즐 퀴즈 리스트 각각의 구성은 각 데이터 오른쪽의 주석으로 되어있는 설명을 참고해주세요.

Custom UI을 사용하기 위한 변수와 내용은 다음과 같습니다.

Tip

커스텀으로 만든 UI는 디자인모드에서 만든 Element 오브젝트가 아닌 개발로 직접 그리는 UI이기 때문에 직접 CSS를 설정을 해주어야 합니다.

Custom UI를 세팅하는 함수를 보겠습니다.

getPageCustomUiAreaElement API는 직접 만든 UI를 그릴 수 있는 영역의 Element를 가져오게 됩니다.

그릴 수 있는 영역을 가져 온 뒤 generateUniqueObjectId API를 이용해 Custom UI만이 가질 수 있는 고유 Id를 생성시켜 주고 document.createElement(input) 하여 기본 Input Element를 만들어 줍니다.

setAttribute를 통해 방금 만들어 두었던 고유 Id와 필요한 Attribute를 세팅하고 만들어진 Custom UI가 세팅이 완료 되었다면 UI를 그릴 수 있는 영역의 Element를 담아 두었던 _thisPageCustomUiAreaElement에 appendChild를 통해 Input Element를 붙여 줍니다.

Tip

커스텀 UI는 디자인 모드를 이용하여 오브젝트를 만든것이 아닌 개발자 모드를 통해 만든 것이기 때문에 jQuery API를 통해 변수에 만들어 두었던 CSS를 Element에 입혀줍니다.

이제 사용자 편의를 위해 키 이벤트 중 Enter키 이벤트를 추가해 보도록 하겠습니다.

키 이벤트의 경우 document에 keydown 이벤트를 addEventListener하였습니다.

이 경우 원하는 때에만 키 이벤트가 발생 되는것이 아니기 때문에 위의 코드와 같이 조건문을 통해 true일 경우에만 함수가 실행되도록 만들었습니다.

조건문에는 파라미터로 받은 event의 keyCode가 Enter키의 번호인 13일경우 그리고 customUiInfo.isOpenInput 즉 Coustom UI가 오픈되었을 경우에만 이라는 조건을 걸었습니다.

다음은 정답 처리 코드를 살펴보겠습니다.

사용자가 입력한 정답은 Custom UI를 만들며 변수에 넣어 두었던 Element에서 value값을 가져와 현재 선택된 낱말 퀴즈의 정답과 비교를 합니다.

정답이 맞을 시에는 현재 퀴즈가 풀렸다는 isSolveAnswer를 true로 만들어 주고 더이상 정답을 맞추지 못하도록 입력 창을 막는 영역을 CSS로 display: block 시켜줍니다.

그리고 정답을 맞출 때마다 체크하여 모든 낱말들이 채워졌을때를 체크하여 모두 맞춘경우 Clear팝업을 띄워주게 됩니다.

지금까지 XELF의 개발자 모드를 이용한 SPACE CROSSWORD 게임 개발코드 설명이었는데요.

완성된 콘텐츠는 재사용하여 자유롭게 수정이 가능하니 지금 바로 원하는 콘텐츠 제작에 도전해보세요!