저번에 올렸던 탱크 게임에서 추가적으로 컴퓨터 AI 부분을 구현해 보았다. 플레이어 수, 팀, 컴퓨터 난이도 등의 값이 설정이 가능하나 Ui로는 만들어 놓지 않았음. 이전 글을 참고하실 분은 하세요.
2010/04/20 - [javascript/web] - canvas 와 excanvas 를 이용하여 만들어보고 있는 탱크 게임 (클라이언트 부분)
데모(Demo)
아이폰 세로 해상도 최적화
아이폰 사파리에서 세로 해상도에서 잘보이도록 수정하였다. 이전 버전에서는 아이폰을 가로하였을 때를 기준으로 작성했었는데, 막상 써보니 세로가 더 편한 것 같아서 바꿨다. 바꾸면서 탱크의 HP는 canvas 영역에 원모양으로 넣었다. 호환성 부분은 이전 수준을 유지했다(IE6, IE7, IE8, FF3, Chrome4, Opera10, iPhone Safari 등 주요 브라우저). 아 그리고, 데스크탑에서는 마우스 휠로 파워 조절이 가능하도록 했다. 주로 마우스만으로 각도, 파워 조절하는데 화면 구석에 있으면 파워 조절이 힘들어서.
이동 기능 추가
포탄을 쏘는 것 외에 이동하는 것도 추가했다. 버튼을 클릭하거나, 단축키인 v를 눌러도 된다. 좀 더 쎄거나, 여러발이 나간다거나, 공격 범위가 넓거나 한 강력한 포탄도 넣고 싶은데 버튼 들어갈만한 자리가 없어서 일단 보류. 참고로 컴퓨터 Ai도 가끔씩 이동하게 해놨다. 컴퓨터는 상대가 멀리있고 자신이 공격을 받았을 경우 이동할 확률이 높다.
컴퓨터 AI 추가
혼자 놀기 위해서 컴퓨터 AI를 만들어 추가했다. 데모에서는 사람이 조정하는 동그라미 탱크 3대와 컴퓨터가 조정하는 세모 탱크 3대가 싸우게 해놨다. 난이도는 5 정도의 수치(나한테는 이정도가 쉽지도 않고 어렵지도 않은듯). 난이도는 1 이상으로 정도로 줄 수 있지만, 숫자가 높아질 수록 점점 차이가 없어진다. 1로 설정하면 쉽고, 아마 보통 수준은 3이나 4 정도 일 것 같다.
컴퓨터 AI 구현 방식
AI가 동작하는 기본 방식(Ai01)은 다음과 같다.
1. 목표물 설정.
2. 각도 설정.
3. 파워 설정.
4. 결과 확인.
목표물은 가장 가까운 위치에 있는 상대편을 고르도록 했다. 각도는 목표물과의 사이에 있는 땅의 좌표를 모두 조사하여 그 땅을 넘길 수 있는 최소한의 각도를 구하고, 파워에 따라서 못 넘길 수도 있으므로 약간의 보정치를 더해줬다. 파워는 대충 거리와 각도를 가지고 구하도록 하였다. 중요한 부분은 결과를 Shot 객체에서 콜백으로 받아서 분석하는 부분이다. 발사한 결과 목표물보다 멀리 나갔으면 다음번에 쏠 때 파워를 줄이고, 더 조금 나갔으면 파워를 높이는 방식이다.
이 기본 방식에서 확장시킨 부분(Ai02)이 난이도 조절이 가능한 부분인데, 그 부분은 AI가 자체적으로 시뮬레이션용 Shot 객체를 내장하여 발사전에 결과를 분석한 후 가장 좋은 결과를 발사하도록 구현하였다. 즉, 난이도의 수치에 따라 그 만큼 시뮬레이션을 하여 데이타를 만들어서 그 중에 가장 좋은 결과를 반영하게 된다.
소스(Source)
simpletankai2.zip
후기
원래 앞으로의 계획은 AI 추가 따위가 아니였는데, 갑자기 땡겨서 만들어 버렸다 -_-; 만들고 나니 게임 시작전에 팀 설정하는 부분 (유저 수, 컴퓨터 수, 난이도 설정 등)을 넣고 싶어짐.. 그리고 통신 부분도 만들어야 하는데!!! 시간이 없다 ㄱ-
'javascript' 카테고리의 다른 글
| 2005년에 있었던 제2회 와우해커 해킹페스티발 XSS (0) | 2012.02.07 |
|---|---|
| HTTP Cache 관련 정리해둔거 (작성자: azki) (0) | 2010.08.25 |
| canvas 와 excanvas 를 이용하여 만들어보고 있는 탱크 게임 (클라이언트 부분) (0) | 2010.04.20 |
| iPhone Safari 브라우저 기능 레퍼런스 및 뷰포트 설정. (0) | 2010.04.20 |
| env.js 사용시 부족한 부분 수정 (0) | 2010.04.20 |
