티스토리 뷰
snakegame.html : 사각의 맵에서 스네이크를 상하좌우로 움직이며 랜덤으로 나오는 아이템을 먹으면 몸이 길어지고 움직이는 속도가 증가한다
최초 설계
> 맵은 테이블로 표현하고 2차원 배열에 td(블럭) 엘리먼트를 삽입
> 스네이크(블랙)는 색깔로 표현
> 방향에 따라 스네이크의 현재 위치를 갱신하고 블럭을 초기화 한 후 스네이크의 현재 위치값으로 블럭에 색칠
> 게임 속성 : 스네이크 방향, 스네이크 현재 위치, 게임 맵 사이즈, 게임 상태, 블럭 크기(td)
0, 1 |
0, 2 |
0, 3 |
1, 1 |
1, 2 |
1, 3 |
2, 1 |
2, 2 |
2, 3 |
0, 1 |
0, 2 |
0, 3 |
1, 1 |
1, 2 |
1, 3 |
2, 1 |
2, 2 |
2, 3 |
0, 1 |
0, 2 |
0, 3 |
1, 1 |
1, 2 |
1, 3 |
2, 1 |
2, 2 |
2, 3 |
1차 구현
- 스네이크 게임 객체 정의 외부에는 start 함수만 노출
- 게임의 기본 속성 정의
- 38 39 40 37은 방향키의 키값
- 가장 먼저 게임 화면을 생성
- 보드라는 변수에 블럭의 위치 값으로 이차원 배열에 저장
- 스네이크 생성 스네이크의 처음 진행 방향은 오른쪽 var snakeWay=39;
- 키 이벤트 등록
- 정 반대 방향과 같은 방향은 이동 불가
- 스네이크의 방향이 바뀌었음을 속성값에 변경 등록
- 위로 이동할 경우 x축 고정 y축 -1
- 오른쪽으로 이동할 경우 y축 고정 x축 +1
- 아래쪽으로 이동할 경우 x축 고정 y축 +1
- 왼쪽으로 이동할 경우 y축 고정 x축 -1
- 현재 위치 값 변경후 블럭을 초기화 후에 다시 스네이크를 그림
- 스네이크 이동 함수를 재귀 호출
2차 추가 설계
> 속성 : 스네이크의 속도, 아이템 추가, 스네이크 꼬리 추가, 점수, 레벨 추가
> 랜덤으로 아이템이 추가되며 아이템을 먹을 경우 점수와 레벨이 오르며,
스네이크의 속도증가, 스네이크의 꼬리가 1씩 증가 한다
> 벽에 부딛치거나 꼬리에 닿으면 게임 종료
2차 구현
- 아이템(red)도 색깔로 표현
- 블럭에 아이템 표시
- 매번 블럭을 초기화하는데 아이템은 빼고 초기화
- 스네이크 이동 함수에서 위치값을 갱신 후 스네이크의 현재 위치의 블럭이 아이템이라면
아이템을 먹는다
- 아이템을 먹으면 스네이크의 꼬리, 속도(+10%) 증가 레벨값 증가, 아이템 재생성, 스코어 추가
- 꼬리를 그리기 위하여 스네이크의 이동 경로를 쌓는다
- 꼬리는 스네이크의 이전위치에 그리면 된다
- 스네이크를 그릴때 꼬리의 값을 확인 하여 꼬리까지 같이 그린다.
- 꼬리에 닿았거나 벽에 부딛쳤을때 게임을 종료 한다.
> 기타 구현
- 이동(색칠) 하기전에 방향키를 빠르게 눌렀을때 방향이 이동되는 것을 방지하기 위해 추가
시간되면 대전 형식에 스네이크 멀티 플레이를 구현해봐야겠다...