Cannon Game_day6 (2021.10.02) 게이지 바, 프로그레스 바

포탄 게이지 만들기

로딩창에서 사용하는 프로그레스 바(Progress Bar)와 같은 개념이다
초기 설계는 이러했다
1) 게이지는 0에서 100으로 왕복운동한다
2) 스페이스바를 길게 누르면 게이지가 채워진다
3) 게이지가 채워진 양의 비율로 공의 속도가 결정된다 
4) 스페이스바를 누를 때만 나타난다

1) 게이지는 0에서 100으로 왕복운동한다
시각화를 위해 strokeRect(빈 게이지)와 fillRect(현재 게이지)를 이용했다
  0) 위치는 cannon의 위치 위에 만들어야 했다
  i)  app.js에 수치화된 변수(gauge_percent)를 만들었고
 ii) 이 변수에 따라 Gauge class의 draw 메소드 내부에 그려지는 fillRect의 너비 비율이 변하도록 한다

export class Gauge{
    constructor(cannon, stageHeight){
        this.x = cannon.x;
        this.y = cannon.y - stageHeight/10;
    }
    //ctx와 외부변수 gauge_percent를 받는다
    draw(ctx, gauge_percent, stageWidth, stageHeight){
        this.width = stageWidth/20;
        this.height = stageHeight/80;
        //총 계산식
        this.present_gauge = gauge_percent*0.01*this.width;
        
        ctx.fillStyle = 'gray';
        ctx.strokeRect(this.x, this.y, this.width, this.height);
        ctx.fillRect(this.x, this.y, this.present_gauge, this.height);
    }
}

왕복운동은 어떻게 만들어야 할까 고민했다. 다음과 같이 추상화했다
1) 게이지는 0에 닿으면 100에 도달할 때까지 증가, 100에 닿으면 0에 도달할 때까지 감소한다
2) boolean변수(gauge_full)을 만들어 false일 때는 감소하고 true일 때는 증가하도록 한다
3) 게이지를 수치화한 변수(gauge_percent)가 0에 도달한 순간 변수는 false값을 바뀌고
4) 100에 도달하는 순간 변수는 true값으로 바뀐다
5) 이 변수가 false인 동안은 gauge_percent가 증가하며 true인 동안은 감소한다

//이벤트 추가
document.addEventListener('keydown', this.fire_before.bind(this), false);

//스페이스바가 다운인 상태에서 on_gauge변수가 켜진다
fire_before(e){
        if(e.code === 'Space'){
            on_gauge = true;
        }
    }
    
animate(t){
        //게이지
        this.gauge.draw(this.ctx, gauge_percent, this.stageWidth, this.stageHeight);
        //on_gauge가 켜있는 동안에는 gaugeMove()메소드가 발동한다
        if(on_gauge === true){
            this.gaugeMove();
        }

//게이지
let gauge_full = false;
let gauge_percent = 0;

//0과 100을 기준으로 gauge_full이 꺼지고 켜진다
gaugeMove(){
        if(gauge_percent == 100){
            gauge_full = true;
        }else if(gauge_percent == 0){
            gauge_full = false;
        }

        let full = gauge_full;
        if(!full){
            gauge_percent++;
        }
        if(full){
            gauge_percent--;
        }
    }

 

2) 스페이스바를 길게 누르면 게이지가 채워진다
이것은 적절한 표현이 아니었다.
스페이스를 키다운한 이후 키업까지 메소드가 켜진다 로 생각해야했다
 i) keydown시 발동하는 fire_before() 메소드에서 on_gauge의 값 = true;
ii) keyup시 발동하는 fire_after() 메소드에서 on_gauge의 값 = false;
이를 이용해 animation 내부에서 on_gauge에 따라 gaugeMove가 켜지고 꺼지게 된다 

//키업 이벤트를 추가해준다
document.addEventListener('keyup', this.fire_after.bind(this), false);

//space바의 keyup이 발동하는 순간 메소드는 중단되며 공은 발사된다
fire_after(e){
        if(e.code === 'Space'){
            on_gauge = false;
            fire_ball = true;
            gauge_percent=0;
        }
    }

 

3) 게이지가 채워진 양의 비율로 공의 속도가 결정된다
가장 쉬운 부분이다. 공을 발사하기 직전에 현재 게이지의 값을 빈 변수에 담아주고
그 변수를 공을 생성하는 인스턴스 변수에 넣어서 연결시킨다
길게 설명할 필요는 없어보인다

fire_after(e){
        if(e.code === 'Space'){
            on_gauge = false;
            fire_ball = true;
            //변수에 값을 저장
            gauge_transfer = gauge_percent*0.01;
            gauge_percent=0;
        }
    }

 

4) 스페이스바를 누를 때만 나타난다
어려울 것이라 예상했는데 생각보다 어렵지 않았다
위에서 만들어 주었던, 스페이바를 keydown하는 동안에 켜지는 변수(on_gauge)을 그대로
Gauge class의 draw내부로 가져오면된다. 이 변수가 켜지고 꺼지는 것에 따라
그냥 그려주고 안 그려주면 된다. 매우 간단했다 

//on_gauge를 추가함
draw(ctx, on_gauge, gauge_percent, stageWidth, stageHeight){
        this.width = stageWidth/20;
        this.height = stageHeight/80;
        this.on_gauge = on_gauge;
        //총 계산식
        this.present_gauge = gauge_percent*0.01*this.width;
//if문을 통해 on_gauge가 켜질 때만 그려준다
        if(this.on_gauge == true){
        ctx.fillStyle = 'gray';
        ctx.strokeRect(this.x, this.y, this.width, this.height);
        ctx.fillRect(this.x, this.y, this.present_gauge, this.height);
    }    
    }