Cannon Game_day2 (2021.09.27)

사용할 언어: HTML, CSS, Javascript

물리엔진

초기 에너지

에너지를 키다운으로 축적해서 발포, 대포의 색이 붉어진다

 

공의 무게

무게가 크면 벽을 부술 수도 있다

 

중력

공에는 지구와 동일하거나 작은 중력이 작용한다

(부서진 벽의 가루가 중력에 의해 떨어진다)

 

대포

대포가 이동할 수 있다

app.js에 document.addEventListener를 만들고
cannonMove 함수를 만들어 canvas에서 대포가 움직이도록 했다

대포는 각도를 조절할 수 있다

대포의 각도에 따라 포탄이 발사된다

포탄이 발사된다

addEventListener를 통해 'Space'를 누르면 포탄이 발사된다
발사되는 위치는 대포의 위치를 기준하며 포탄 자바스크립트 내부에 벽을 만나면
속도의 값을 -1을 곱해 튕겨나오게 만들었다. 

하나를 만들 때는 상관 없지만 여러개를 원할 때마다 꺼내쓰고 싶으면 배열을 활용한다
배열은 push를 사용해야 하며 주의할 점은 다음과 같다
1) animation 외부에서 포탄의 인스턴스를 정의하고 animation 내부로 가져오게 되면 두가지 문제점이 발생한다
하나는 계속해서 생성할 수 없게 되고(이미 외부에서 생성한 인스턴스) 기존 정해진 속도에서 가속도가 붙게 된다
2) animation 내부, if문 안에서 인스턴스 변수를 만들고 바로 배열에 집어넣어준다

(몸체와 발사부를 구분한다)

대포의 움직임일 때 애니메이션 효과가 있다

공의 움직임이 멈추거나 대포가 자신의 포탄에 맞으면 생명이 감소한다