Cannon Game_day10: (2021.10.06) 스테이지 시작화면, 클리어화면, 움직임 제한, 조준 애니메이션 추가

스테이지 시작화면, 클리어화면 추가

현재 코드와 맞물리게 하는 것이 조금 복잡했다
이런 방식으로 풀어갔다
1) 전역변수로 wait_load라는 변수와 wait_timer를 만든다
2) 스테이지가 로드될 때 변수(wait_load)가 켜진다
3) wait_load가 켜지는 순간 시작화면이나 클리어화면이 보이며 wait_timer는 증가하기 시작한다
4) wait_timer가 text라는 인스턴스 내부 조건문에서 특정 시간을 달성하면 text내부의 특정 변수 this.text.wait이 켜진다
5) wait_load가 켜진 상태에서 this.text.wait도 켜지게 되면 모든 값이 초기화되며 화면은 사라지게된다

이렇게 복잡했던 이유는 두가지로 분석했다
1) 스테이지를 만들 때 같이 만들지 않았다: 당시에 어떤 게임을 만들어가야 하는지 불분명했다
2) 배열에서 제거를 사용하지 않았다: 배열의 경우 인스턴스 자체를 삭제하기 용이해서 다루기 쉬웠을 것 같다

//app.js 전역변수
let wait_timer = 0;
let wait_load = false;
animate(t){
//스테이지가 로드될 때 draw와 timer가 켜진다
if(wait_load == true){
           wait_timer++;
           this.text.draw(this.ctx, wait_timer,1,stage_level);
 //특정 시간에 도달하면 text내부의 변수가 꺼지게 된다
 			if(this.text.wait == false){
               wait_load = false;
               wait_timer = 0;
              this.text.wait = true;
          }
        }
//벽돌 개수가 0이 될 때 draw와 timer가 켜진다
        if(bricks.length == 0){
            wait_timer++;
           this.text.draw(this.ctx, wait_timer,2);
           if(this.text.wait == false){
               stage_clear = true;
               stage_level++;
               balls = [];
               wait_timer = 0;
               this.text.wait = true; 
          }
        } 
 }

움직임 제한

마법사가 화면 밖을 나가는 경우가 발생했다
처음에는 텔레포트 거리만큼 계산해서 특정 범위 안에서만 텔레포트를 제한해야되나 싶었지만
마법사의 좌표가 어떤 방식으로든 화면 너비를 벗어나면 끝부분으로 돌아오도록 만들었다

//메소드화
preventOut(cannonX, cannonWidht){
        if(cannonX<=0){
            this.cannon.x = 0;}
        if(cannonX +cannonWidht>=this.stageWidth){  
            this.cannon.x = this.stageWidth-cannonWidht;
        }
    }

 

조준 애니메이션: 잔상효과

조준을 하게 되면 변수(on_gauge)가 켜진다
인스턴스 내부 타이머는 계속 움직이며 타이머에 맞게 각도는 증가한다
공을 발사하는 위치 부분을 기준으로 공마다 고유의 회전 반지름을 가지게 되고
타이머가 움직이는 동안 각도 증가에 맞추어 회전하는 효과를 낸다
반복문을 활용하여 색에 투명도를 넣고 각도마다 공을 그려넣어 잔상효과를 만들었다

//증가할 각도는 constructor에서 정의해준다 (초기화 방지)

draw(ctx, cannonX, cannonY, ball_type, ball_magnitude){
        //현재 마법사의 위치 가져오기
         this.x = cannonX + this.stageWidht/13;
         this.y = cannonY;
        //잔상 개수 설정하기
         this.shadow = 10;
		
         this.radius = this.stageWidht/80;
            
           for(let i=0; i<this.shadow; i++){
           ctx.fillStyle = 'rgba(48,86,149,0.2)'; break;
           ctx.beginPath();
   		//공의 좌표는 원 주위를 맴돈다
           ctx.arc(this.x+this.radius*Math.cos(this.angle+i*this.angle_move), this.y+this.radius*Math.sin(this.angle+i*this.angle_move), this.stageHeight/100, 0, Math.PI*2);
           ctx.closePath();
           ctx.fill();
           }
        //각도는 정해준 양 만큼 계속 증가한다
        this.angle += this.angle_move;
    }