Devjo의 코딩

작은 프로젝트지만 깃허브 서버를 이용해 게임을 올릴 수 있었습니다 이미 jekyll 테마를 적용한 상태였고 게시글의 형식인 md 파일에서 어떻게 index.html로 도달할 수 있을까 고민했습니다 잘 해결했지만 다음부터는 깃허브 블로그 구성을 고려해 포트폴리오를 만들어야겠다는 생각이 드네요

인트로 화면 리뉴얼 일러스트를 인트로 화면으로 도입하는 것에 대해 고심했다 결국 인트로 화면을 다시 만들고 메인 모듈을 새로 만들었다 작업시간이 좀 길었다. 코드 길이도 길었다. 영상부터 업로드했다 보스 이펙트 코딩 일정 타이머마다 공은 커지고 특정 시간에 도달하면 지우기를 반복하며 반짝이는 효과를 가진다 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..

캐릭터 좌우대칭 추가 계속 미뤘던 작업이었다. 중앙에서 공이 나가는 것이 아니기에 캐릭터가 반전되면 공의 발사위치부터 조준점 등 위치를 모두 바꿔야했다 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..

본래 1주일 정도를 기간으로 잡았지만 다른 활동참여로 인해 예상보다 늦어졌다 마무리 계획은 다음과 같다 1) 현재와 반대 방향키를 누를 때 마법사의 캐릭터와 좌표 모두 대칭이동 하나의 변수(on_left)를 지정한 뒤 마법사의 width를 중심으로 좌표들을 옮기는 방식을 구상하고 있다 2) 게임 진입화면 변경: 현재 너무 심플하다 canvas나 애니메이션을 활용하여 기대감을 높혀도 된다고 생각했다 ex) 마법사의 지팡이를 크게 그리고 반짝이는 이벤트 추가 3) 조준 가이드라인 변경: 현재 점선으로 되어있지만 원 두개를 활용하여 나침반 모양의 화살표를 좌표로 나타낼 수 있다고 생각했다 내일 도전해봐야 알 것이다

스테이지 시작화면, 클리어화면 추가 현재 코드와 맞물리게 하는 것이 조금 복잡했다 이런 방식으로 풀어갔다 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) 스테이지를 만들 때 같이 만들지 않았다: 당시에 ..

마나라는 제한 조건을 만들어준다 이용자에게 처음 마나를 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; t..

canvas내에서 애니메이션 동작을 직접 구현한다 gif 파일을 다 찾아놓았지만 canvas 내에서 활용할 방법이 구글 내에서는 없었다 또 이미지를 따로 로드하면 용량도 너무 커지고 각각 다른 이미지를 프레임마다 적용하려니 이게 맞나 싶었다 *핀터레스트(pinterest)에서 이미지를 무료로 제공해준다 결국 이미지 파일만 준비하고 나머지 애니메이션은 직접 그리기로 했다. 최소한의 부분만 준비한다 마법사의 부유효과 단순히 sin함수의 진동값을 사용하면된다 조준 방향키를 유지시 가속도가 붙는다 draw를 조금씩 이해하면서 자연스레 만들어냈다 하지만 다음 조건을 명심해야했다 1) 조준 방향이 이전 방향과 달라지면 가속도가 초기화된다 2) 한 방향으로 계속 유지해야만 가속도가 붙는다 이를 위해 timer함수와 ..

일정 목표를 달성했을 때 새로운 스테이지를 불러와야 한다 그래서 Constructor에서 한 번만 호출해주었던 Stage 인스턴스 정의를 animate로 조건문 안에 집어넣었다 1) 먼저 논리 변수를 true로 시작해 바로 stage1이 시작하도록 했다(당연히 사용된 stage_clear은 false(off)가 된다 2) 그리고 클리어 조건을 달성하면 stage_clear의 값을 true로 만들어 다음 스테이지가 로드된다 let stage_clear = true; //처음에 true값을 주어 시작 class App{ //animate내부에 if문에서 stage_clear가 켜지면 stage_level에 맞는 스테이지를 불러온다 animate(t){ window.requestAnimationFrame(th..

포탄 게이지 만들기 로딩창에서 사용하는 프로그레스 바(Progress Bar)와 같은 개념이다 초기 설계는 이러했다 1) 게이지는 0에서 100으로 왕복운동한다 2) 스페이스바를 길게 누르면 게이지가 채워진다 3) 게이지가 채워진 양의 비율로 공의 속도가 결정된다 4) 스페이스바를 누를 때만 나타난다 1) 게이지는 0에서 100으로 왕복운동한다 시각화를 위해 strokeRect(빈 게이지)와 fillRect(현재 게이지)를 이용했다 0) 위치는 cannon의 위치 위에 만들어야 했다 i) app.js에 수치화된 변수(gauge_percent)를 만들었고 ii) 이 변수에 따라 Gauge class의 draw 메소드 내부에 그려지는 fillRect의 너비 비율이 변하도록 한다 export class Gau..

원할 때 공의 색 바꾸기 쉽게 생각했다. 외부에서 변수 ball_type을 만들고 addEventLister을 통해 ball_type을 바꾸면 공이 이 값에 맞춰서 나갈 것이라 생각했다. *드로우 함수를 완벽히 이해하지 못했다 애니메이션, 드로우에서는 계속해서 함수값에 맞추어 그려주는 것이기 때문에 변수가 변하면 현재 나와있는 모든 공의 색이 변해버린다. 값을 fix해주는 방법을 찾아내야 했다 1)실패: 드로우 함수에 if문 설정: forEach로 계속 그리기 때문에 if문으로 나눠도 값이 변하면 따라 변한다 balls.forEach((ball_each, i, o) =>{ if(ball_type == 1){ ball_each.draw(this.ctx, 1, this.stageWidth, this.stag..