Cannon Game_day11: (2021.10.7) 조준점 개선, 캐릭터 좌우대칭 추가, 인트로화면 개선

캐릭터 좌우대칭 추가

계속 미뤘던 작업이었다. 중앙에서 공이 나가는 것이 아니기에 캐릭터가 반전되면
공의 발사위치부터 조준점 등 위치를 모두 바꿔야했다
canvas에서 좌우대칭에 대해 알아봤고 확대·축소 기능이 있는 scale을 사용해야했다: ctx.scale(-1,1);
하지만 이미지에 적용했더니 반짝거리는 오류가 있었다. 검색했으나 관련 내용이 적어 단순하게
대칭되는 이미지를 업로드 후 연결했고 onLeft 변수를 통해 캐릭터의 상태에 따라 반응하도록 했다

//전역변수 on_Left
let onLeft = false;

//ball.js의 경우
if(onLeft == true){
        this.cannonX = cannonX;
        this.cannonY = cannonY;
        this.x = this.cannonX;
        this.y = this.cannonY;
    }    
        if(onLeft == false){
        this.cannonX = cannonX;
        this.cannonY = cannonY;
        this.x = this.cannonX+this.stageWidth/13;
        this.y = this.cannonY;    
    }

*이 외 guideline, gauging에서도 적용했다

조준점 개선

이 활동의 의의는 평소에 까다롭다, 번거롭다고 생각한 ctx.beginPath()를 자발적으로 했다는 점에 있다.
조준점을 어떻게 개선할 수 있을까 생각했고, 시계방향으로 도는 공의 모양이 마치 나침반과 비슷해
나침반의 모양을 본떠 만들기로 했다. 그림을 좌표로 이해하고 아는 만큼 활용 수 있는 부분은 매우 흥미로웠다

생각으로 구상했던 좌표계

//좌우로 나눠서 작성했다
if(onLeft == false){
this.startX = cannon.x+this.stageWidth/13+ this.length*Math.cos(angle)*3/2;
this.startY = cannon.y - this.length*Math.sin(angle)*3/2;
this.arriveX = this.startX + this.length*Math.cos(angle)/2;
this.arriveY = this.startY - this.length*Math.sin(angle)/2;
this.sideX1 = cannon.x + this.stageWidth/13 + this.length*Math.cos(angle+Math.PI/6);
this.sideY1 = cannon.y - this.length*Math.sin(angle+Math.PI/6);
this.sideX2 = cannon.x + this.stageWidth/13 + this.length*Math.cos(angle-Math.PI/6);
this.sideY2 = cannon.y - this.length*Math.sin(angle-Math.PI/6);}
       
else if(onLeft ==true){
this.startX = cannon.x + this.length*Math.cos(angle)*3/2;
this.startY = cannon.y - this.length*Math.sin(angle)*3/2;
this.arriveX = this.startX + this.length*Math.cos(angle)/2;
this.arriveY = this.startY - this.length*Math.sin(angle)/2;
this.sideX1 = cannon.x + this.length*Math.cos(angle-Math.PI/6);
this.sideY1 = cannon.y - this.length*Math.sin(angle-Math.PI/6);
this.sideX2 = cannon.x + this.length*Math.cos(angle+Math.PI/6);
this.sideY2 = cannon.y - this.length*Math.sin(angle+Math.PI/6);}

//위 삼각형
        if(ball_type ==1){
            ctx.fillStyle = 'rgba(14,39,168,0.6)';}
        if(ball_type ==2){
            ctx.fillStyle = 'rgba(49,79,63,0.6)';}
        if(ball_type ==3){
            ctx.fillStyle = 'rgba(177,57,37,0.6)';}
       
        ctx.beginPath();
        ctx.setLineDash([0]);
        ctx.lineJoin = 'round';
        ctx.moveTo(this.startX, this.startY);
        ctx.lineTo(this.arriveX, this.arriveY);
        ctx.lineTo(this.sideX1, this.sideY1);
        ctx.lineTo(this.startX, this.startY);
        ctx.fill();
        ctx.closePath();
       //아래 삼각형
        if(ball_type ==1){
            ctx.fillStyle = 'rgba(14,39,168,0.3)';}
        if(ball_type ==2){
            ctx.fillStyle = 'rgba(49,79,63,0.3)';}
        if(ball_type ==3){
            ctx.fillStyle = 'rgba(177,57,37,0.3)';}
       
        ctx.beginPath();
        ctx.setLineDash([0]);
        ctx.lineJoin = 'round';
        ctx.moveTo(this.startX, this.startY);
        ctx.lineTo(this.arriveX, this.arriveY);
        ctx.lineTo(this.sideX2, this.sideY2);
        ctx.lineTo(this.startX, this.startY);
        ctx.fill();
        ctx.closePath();

코드는 길어도 원 좌표계 원리의 연장선이었다. 공에 대한 조건을 많이 넣었기에 길었다

인트로화면 개선

원래는 지팡이가 중앙에 크게 있는 일러스트를 구상했지만 이미지를 찾기 어려웠다
괜찮은 인트로화면을 찾았지만 일러스트와 게임의 괴리가 발생했다
최종보스를 보여주는 식으로 흥미를 끌지는 더 고민해야겠다