Cannon Game_day5 (2021.10.01)

원할 때 공의 색 바꾸기

쉽게 생각했다. 외부에서 변수 ball_type을 만들고 addEventLister을 통해
ball_type을 바꾸면 공이 이 값에 맞춰서 나갈 것이라 생각했다.
*드로우 함수를 완벽히 이해하지 못했다
애니메이션, 드로우에서는 계속해서 함수값에 맞추어 그려주는 것이기 때문에
변수가 변하면 현재 나와있는 모든 공의 색이 변해버린다. 

값을 fix해주는 방법을 찾아내야 했다

1)실패: 드로우 함수에 if문 설정: forEach로 계속 그리기 때문에 if문으로 나눠도 값이 변하면 따라 변한다

balls.forEach((ball_each, i, o) =>{
            if(ball_type == 1){
            ball_each.draw(this.ctx, 1, this.stageWidth, this.stageHeight);}
            if(ball_type == 2){
                ball_each.draw(this.ctx, 2, this.stageWidth, this.stageHeight);}
            if(ball_type == 3){
                ball_each.draw(this.ctx, 3, this.stageWidth, this.stageHeight);}
            if(ball_each.speed < 0.2){
                o.splice(i,1);}
        })

2)성공: 변하는 값을 일시적으로 생성한 뒤 자기 자신은 사라져야 한다
공을 if문에서 ball_type 변수를 switch문을 활용해 상수로 fix하고 push하는 식으로 구성했다.

if(fire_ball == true){
            //if함수 내부에서 볼을 정의하고 보낸다, 외부에서 정의한 걸 불러오면 오류
            switch(ball_type){
                case 1: var ball =  new Ball(1, ball_magnitude, this.cannon.x, this.cannon.y, ball_angle, this.stageWidth, this.stageHeight, ball_speed); break;
                case 2: var ball =  new Ball(2, ball_magnitude, this.cannon.x, this.cannon.y, ball_angle, this.stageWidth, this.stageHeight, ball_speed); break;
                case 3: var ball =  new Ball(3, ball_magnitude, this.cannon.x, this.cannon.y, ball_angle, this.stageWidth, this.stageHeight, ball_speed); break;
            }
            // var ball =  new Ball(1, this.cannon.x, this.cannon.y, ball_angle, this.stageWidth, this.stageHeight, ball_speed);
            balls.push(ball);
            fire_ball = false;
        }

3)성공: 반복문의 일회성을 이용. app.js에서 만든 변수를 일단 인스턴스 생성시에 넣어주고 if문 안에서 this.변수로 지정한다

//app.js 공 발사
if(fire_ball == true){
            var ball =  new Ball(ball_type, ball_magnitude,this.cannon.x, this.cannon.y, ball_angle);
            balls.push(ball);
            fire_ball = false;
        }

export class Ball{
    constructor(type, magnitude,cannonX, cannonY, angle){
        this.g = 9.81;
        this.magnitude = magnitude;
        this.angle = angle;
        this.ball_meet = false;

        switch(type){
            case 1: this.type = 1; console.log(this.type); break;
            case 2: this.type = 2; console.log(this.type);break;
            case 3: this.type = 3; console.log(this.type);break;
        }
 }

 

공과 벽의 상성 정하기

공과 벽의 상성을 정하고 전략성을 높히려고 했다 (물 → 불 → 식물)
1) 물(파랑)이면 불벽(빨강)과 만났을 때는 벽을 삭제하면서 통과하고
2) 물(파랑)이면 물벽(파랑)과 만났을 때는 반사되며 해당 벽을 삭제하고
3) 물(파랑)이면 식물(초록)과 만났을 때는 바로 배열에서 삭제되도록 했다 
단순히 collision check에서 if문을 활용했다