Cannon Game_day9: (2021.10.05) 게임 실패조건 만들기, 깜빡거리는 효과, 천천히 줄어드는 효과

마나라는 제한 조건을 만들어준다

이용자에게 처음 마나를 100부여하고 공을 사용할 때마다 마나를 소모해 게임 실패 조건을 만든다
마나는 다음과 같다
1) 공을 사용하면 마나의 값이 감소한다
2) 게이지를 채우는 중에 소모될 마나값이 깜빡거린다
3) 공을 쏘고나서 마나의 양은 바로 없어지는 것이 아니라 천천히 줄어든다

 

1) 소모될 마나값 정해주기

//ball.js 조건문에서 마나 소모량 값을 추가했다
switch(this.magnitude){
            case 1:  this.mass = 10;
                     this.radius = this.stageWidth/80;
                     this.mana_consumption = 2;
                     break;
            case 2:  this.g = 6.5;
                     this.radius = this.stageWidth/35;
                     this.mana_consumption = 4;
                     break;
            case 3:  this.g = 4.8;
                     this.radius = this.stageWidth/15;
                     this.mana_consumption = 10;
                     break;
        }

1) 특정 인스턴스에 넣는 것보다 app.js에서 메소드화 하는 것이 좀 더 목적에 부합했다 

manaConsumption(ball_magnitude){
        switch(ball_magnitude){
            case 1: mana_consumption=2; break;
            case 2: mana_consumption=4;break;
            case 3: mana_consumption=10;break;   }
    }

2) 공을 발사하면 마나값이 줄어든다

if(fire_ball === true){
            var ball =  new Ball(ball_type, ball_magnitude, gauge_transfer,this.cannon.x, this.cannon.y, ball_angle, this.stageWidth, this.stageHeight);
          	//치환메소드
            this.manaConsumption(ball_magnitude);
             //발사하면 정해준 마나만큼 소모된다
            mana_now -= mana_consumption;
            balls.push(ball);
            fire_ball = false;
            angle_timer = 0;
        }

3) 소모된 마나가 천천히 줄어든다
변수 두 개를 사용해서 다음과 같은 구상을 했다
0) 두 개의 변수를 사용한다. 초기값은 둘다 같다(=100)
1) 공을 쏘자마자 mana_now가 먼저 줄어든다
2) mana_now 변수를 따라 줄어든다

여기서 배운점은 굳이 특정 성향(변수를 따라 줄어드는 성질)을 가진 변수를 전역변수로 설정할 필요가 없다는 것이다.
인스턴스 내부에 초기값이 100일 때 전역변수를 생성하는 조건문을 만들고
외부에서 정의해준 전역변수와 지역변수의 값을 비교해 지역변수가 움직이도록 만들었다
지역변수는 전역변수보다 클 때만 줄어드는 성질을 가진다

draw(ctx, mana_now, on_gauge, mana_consumption){
        //전역변수가 100일 때만 지역변수가 정의된다
        //if문을 쓰지 않으면 지역변수가 계속정의되어 초기화된다
        if(mana_now == 100){
            this.mana_past = mana_now;
        }
        //전역변수 mana_now를 따라 지역변수 this.mana_past가 움직인다
        if(mana_now < this.mana_past){
        //마나가 줄어드는 속도 조정
            this.mana_past -= 0.2;
        }
        //천천히 이동하는 mana-past값을 보여준다
        let ratio = this.mana_past/100;
        let width_changing = ratio*this.width;

        ctx.fillStyle = 'rgba(87,131,207, 0.9)';
        ctx.fillRect(this.x, this.y, width_changing, this.height);
        ctx.beginPath();
        ctx.strokeStyle = 'rgba(87,131,207)';
        ctx.lineWidth = '5';
        ctx.strokeRect(this.x, this.y, this.width, this.height);
        ctx.closePath();

    }

 

 

4) 소모될 마나 깜빡이기

위에서 만들어준 치환메소드는 계속 실행되고 있다
아직 발사는 하지 않았지만 얼만큼 마나가 감소하는지 정보는 가지고 있다
이를 이용해 미리 감소된 이후의 마나를 계산할 수 있다
1) 발사 후 예상되는 마나를 미리 변수화한다
2) 타이머를 활용해 깜빡임을 사용한다

//Constructor내부: 타이머는 draw에서 정의하면 초기화된다
	this.timer_gap = 40;
	this.timer = 0;


//draw내부
draw(ctx, mana_now, on_gauge, mana_consumption){
	let glitterX = this.x+(mana_now-mana_consumption)*this.width/100;
	let glitterWidth = (mana_consumption/100)*this.width;
  //깜빡거림의 빈도를 조절할 타이머
  if(this.timer <= this.timer_gap){       
    this.timer ++;}
  if(this.timer == this.timer_gap){ this.timer =0;}
  //특정 타이머 값에만 마나가 지워진다
   if(on_gauge == true && this.timer>this.timer_gap/2){
            ctx.clearRect(glitterX, this.y+2, glitterWidth, this.height-4);
        }
}