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문을 활용했다

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.