Cannon Game_day3 (2021.09.28)

물리엔진

초기 에너지

초기에너지 E를 변수로 받아 총 에너지를 이용해 물체의 운동을 설명하기는 어려웠다. 구상은 이러했다
1) 현재 물체의 높이와 속도를 받아 에너지의 총량을 계산
2) 벽에 부딪힐 때 에너지의 총량이 감소(마찰력에 의한 에너지)
3) 감소한 에너지에 이전 위치에너지를 빼고 비율에 맞춰 속도를 다시 부여
더 여러 기능이 생기면 만들어봐야겠다 

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

 

공의 무게

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

 

중력

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

포탄의 y속도는 draw메소드 내에서 프레임마다 중력가속도의 40분의 1만큼 감소한다

draw(ctx, stageWidth, stageHeight){
        //중력가속도
        this.vy += this.g/40;
}

벽에는 마찰력이 작용한다(부분해소)

에너지를 통해 마찰력에 의한 에너지 감소와 그에 따른 속도 감소는 설명하기 어려웠다.
대신 벽에 부딫히면 속도의 방향에 -1의 곱을 주면서 동시에 속도가 줄어들게 메소드를 변경했다

bounceWindow(stageWidth,stageHeight){
        const minX = this.radius;
        const maxX = stageWidth-this.radius;
        const minY = this.radius;
        const maxY = stageHeight-this.radius;

        //벽에 부딪힐 때 속도 감소
        if(this.x <= minX || this.x >= maxX){
            this.vx *= -0.90;
            this.vy *= 0.87;
            this.x += this.vx;
        //바닥
        } else if(this.y >= maxY){
            this.vy *= -0.75;
            this.vx *= 0.7; 
            this.y += this.vy;
        //천장
        } else if(this.y <= minY){
            this.vy *= -0.97;
            this.vx *= 0.9; 
            this.y += this.vy;
        }
    }

 

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

 

대포

대포가 이동할 수 있다

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

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

angle의 초기값을 Math.PI/4(45도)로 두고
addEventListener를 통해 위 방향키와 아래 방향키를 누르면
각각 PI/180만큼 angle변수가 증감하게 만들었다
증감된 angle을 ball 인스턴스에 넣었고
초기 속도 speed를 x축과 y축으로 분해하여
speed*cos(angle) speed*sin(angle)로 포탄의 방향을 설정했다

포탄이 발사된다

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

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

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

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

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