소개

완전히 기본 JavaScript로 액션 게임을 만들어 보았습니다.
(요점은 jQuery 등 라이브러리를 사용하지 않는다는 것입니다)
만든 것은 작년입니다만, 지금 추이면서 소개하려고 생각하고, 기사로 했습니다.

게임 본체
h tps:// 기주 b. 이오/js_가메/src/

구현
htps : // 기주 b. 코 m / 호오 슈리아 / js_ 가메 / t 에어 /

어떤 게임인가?

개요

주인공을 점프시켜 골에 도착하는, 그냥 그만큼의 게임입니다.
(세로 스크롤)

조작 설명 (클릭이나 탭에서도 동일합니다)

・기본

화면 오른쪽 절반 클릭: 오른쪽으로 이동
화면 왼쪽 절반 클릭: 왼쪽으로 점프
※공중에서는 기본 1회만 공중 점프가 가능

・벽걸이 부착시

벽면 화면 절반을 클릭 길게 누르기 : 벽 등반
벽과 반대쪽 화면 절반 클릭: 벽 킥

구현 정보

그리기 처리

드로잉은 HTML의 캔버스 요소를 사용하며 JavaScript 측에서 그립니다.
캔버스 요소를 겹쳐서 레이어 위에 하는 것으로, 지형의 묘화와 주인공의 묘화를 나누고 있습니다.

기본적으로, 항상 다시 그리거나 하지 않고, 변화가 있었던 곳만 다시 그리도록 하고 있습니다.
다만, 주인공은 계속 움직이기 때문에, 45밀리초 간격으로 주변의 canvas 요소를 클리어 해, 현재지에 다시 묘사하고 있습니다.

지형은 주인공이 진행될 때 다시 그립니다.
현재의 캔버스 요소 전체를 이미지로서 취득해, 취득한 지형 이미지를 아래로 옮겨 캔버스 요소에 다시 붙입니다.
그 결과 위에 빈 잉여 스페이스에, 새롭게 보이게 된 지형을 그리도록 하고 있습니다.
그건 그렇고, 아래로 이동 한 맨 아래 줄은 캔버스 요소에서 튀어 나온 곳에 붙어 있기 때문에 마음대로 사라집니다.

지형에 대해

지형은 이중 배열로 가지고 있습니다.
아무것도 없으면 0, 벽이라면 1, 이라는 느낌입니다.

또, 특수한 지형을 접했을 경우, 특정의 메소드가 불리게 되어 있습니다.
그것에 의해, 가시에 닿으면 게임 오버적 처리나, 블록에 따라서는 큰 점프, 같은 처리를 실현하고 있습니다.

끝에

큰 일이 없는 게임이므로, 규칙도 구현도 설명하는 점도 그다지 없습니다.
여가 시간에조차 하지 않는 것 같지만 너무 여유로운 사람이 계시다면 꼭 해보세요.
다만, 왠지 벽 빠짐 버그등이 발생하는 일이 있어, 갑자기 예측 불가능한 움직임을 할지도 모릅니다. 양해 바랍니다.