두번째 개인 프로젝트 - 랜덤 로드뷰 게임 (Open Api 활용)

학교 텀 프로젝트가 Open Api 활용을 요구해서 지난번에 만든 블랙잭은 써먹지 못하고 다른 개인 프로젝트를 만들었다.

https://github.com/ssigner/internet_term

GitHub - ssigner/internet_term

HTML, CSS, Java Script 를 사용해서 만들었으며, 한동안 화제가 되었던 전세계 로드뷰 보고 맞추기 게임을 토대로 만들었다.

이번에는 Open Api 이용이라 키 노출 우려가 있어 따로 페이지 배포는 하지 못했다.

-> 암호화 하는 방법을 알게 되면 다음에 개인이나 단체로 프로젝트 진행시에 유용할 것 같다.

첫 화면

처음 화면은 이렇게 되어있으며, 게임 시작을 누르면 랜덤 로드뷰 화면이 나온다.

이번에도 로컬 스토리지를 활용해서 스코어 순위를 5인까지 나오도록 하였다.

게임 시작 버튼 클릭

이제 지도상에서 왼쪽 로드뷰를 보고 추측되는 지점을 클릭하면 된다. 옆의 테이블에서 자동으로 클릭한 지점에 맞는 위도와 경도가 갱신이 된다.

점수확인 버튼 클릭

이러면 테이블에 점수가 나오게 된다.

점수 계산 코드

점수는 아두이노 라이브러리에도 있는 map 메소드를 참조해서, 실제 정답 위도와 경도와 내가 찍은 지점의 위도와 경도 차이를 각각 0~100에 매핑한다음 둘의 평균을 내주었다.

 

이후 보내기 버튼클릭시,

카카오톡 메세지, 보내기 버튼

이렇게 카카오톡으로 점수 메세지를 보낼 수 있는데, 이는

카카오톡 메세지 API

카카오톡 메세지 API를 활용해 구현 해주었다.

보내기 버튼 옆의 카카오맵 아이콘을 클릭시, 해당 로드뷰의 실제 지도를 카카오 맵 웹 브라우저에서 확인이 가능하다.

익명 등록도 가능

등록 버튼을 누르면, 이렇게 스코어 순위에 등록을 할 수도 있는데, 등록이 귀찮으면 초기화 버튼을 누르면 게임이 초기화 된다.

등록 이후 초기화면, 스코어 순위 갱신을 확인 가능

이렇게 갱신이 되는데, 

setStoarge

JSON을 활용해서 로컬 스토리지에 저장을 하고, 만약 이미 로컬 스토리지에 5명이 차있으면 비교후 잘라내서 정렬하는 방식으로 구현했다.

정상적으로 저장이 되어있는 모습

이렇게 객체 형식으로 저장이 되어있는걸 확인이 가능하다.

 

프로젝트를 진행하면서 좋았던 점과 아쉬웠던 점

좋았던점

• JS 객체의 이해 증가
• Open Api를 활용한 웹페이지 제작
• HTML Semantic element의 이해

아쉬웠던점

• queryselector을 사용하여 Class를 이용해서 document전체에서 찾는게 아닌, queryselector를 이용해 찾은 element 내부에서만 document 조작을 했으면 좋지 않았을까 -> 지난 프로젝트에서 이어지는점, HTML설계의 중요성을 느낌
• Api Key의 보안성 문제 -> 배포가 불가능