Cannon Game_day12: 인트로 화면 리뉴얼

Cannon Game_day12: 인트로 화면 리뉴얼

인트로 화면 리뉴얼

일러스트를 인트로 화면으로 도입하는게 맞는가 싶었다.

결국 인트로 화면을 다시 만들고 메인 모듈을 새로 만들었다

작업시간이 좀 길었다. 코드 길이도 길었다. 영상부터 업로드했다

보스 이펙트 코딩

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

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차로 마무리하게 되었다.

이후 계획에 따라 프로젝트의 진행여부를 결정하기로 했다

from http://devyoseph.tistory.com/33 by ccl(A) rewrite - 2021-10-07 07:02:02