4. 숫자야구 게임 앱을 만들어 봅시다!

 

안녕하세요, 스포어 회원 여러분.

드디어!!! 앱에 들어갈 기능을 제작할 수 있겠네요.

 

3회때 사이트명으로 프로젝트 폴더를 생성한 건 신경쓰지 맙시다(...)

언젠간 쓸거니까 그대로 놔두고 프로젝트 하나 더 생성합시다!ㅠ

 

 

 

 

1. 프로젝트 생성하기

3회 때의 내용을 참고하셔서, numberBaseApp 이라는 프로젝트를 생성합시다.

 

 

 

 

 

2. Cordova 파일 구조 이해하기

Cordova에서 주로 사용되는 폴더들은 res, www, plugins 입니다.

 

1. res/icon 폴더는 앱이 설치되었을 때 표시될 아이콘을 모아둔 폴더입니다.

우리는 안드로이드 앱을 개발하므로, res/icon/android 폴더 내의 파일만 수정하면 되지만,

만약 다른 플랫폼도 사용해 볼 예정이라면, 각 플랫폼의 아이콘을 수정해 주시면 됩니다.

 

2. res/screen 폴더는 앱을 사용자가 실행하면, 우리가 작성한 코드를 보여주기 전에 띄울 이미지를 모아둔 폴더입니다.

보통 그런 이미지를 스플래쉬 이미지라고 하며, 해당 기능은 이후에 Cordova Plugin을 설정해야 사용할 수 있습니다.

 

3. www 폴더는 앱을 실행하면 보여질 메인 코드가 포함된 폴더입니다.

해당 폴더 내에 있는 index.html 파일을 불러올 것이며, 해당 파일에서는 www 폴더 내의 CSS/JS를 사용할 수 있습니다.

 

4. plugins 폴더는 위에서 언급한 Cordova Plugin이 설치되는 폴더로, 직접 수정할 내용은 별로 없는 폴더입니다.

다만, 더욱 많은 기능을 구현하고 싶을 경우, 외부의 플러그인들을 다운로드 받아 이곳에 압축해제 할 수 있습니다.

 

4-1. 프로젝트 생성 도중 뜨는 노란색 글씨(3회에서 무시가능으로 표시한 내용)은 cordova-plugin-whitelist의 충돌로 인해 일어납니다.

안드로이드 버전과 whitelist 플러그인의 충돌 때문으로 판단되나, 강좌 도중 해결이 필요하다면 따로 강좌하겠습니다.

 

 

 

 

3. 숫자야구 게임이란?

이걸 본 강좌에서 설명을 해야 하는지는 모르겠으나, 코드 작성시 도움이 된다 생각해 작성합니다.

 

1. 숫자야구 게임은 플레이어가 2명입니다.

2. 플레이어들은 각자 N자리의 숫자를 설정해야 하며, 상대방이 설정한 숫자를 맞추는 것이 승리 조건입니다.

3. 각 플레이어는 번갈아가며 예상 숫자를 상대에게 묻습니다.

4. 질문을 받은 플레이어는 예상 숫자와 설정 숫자의 관계를 아래의 규칙에 따라 답합니다.

 

 

 

 

4. HTML/CSS 구조 잡기 (INDEX.HTML)

HTML과 CSS의 구조를 잡겠습니다. JS는 다음 강좌에서...

 

1. www/index.html 파일의 필요없는 주석과 코드는 삭제하고, 자기 입맛에 맞게 정리합니다.

 

2. 구조를 잡아봅시다. CSS 사용하실 때 픽셀단위가 아닌 EM, REM을 사용하세요!

게임 시작 링크, 랭킹 링크, 개발자 사이트 이동 링크가 있어야 하며, 시작=game.html, 랭킹=ranking.html 으로 지정합시다.

 

3. index.html의 결과물

 

 

 

 

5. HTML/CSS 구조 잡기 (GAME.HTML)

index.html 파일에서 실제 게임이 진행되는 페이지는 game.html으로 지정했습니다.

 

1. HTML 구조를 잡아봅시다. 플레이어의 번호설정 화면과, 게임진행 화면, 게임완료 화면이 있어야 합니다.

또한, 게임 진행중 메모를 할 수 있는 공간이 필요합니다.

 

2. 번호설정 화면을 작성합시다. 이 때, 번호는 자리마다 각각 따로 받읍시다.

 

 

 

3. 게임화면을 작성합니다. 번호선택 DIV에는 임시로 display: none 스타일을 적용합니다.

현재 차례를 표시하는 곳, 경기 내용을 기록하는 곳, 인공지능에게 질문하는 곳, 메모할 곳, 4가지가 있어야 합니다.

경기 내용창에는 어떻게 표시할 지 예제를 하나 작성합시다.

 

 

 

 

 

 

 

 

이번 강좌는 이까지 입니다. 다음 강좌를 기다려 주세요!

Math.floor(Math.rand() * 24 + 1) 시간 이내로 다시 돌아오겠습니다.

 

 

 

P.S. 혹시 HTML 작성과 관련된 내용도 포함하는 게 좋을까요?

0회에서 HTML 지식이 있어야 한다고 해놨던 것 같아서 따로 설명은 안 했습니다만...

설명을 따로 하는게 맞을까요? 아니면, Cordova 사용법/팁에 집중하는게 맞을까요?