이 글은 https://www.youtube.com/watch?v=qkTtmgCjHhM 보고 공부한 글 입니다.
게임 개발 하려면 3가지를 알아야 합니다.
1. 화면에 네모, 원 드릴 수 있어야 합니다.
2. 프레임마다 코드실행 가능하게 해야 합니다.(애니메이션 처럼 보이게 하려고)
3. collision check 할 수 있어야 합니다.(충돌을 관리할 수 있어야 합니다.)
등장 캐릭터의 속성부터 object자료에 정리해두면 편리합니다.
어떤 좌표에서 공룡이 등장할 껀지 같은거요
사이즈도 마찬가지죠
fillRect()속성은
하드코딩 했습니다.
(10,10) 위치에다가
(100,100) 크기 네모 그려주세요 하는 것입니다.
x와 y 값을 넣으면 더 편리 하겠죠?
장애물을 그려봅시다
장애물들은 각각 다른 특성을 가지고 있을 수 있습니다.
장애물은 비슷한 종류의 오프잭트가 필요할 것입니다.
이럴 땐 클래스로 만드는게 일반적입니다.
왼쪽에서 500픽셀
위에서 부터 200픽셀 떨어진 것입니다.
장애물을 하나 뽑고 싶어요!
애니메이션을 만들어야 합니다.
dino의 x좌표를 계속 움직여주면 됩니다.
x좌표를 1씩 1초에 60번 옮겨주세요 해야합니다.
라이브러리 써야 합니다.
requestAnimationFrame
기본 자바스크립트 함수가 있습니다.
함수는 1초에 60번실행하고 있습니다.
하지만 잔상이 남아요
캠퍼스를 지우고 그리고 지우고 그리고를 반복하면 될 것입니다.
장애물이 서서히 왼쪽으로 오면 됩니다.
배경도 마찬가지 입니다.
하지만 장애물이 1초에 60번 생성되면 안되죠
장애물은 2~3초에 한번씩 와야 합니다.
게임 세상에서는 프레임으로 움직입니다.
제 모니터는 60프레임이니 60프레임이 지나고 나서 장애물이 생겼으면 좋겠습니다.
1초에 60번식 실행이 되니 timer는 1식 증가합니다.
만약 60프레임이 된다면 장애물 객체를 생성하고 그립니다.
그런데 이건 장애물 1개만 생성합니다.
장애물 여러개 관리해봅시다.
장애물을 생성하고 array에 담아봅시다.
cactus하나 생성할 때마다 배열에 담아봅시다.
그럼 60프레임마다 한번씩 생긴 것을 하나씩 담아 둘것입니다.
그리고 forEach문으로 하나씩 빼온것은 draw합시다.
x좌표를 1씩 빼면
빨간 네모가 왼쪽으로 쫄쫄 움직이는 것을 볼 수 있을 것입니다.
필요 없어진 장애물 제거
왼쪽으로 끝까지 간 장애물 제거 해봅시다.
forEach문에는 2개의 파라미터를 이용할 수 있습니다.
지워주는 것입니다.
점프를 구현해봅시다.
공룡을 y축으로 올리면 됩니다.
y축으로 -2씩 빼면 됩니다.
스페이스바로 동작하려면 addEventListener 함수를 사용해야 합니다.
함수는 Space가 눌리면 점프중이라는 변수를 true로 만듭니다.
그리고 프레임마다 실행되는 함수에 만약 점프중이라 true라면 "y축을 감소시켜라" 하면 됩니다.
하지만 계속 하늘로 갑니다.
점프timer라는 변수로 100프레임이 넘어가면 점프를 멈추게 합니다.
다시 내려오게 해봅시다.
점프중이 아니라면 +2를 하면 다시 내려옵니다
하지만 아무것도 안해도 계속내려옵니다.
최저 높이를 걸어주면됩니다.
"공룡이 200픽셀 넘어가려 하면 멈춰주세요" 하고 조건문을 겁시다.
장애물과 충돌하면 사건이 일어나도록 합시다.
이 유닛과 장애물과 충돌하는 판정은 좌표로 계산합니다.
공룡의 x좌표와 장애물의 x좌표를 빼서 음수가 나오면 충돌했다고 생각할 수 있습니다.
공룡의 y좌표와 장애물의 y좌표를 빼서 음수가 나오면 충돌했다고 생각할 수 있습니다.
충돌하는지 않하는지 함수를 만들어 봅시다.
충돌 체크는 장애물이 생성되는 forEach문에서 합시다.
dino와 모든 장애물 충돌 체크를 해야하기 때문입니다.
dino.x는 왼쪽입니다. 우리는 dino의 오른쪽과 비교해야하니 dino의 width를 더해줍시다.
여기서 x축 차이와 y축 차이가 둘다 동시에 0보다 작아야 합니다.
왜 동시에 작아야 할까요?
x축은 양수라 괜찮지만
y축은 처음부터 음수인 상태입니다.
왜냐하면 처음 일직선상에 놓여있는데
그 때 장애물의 y좌표가 dino의 y좌표보다 크기 때문입니다.
y문이 만족을 하니 계속해서 if문을 실행합니다.
dino가 점프해서 y축이 바뀌면 그 때 dino.y의 값이 더 높아지고
장애물이 지나가는 순간의 y값과 비교하게 됩니다.
충돌하면 정지시켜야 합니다.
컨버스도 깔끔하게 지우고
animation 도 멈춰야 합니다.
reqeustAnimationFrame() 객체값을 animation변수에 넣고
cancelAnimationFrame() 함수 안에다가 넣어줍니다.
이미지를 넣어봅시다.
이미지 객체를 만들어서 drawImage객체에 넣으면 됩니다.