항목 분해 - Snake

TL;박사님. - 제 버전의 뱀을 만들었어요!You can play the game here!

배경 및 설정

Wes BosBeginner JavaScript 과정을 공부할 때 우리가 한 첫 번째 큰 프로젝트는 식각초도 만들기(here's my implementation!이거 너무 재미있어요. 아이디어를 주셨어요. - 저는 비슷한 방식으로 뱀 게임을 만들 수 있어요!
만약 네가 이전에 뱀을 들어 본 적이 없거나 해 본 적이 없다면, 이것은 오래된 휴대전화 게임이며, 너는 뱀 한 마리를 제어할 수 있다.너는 처음부터 아주 작아서 칠판을 돌아다니며 음식을 먹어 보았다.한 조각을 먹을 때마다 너의 몸은 좀 커진다.만약 네가 게임판의 옆면이나 몸에 명중한다면 게임은 끝난다.이것은 듣기에는 매우 간단하지만, 일단 당신의 몸이 충분하게 길면, 이것은 매우 까다로울 수 있다.

식각 스케치는 화면에 선을 그리는 것과 관련이 있기 때문에, 나는 같은 방법으로 Snake를 만들 수 있다고 생각한다!이것은 내가 한동안 놀고 싶었던 물건이지만, 항상 너무 많은 일을 하는 것 같다.이 과정의 연습을 통해 나는 그것이 내가 상상한 것보다 더 유능할지도 모른다는 것을 깨달았다.

사용 기술

이 게임의 진정한 스타는 HTMLcanvas 요소다.이것은 화면에 복잡한 모양을 그릴 수 있는 요소입니다.나는 이전에 canvas 원소를 들어 본 적이 있지만, 실제로는 그것의 용례가 없다.그러나 일단 우리가 수업 연습에서 그것을 사용하면, 그것은 이 게임을 구축하는 완벽한 캔버스 같다. (알겠니? 하하)!이것은 또한 상당히 직접적인 vanilla JavaScript를 사용했다.

경험과 교훈

세상에, 나는 이 일을 할 때 많은 것을 배웠다. 결과는 내가 상상한 것보다 좀 어려웠다.다음은 내가 겪은 사소한 문제들이다.

코드 설정이 중요합니다.

나는 음식 스타일이 좋은 시작이라고 생각한다. - 그것은 작은 정사각형일 뿐이다. 한 점에 이르러 새로운 점으로 이동할 때 뱀이 그것을 촉발한다.나는 음식을 위해 내lineWidth과fillStyle를 설정하고 작은 랜덤 함수를 만들어서 랜덤 x와 y를 얻은 다음에 코드를 입력하여 캔버스에 작은 정사각형 음식을 표시했다.저장됨 및...아무것도 없다이것은 식각 스케치 항목에서 작용했다 - 왜 지금 작용하지 않습니까?개별 점을 표시하려면 lineCap 을 기본값이 아닌 값으로 조정해야 합니다.만약 당신이 완전한 선을 그린다면, 그것은 조정 없이 작동할 것이다. 그러나 이 점에 대해 나는 그것을'정사각형'으로 설정해야 한다. 그리고 그것이 나타날 것이다.

foodCtx.lineWidth = SIZE;
foodCtx.fillStyle = '#27ae60';
foodCtx.lineCap = 'square';

뱀을 정상적으로 자라게 하다

이 게임에서 당신의 뱀은 한 점에서 시작해서 음식을 먹을 때 자란다.음식물이 촉발되어 커질 때까지 몸은 일정한 길이를 유지해야 한다.따라서 새 위치로 이동하고 길이를 유지해야 한다.나는 왜 내가 약간의 시간을 들여서야 답을 찾았는지 잘 모르겠지만, 결국 뱀을 추적하는 가장 좋은 방법은 나의 일련의 동작과 뱀의 현재 길이를 저장하는 변수를 보존하는 것이다.
기본적으로 뱀이 이동할 때마다 이동 수조는 업데이트가 필요하다.새 이동을 패턴에 추가한 다음 패턴에서 가장 오래된 이동을 제거해야 합니다.그리고 업데이트된 그룹 목록에서 줄을 조정할 수 있습니다.이것은 그것을 시종일관 일정한 길이로 표시하고 상대적으로 쉽게 성장하게 한다!나는 또 이동 수조의 길이를 확인했다. 우리가 처음 음식을 먹었을 때, 우리의 수조는 새로운 체장이 필요로 하는 것처럼 그렇게 길지 않기 때문에, 우리는 어떤 것도 삭제하고 싶지 않았다.

구태를 감추다

뱀의 몸을 움직이는 또 다른 부분은 우리가 더 이상 필요로 하지 않는 이동을 덮거나 제거하는 것이다.나는 뱀을 완전히 삭제하고 다시 그리는 모든 동작이 너무 많은 도약을 일으킬 것이라고 생각한다.그래서 나의 다음 생각은 선의 색깔을 흰색(배경 경치)으로 바꾸고 낡은 동작에 그림을 그리는 것이다.그러나 나는 이 귀신 문물들이 낡은 동작을 완전히 덮지 않은 것처럼 끊임없이 얻었다.이것은 나에게 너무 이상하다. 왜냐하면 이 길의 너비와 위치는 예전과 같고, 게다가 (적어도 내가 알고 있는 상황을 보면) 이 길에는 내가 놓칠 수 있는 한 획도 없기 때문이다.나는 간단하게 경로 폭의 크기를 일반 뱀의 크기보다 큰 5시로 늘려서 이 문제를 해결했다. 그것은 완전히 덮어씌웠다.
그러나 지금 나는 이 글을 쓰고 있다. 나는 또 다른 유용할 수 있는 선택을 보았다.이것은 내가 이 영화를 창작할 때 내린 또 다른 결정과 관계가 있다.

다중 캔버스 및 z 인덱스

나는 여러 개의 도형을 서로 다른 화포에 분리하고 서로 겹쳐서 놓으면 성능을 더욱 높일 수 있다는 것을 읽었다. 특히 한 도형은 대량으로 조정해야 하고 다른 도형은 조정할 필요가 없을 때. 나는 이런 기술을 사용하여 음식을 한 화포 위에 놓고 뱀을 다른 화포 위에 놓았다.나는 두 개의 좌표값을 저장하고 화포의 크기가 같기 때문에 충돌을 검출하는 것은 여전히 매우 쉽다.내가 말한 것은 이제야 생각한 것은, 내가 삭제한 값을 저장하기 위해 세 번째 캔버스를 만들 수 있을지도 모른다는 것이다.그리고 나서 나는 제거된 점에 흰색 선을 그릴 수 있고, 이미 존재하는 경로에 그려진 공작물에 문제가 없을 수도 있다.나 나중에 테스트해야 돼!
나는 또한 캔버스를 위해 정확한 z 인덱스를 설정하는 중요성을 만났다.우선, 나는 뱀 화포를 음식 화포 위에 놓았는데, 뱀이 음식 가장자리를 지나갈 때(새 음식이 뱀 꼬리 옆에서 생성된다면), 낡은 뱀의 신체 부위가 칠해졌을 때, 뱀도 일부 음식을 칠했다.음식물 캔버스를 꼭대기에 놓으면 이런 상황을 방지할 수 있다.

신체 충돌 탐지

뱀머리가 게임판 가장자리에 닿았는지 검사하는 것은 매우 쉽다. - 나는 판의 너비와 높이를 알고 있기 때문에 나는 0을 맞혔는지 너비/높이 숫자를 맞혔는지 검사하기만 하면 된다.신체 충돌을 측정하는 것도 쉬운 것 같다. 왜냐하면, 나는 일련의 신체 지점의 위치를 가지고 있기 때문이다.그러나 자바스크립트에서 항상 나를 곤혹스럽게 하는 것은 검색 대상이다. 자연스럽게도 나는 모든 좌표를 x와 y 값을 가진 대상으로 저장한다.나는 수조의 lineCap 방법이 이 점을 잘 실현할 수 있다고 생각하지만, 대상을 읽을 수 없기 때문에 작용하지 않는다.사실이 증명하듯이, 내가 필요로 하는 것은 .includes 방법이다!.find를 사용하면 그룹의 각 점을 확인하고 특정 값과 일치하는 특정 키가 있는지 확인할 수 있습니다.그것을 사용하면 실제로 내가 생각한 것처럼 현재 머리가 바디 그룹에서 값을 만났는지 확인하기 쉽다. - 정확한 자바스크립트 방법을 찾으면 된다!

if (body.find(point => point.x === headX && point.y === headY)) { gameStatusUi.innerHTML = ` Game over! Hit your body. `; 
endGame(); 
return; 
}

캔버스 포커스 설정

내가 만난 마지막 문제는 새로운 게임을 시작하는 것이다.페이지를 불러오면 게임이 자동으로 시작되지만, 게임이 끝나면 다시 시작하고 싶습니다.그래서 나는 리셋 단추를 설치하여 회로판을 지우고 필요한 값을 리셋했다. 그래서 너는 항상 0부터 새로운 좌표를 사용한다.하지만나는 게임을 새로운 라운드에서 진정으로 동작을 표시할 수 없다.이것은 나에게 있어서 가장 이상한 일이다.기본 이벤트를 막는 화살표 키가 현재 기본 이벤트를 막지 않았습니다. 화살표 키의 기본값은 이동 뷰포트입니다.뭔가 이상해.나는 무의식중에 답을 찾았다. 내 시도에서 스크린을 눌렀는데, 갑자기 화살표 키가 뱀을 움직였다.그리고 나는'아하'하는 순간이 있었다. 캔버스는 키보드의 초점을 잃은 것이 틀림없다.
사실이 증명하다, 바로 이렇다!나는'게임 시작'기능을 조정하여 snake 캔버스를 초점이 있는 것으로 명확하게 설정했다.그리고 모든 것이 내가 바라는 대로 순조롭다

마지막 생각

어쨌든, 나는 약 7.5시간 동안 창립했다.어느솔직히 말하면 이것은 나에게 매우 중요하지만 .find 규범을 대량으로 읽고 각종 문제를 해결하며 양식, 문서와 코드를 다시 배열해야 한다.그래서 전반적으로 말하자면, 그렇게 나쁘지 않다. 게다가 내가 1년 전보다 그것을 창조하는 속도가 더 빠를 것이다진보는 진보다!
항상 개선된 공간이 있습니다. - 저는 최종적으로 세 번째 캔버스 아이디어를 테스트할 수 있습니다. 저는 이렇게 하고 싶습니다. 게임이 시작되면 뱀은 자동으로 마지막 주어진 방향으로 이동합니다. (원래 방향처럼) - 전반적으로 저는 이 모든 결과가 기쁩니다.
전체 게임의 코드on my GitHub here를 볼 수 있습니다.