유다시티 프로젝트 Udacity Project Classic Arcade Game Clone 진행완료

유다시티 나노디그리 클래스를 재 진행합니다. 가면갈수록 시간은 정말 빠르고 할것은 넘쳐난다는 말에 공감합니다..ㅎ

지난번에 이 프로젝트에서 진행이 막혔었는데 어찌어찌 프로젝트 진행을 완료하였습니다. 아직 채점이 나오지 않아 어떻게 될지 모르겠지만 코드 스타일면에서 많은 수정사항이 요구될것 같습니다 ㅠㅠ

우선 완료된 실행모습입니다. 원래는 잔디밭이 안전위치 보도블럭이 위험지대 (벌레들이 왔다갔다함) 인데 위험지역을 물블럭으로 변경하고 벌레만 적으로 간주하는것이 아닌 돌도 흘러오게 설정해두었습니다. 추가로 위험지대가 3줄이였으나 보시다시피 4줄로 확대되어있음을 확인할수 있습니다.

전체적인 코드는 아래 깃허브 링크에서 확인 가능합니다. 또한 플레이도 가능한데 이는 다른 강좌에서 써보도록 하겠습니다. Gihub에서는 웹의 정적파일에 대해서 호스팅을 제공하고 있어 HTML + CSS + JS의 조합의 호스팅이 가능합니다.

실행링크 : https://sangumee.github.io/Udacity-Project/frontend-nanodegree-arcade-game/

코드링크 : https://github.com/sangumee/Udacity-Project/tree/master/frontend-nanodegree-arcade-game

여기서 우리가 집중적으로 살펴봐야할 코드는 js폴더 내의 app.js라는 파일입니다. 일반적으로 자바스크립트의 핵심코드들이 포함된 파일을 생성할때에는 app.js라는 명명법을 사용하는듯 하였습니다. Express에서도 기본실행 파일을 app.js로 많이 사용하더군요.

위의 코드에서는 Enemy (벌레)와 Enemy_Rock (돌)을 변수선언 하는 코드입니다. 또한 this문을 이용하여 x,y, speed 값을 정의해주고 있음을 확인할수 있습니다. 또한 다른 js에서 정의된 이미지들을 this.sprite을 통해서 표시하고 있음을 확인할수 있습니다.

위의 코드에서의 checkCollision을 통하여 Canvas의 충돌을 방지하고 prototype 체인으로 update와 render 함수를 사용하고 있음을 확인할수 있습니다. 저 코드의 숫자들이 굉장히 사용용도가 애매한 숫자들이 많았는데요. 하나하나 코드를 수정해보며 어디에서 사용되는 코드인지 파악하는지 시간이 꽤나 걸렸습니다.

주석에도 표기해두었지만 505라는 값은 Canvas의 가로값을 의미하고 있습니다.

위에서 보았던 비슷한 내용이 보이지 않나요? 적(벌레, 돌)을 정의한것처럼 Player값들을 정의하는 코드입니다. Player의 이미지링크를 지정하고 추가로 설명하지 않았던 부분이 있는데 ctx.drawImage~ 코드들은 HTML Canvas에서 사용되는 코드들로 보입니다. 또한 displayScoreLevel 함수를 통해서 점수부분을 저장하는 코드로 분석됩니다.

기본적으로 제공되는 소스코드입니다. 키값을 입력받아 반응하는 코드들을 담고 있습니다. 아래의 다른 코드들과 상호작용하며 작동합니다.

Display Score Level 함수를 정의하고 있습니다. 또한 innerHTML코드가 삽입되어있는것으로 보아 실제 HTML에 저장된 값을 프론트쪽으로 작동되게 하는 코드로 분석됩니다.

checkCollision 변수에서는 Enemy와 Player과 서로 부딪치는가를 검사하여 충돌함을 검사합니다. if 구문에서 상세 설정부분을 확인가능한데요. 충돌할 경우 내부에서는 콘돌에 Collided가 입력되며 Player의 x값과 y값을 재설정(초기설정)으로 전환하여 시작점으로 돌아오게됩니다.

그런데 Player가 충돌하지 않고 반대편 길까지 도착했다는 것을 확인하는 코드도 포함되어있습니다. 두번째 if문에서 확인가능하듯이 Player가 y값이 63인 곳에 도착하였을때 내부콘솔에서는 you made it!이라는 문구가 찍히며 x,y값을 초기설정으로 재설정합니다. 그리고 increaseDifficulty을 통하여 점수와 난이도를 1씩 올리는 작업을 처리합니다.

그리고 다시 확인하여보시면 연달이 if문이 3개가 있는 구간이 있을텐데요. 이는 Player가 HTML Canvas 밖으로 나감을 방지하기 위한 코드입니다. 확인해보시면 알겠지만 Player가 일정 x값과 y값을 넘어서게되면 더이상 이동하지 않고 그 자리에 지속적으로 머무르게(정지)하게 많을어 뒀음을 확인할수 있습니다.

이후로는 var enemy = new Enemy(0, Math.random() * 260 + 50, Math.random() * 256);

코드를 확인가능하실수 있을텐데요. 이 부분의 코드는 적들의 수를 조절하고 Math.randon함수를 활용하여 무작위 지점에 적들이 나타남을 설정하는 코드입니다. 차례대로 x값, y값, speed값을 포함하고 있음을 확인할수 있습니다. 또한 두번째 y값에 260이 곱해진 이후 추가로 50이 더해진 이유는 y값에서의 적들이 발생하는 구간을 지정하기 위함입니다. 더해진 숫자를 조작하여보면 수에따라 늘어남과 줄어듬을 확인할수 있습니다.

이제 거의 마무리단계에 왔는데요 초기설정을 지정하는 부분입니다. allEnemies의 값은 NULL값으로 두고 Player는 x,y,speed값을 조작하여 처음에 시작하면 위치하는 구역과 상하좌우를 조작할때 100만큼 이동하겠다라는것을 명시하고 있습니다. 

score는 초반에는 0 그리고 레벨은 1로 지정하고 있고 위에서 설명하였듯이 초기에 적들이 발생하는 조건들에 대한 코드들이 다시 이어집니다.

마무리 단계입니다. 아까 Player.prototype.handleInput에서 키 누른값 설정한것이 기억나시나요? addEventListener를 통하여 키값을 전송합니다. 이 코드 또한 초반에 이미 설정되어있는 코드이므로 수정할 필요는 없습니다.

전체코드는 초반부 소개드린 링크에서도 확인가능하고 아래의 Github Gist를 통해서도 확인가능합니다~