Meteor-Strike-JS-Game-

Website URL: https://dongkey1198.github.io/Meteor-Strike-JS-Game-/

Youtube Link: https://www.youtube.com/watch?v=mqAf4F11f3s&list=PLQK6CVAk91WyWH9ORWq_pDTtTsAt5JT_V&index=5

프로젝트 계획 이유:

순수 HTML, CSS, Vanila JavaScript만 사용하여 만든 세 번째 토이 프로젝트이다. 다른 일반 웹들과 달리 처리해야하는 동작들이 많아 DOM에 대해 좀더 이해하고 사용방법을 익힐수 있을것 같아 이번 프로젝트에서는 HTML, CSS, JAVAScript를 이용하여 게임을 만들어 보기로하였다.

기술 스택:

HTML
CSS
JavaScript

프로젝트 기간:

2021/02/27 ~ 2021/03/03(실제 진행기간 3일)

기능:

로켓 좌우로 이동
운석이 위에서 아래로 이동
운석의 위치 랜던으로 설정
일정 점수에 도달시 운석의 이동속도 증가
게임 백그라운드 사운드 및 각 동작에 알맞은 sound effect
상단에 현재 속도 및 점수 표시

프로젝트를 진행하면서 어려웠던 점:

이번 프로젝트에서 가장 어려웠던 점은 운석이 떨어지는 움직임을 구현하는 것이었다. 일정 위치가 되면 새로운 운석들이 추가되고 모든 운석들을 위에서 아래로 일정한 간격만큼 이동시키는 방법에 대해 많은 삽질과 검색했던 것 같다. 여러 삽질의 끝에 각 운석들을 생성하는 과정에서 id 값에 각 생성된 순서로 정수를 부여하여 운석들들을 구분하고 이를 배열에 저장하였다. 그리고 반복문을 이용하여 운석이 계속 떨어지는 움직임을 구현하였다.

개선할점:

이번 프로젝트는 반응형으로 제작하지 못하였다. 게임 창의 사이즈와 로켓 그리고 운석의 크기를 고정 시켜놓았고 이를 기반으로 운석이 떨어지는 움직임과 로켓의 움직임을 설정해 놓았기 때문에 모발이 화면처럼 작은 화면이나 화면의 크기를 줄였을 경우 사이즈가 안 맞게 된다. 반은 형 웹에 대한 이해도를 높이기 위해 공부해야 할 것 같다.

dongkey1198 / meteor-strike-js-game- Goto Github PK