작성 규칙
- 🟠 작성 상태
✅ 작성한 날짜를 기록함으로써 리마인드
✅ 작성한 프로젝트를 기록함으로써 프로젝트를 찾아볼 수 있음
✅ 작성 상태를 기술함으로써 수정된 이력 버전과 완성여부를 확인
- 🖋 기능 설명
✅ 레퍼런스 링크
✅ 사용된 기술에 대해 스스로 설명
- 🔨 프로젝트 적용
✅ 기획내용 작성, 작성한 계기를 기술
✅ 프로젝트에 사용한 코드를 한 줄씩 리뷰하는 것으로 코드 전체 이해 증명
✅ 코드를 설계한 내용과 왜 이렇게 작성했는지
✅ 완성 코드를 코드펜으로 보여주기
🟠 작성 상태
🟠 작성 날짜 : 0427, 2022
🟠 작성 상태 : 수정됨 (0428, 2022)
🖋 기능 설명
🖋 레퍼런스 링크
🖋 기능에 대해 설명
▶
🔨 프로젝트 적용
- 기본초기화
- 사용자 게임초기화
- 게임 캐릭터 위치 정의
- 충돌 처리
- 화면에 그리기
🔨 프로젝트 기획, 작성 계기
기본초기화
사용자 게임 초기화
- 배경화면
- 1200*1000 크기의 격자 체스판과 좌측 및 상단의 여백 대시보드
- 게임이미지
- 배경화면 이미지 1000*1000
- 체스 셀 크기 100*100
- 플레이어 피스 이미지 85*85
- 에너미 피스 이미지 85*85
- 에너미 킹 피스 이미지 85*85
- 일시정지 이미지 85*85
- 타이틀 바, 남은턴, 아이템 이미지 200*200
- 스테이지, 남은턴설명, 아이템설명, 일시정지 테두리 이미지 200*100
- 좌표
-
격자크기 : 100
-
격자 이미지 위치 : (200,0)
-
타이틀 테두리 위치 : (0,0)
-
스테이지 테두리 위치 : (0,200)
-
남은턴 테두리 위치 : (0,300)
-
남은턴설명 테두리 위치 : (0,500)
-
아이템 테두리 위치 : (0,600)
-
아이템설명 테두리 위치 : (0,800)
-
일시정지 테두리 이미지 위치 : (0,900)
-
타이틀 위치
-
스테이지 위치
-
남은턴 위치
-
남은턴 설명 위치
-
아이템 위치
-
아이템 설명 위치
-
일시정지 위치
-
x좌표: 여백(100) + 격자크기(100)*column(a)
-
y좌표: 여백(100) + 격자크기(100)*row(b)
- 폰트
- 속도
- 100만큼 1초에 1번 움직일것(체스피스가 움직이듯이 딱딱한 모션)
- 색상값
- 갈색(타이틀이미지) : (206,135,87)
- 검정색 : (0,0,0)
- 진회색 : (49,49,49)
- 회색 : (196,196,196)
- 녹색 : (43,255,51)
- 푸른색 : (0,71,255)
- 빨간색 : (255,0,0)
- 흰색 : (255,255,255)
게임 캐릭터 위치 정의
- 플레이어 피스와 에너미 피스는 레벨에 따라 자리 잡아주기
- 턴에 따라 에너미 피스는 정해진 움직임으로 이동
충돌 처리
- 플레이어 피스는 상하좌우로 맞닿은 에너미 피스의 방향을 향해 이동하는 것으로 에너미 피스를 공격할 수 있다.
- 플레이어 피스에 공격을 당한 에너미 피스는 방어력 - 공격력 만큼 피해를 받으며, 방어력 수치가 0이 되면 파괴된다.
- 플레이어 피스가 에너미 피스를 공격하면 공격 사운드가 나온다
- 에너미 피스의 방어력 수치가 0이되면 파괴 사운드가 나오며 에너미 피스를 화면에서 지운다.
화면에 그리기
- 배경이미지 그리기
- 대시보드 그리기(스테이지, 제한 이동수, 일시정지)
- 플레이어 피스 그리기
- 에너미 피스 그리기
조건 - 이동 시 피스 그린 것을 지웠다가 이동된 위치로 다시 그리기
조건 - 파괴된 피스를 지우기
- 스테이지 클리어 화면 그리기
조건 - 스테이지 클리어 화면 이후 다음 스테이지를 보여주기(1,2,3,4)
규칙 정의
- 플레이어는 10*10의 보드 위에서 제한 이동 수 내에 킹 피스를 공격해야 함
- 플레이어 피스는 한 칸씩 움직일 수 있음
- 플레이어 피스는 공격력이 있고, 에너미 피스는 방어력이 있음
- 에너미 피스는 킹 피스를 방어하려 둘러쌈
- 플레이어 피스는 보드에 랜덤으로 배치된 아이템 격자로 이동해 특수한 효과를 일시적으로 얻을 수 있다.
결론 : 플레이어는 캐릭터 피스와 아이템을 활용하여 제한 이동 수 내에 킹 피스를 쓰러뜨려야 한다!
🔨 코드 리뷰
🔨 완성 코드(CodePen)