Cannon Game_day12: (2021.10.7) 인트로 화면 리뉴얼

인트로 화면 리뉴얼

일러스트를 인트로 화면으로 도입하는 것에 대해 고심했다
결국 인트로 화면을 다시 만들고 메인 모듈을 새로 만들었다
작업시간이 좀 길었다. 코드 길이도 길었다. 영상부터 업로드했다

보스 이펙트 코딩
일정 타이머마다 공은 커지고 특정 시간에 도달하면 지우기를 반복하며 반짝이는 효과를 가진다

 draw(ctx, boss){
        this.x = boss.movingX+this.stageWidth/11;
        this.y = boss.movingY;
        this.ballX += this.vx;
        this.ballY += this.vy;
        if(this.pattern == 0){
            this.timer ++;
        
        if(this.timer >= 150){
            this.radius = this.stageWidth/40;
            ctx.fillStyle = 'rgba(217,239,169,0.2)';
            if(this.timer >= 160){
                this.radius = this.stageWidth/35;
                ctx.fillStyle = 'rgba(217,239,169,0.3)';}
            if(this.timer >= 170){
                this.radius = this.stageWidth/30;
                ctx.fillStyle = 'rgba(217,239,169,0.4)';}
            if(this.timer >= 180){
                this.radius = this.stageWidth/25;
                ctx.fillStyle = 'rgba(217,239,169,0.5)';}
            if(this.timer >= 190){
                this.radius = this.stageWidth/20;
                ctx.fillStyle = 'rgba(217,239,169,0.6)';}
            if(this.timer >= 200){
                this.radius = this.stageWidth/15;
                ctx.fillStyle = 'rgba(217,239,169,0.6)';}
            if(this.timer >= 200 && this.timer%3 ==0){
                this.radius = this.stageWidth/13;
                ctx.clearRect(0,0,this.stageWidth, this.stageHeight);}
            if(this.timer >= 300){
                this.radius = this.stageWidth/10;
                ctx.fillStyle = 'rgba(217,239,169,0.7)';}
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2 );
            ctx.fill();
            ctx.closePath();
            
            if(this.timer ==330){
                this.timer = 0;
                this.push = true;
            }
           }
          }         
 }

훗날 보스의 패턴을 랜덤화하고 나누기 위해 pattern 변수를 만들었다
this.push는 외부로 보내져서 true면 공을 발사한다

import{Boss}from'./element/boss.js';
import{Withboss}from'./element/withboss.js';
import{BossAttack}from'./element/bossattack.js';
import{Ball}from'./element/ball.js';
import{Gauging}from'./element/gauging.js';
let balls = [];
class First{
    constructor(){
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
        document.body.appendChild(this.canvas);
        this.canvas.className = 'first';
        window.addEventListener('resize', this.resize.bind(this));
        this.resize();
        window.requestAnimationFrame(this.animate.bind(this));
        this.boss = new Boss(this.stageWidth, this.stageHeight);
        this.bossAttack = new BossAttack(this.stageWidth,this.stageHeight);
        this.withBoss = new Withboss(this.stageWidth, this.stageHeight);
        this.gauging = new Gauging(this.stageWidth, this.stageHeight);
    }

    resize(){
        this.stageWidth = document.body.clientWidth;
        this.stageHeight = document.body.clientHeight;
        this.canvas.width = this.stageWidth*2;
        this.canvas.height = this.stageHeight*2;
        this.ctx.scale(2,2);
    }

    animate(t){
        window.requestAnimationFrame(this.animate.bind(this));
        this.ctx.clearRect(0,0,this.stageWidth, this.stageHeight);
        this.bossAttack.draw(this.ctx, this.boss);
        this.boss.draw(this.ctx);
        this.withBoss.draw(this.ctx);

        if(this.bossAttack.push == true){
            for(let i=0; i<12; i++){
                var ball = new Ball(true, this.stageWidth/10, 4, 2, 2.5,this.bossAttack.x+this.bossAttack.radius_b*Math.cos(Math.PI*i/6), this.bossAttack.y+this.bossAttack.radius_b*Math.sin(Math.PI*i/6), Math.PI*i/6, this.stageWidth, this.stageHeight)
            balls.push(ball);
            }
            this.bossAttack.push = false;
        }
        balls.forEach((ball_each, i, o) =>{
            ball_each.draw(this.ctx, this.stageWidth, this.stageHeight, true);
            if(ball_each.speed < 15 || ball_each.ball_meet == true){
                o.splice(i,1);}
        })

        this.gauging.draw(this.ctx, true, this.withBoss.movingX, this.withBoss.movingY, 4, 2);
    }

}

window.onload = () =>{
    new First();
}

start.index에 도입되는 모듈을 만들었고 현재까지 만든 모듈에 기초해 만들었다

HTML, CSS, 자바스크립트 DOM을 활용한 게임만들기 프로젝트를 1차로 마무리하게 되었다.
이후 계획에 따라 프로젝트의 진행여부를 결정하기로 했다