마지막으로 다룰 부분은 게임의 속도 증가이다. 이전 게시물까지만 진행해도 기본적인 게임의 틀은 완성이다. 따라서 속도증가부분은 추가옵션이다. 하지만 속도 증가 없이는 일정 속도로 같은 키만 누르는 게임이라 지루함이 느껴질 수있을 것 같다. 따라서 시간이 지남에 따라 점점 속도가 증가되도록 추가 및 수정했다. 1. 속도 증가 속도 증가를 위해서는 중간에 속도를 다른 값으로 지정하여 변경할 수 있어야한다. 속도 증가방법을 찾아보니 기존에 쓰던 requestAimationFrame()으로는 할 수 없었다. requestAimationFrame()으로는 중간에 값을 변경하지 못했다. 그래서 setTimeout()으로 변경했다. 변경 전 function frameRepeatd(){ requestAnimationF..
게임에서 추가적으로 만들 부분은 타이머 표시, 점수, 게임오버 표시 및 재시작이다. 1. 타이머 및 점수 타이머는 게임 시작을 기준으로 얼마만큼 시간이 지났는지 텍스트로 나타낸다. 1) 시간 계산 function printTime() { time++; timeText=getTimeFormatString(); if(time%3==0&&speed>0.1){ speed-=0.3; } //stopClock(); } //시계 시작 - 재귀호출로 반복실행 function startClock() { printTime(); stopClock(); stopwatch = setTimeout(startClock, 1000); } //시계 중지 function stopClock() { if (stopwatch != null)..
이번 글에서는 게임의 기본 조작인 점프와 캐릭터(캐릭터, 장애물)디자인과 가로로 지나가는 배경을 만들어보고자 한다. 1. 조작 1) 점프 게임의 기본 조작은 캐릭터가 점프다. 캐릭터가 장애물을 점프해서 피하거나, 점프하지 않고 지나가는 것이다. 조작키는 '스페이스바(spacebar)'로 지정하여 조작키를 누를때 마다 캐릭터가 일정 높이를 점프한 후 원래 지면으로 돌아오도록 한다. let timer =0; let jumpTimer =0; let jumping=false; function frameRepeatd(){ requestAnimationFrame(frameRepeatd); timer++; ctx.clearRect(0,0,canvas.width,canvas.height); //------생략 if(j..
0. 구상 게임에서 기본적으로 등장하는 요소는 캐릭터와 장애물이다. 캐릭터는 처음 지정된 좌표 위치에 고정되어 점프할 때 y좌표만 변경된다. 장애물은 x좌표를 변경해 캐릭터쪽으로 이동시켜 마치 캐릭터가 장애물에게 가는 듯한 효과를 준다. 0) 캔버스 크기 캔버스 크기는 가로 800, 세로 260으로 설정했다. canvas.width = 800; canvas.height = 260; 1) 기본 배치(캐릭터, 장애물) const character = { x:16, y:165, width:45, height:85, draw(){ ctx.fillStyle = 'green'; ctx.fillRect(this.x,this.y,this.width,this.height); } } class Flower{ constru..
크롬 공룡게임? 크롬에서 인터넷 연결이 끊기면 나오는 게임이 있다. 공룡 캐릭터로 장애물을 피하면 되는 조작이 단순한 게임이다. 하지만 한 번 시작하면 상당히 중독성이 있다. 위와 같은 공룡게임의 조작방식 및 게임 방식을 이용하여 유서하게 javascript를 통해 구현해보고자 한다. 준비과정 - 튜토리얼 기초적인 튜토리얼은 yuotube - 코딩애플님의 '크롬 공룡게임 만들기1편~2편'을 참고했다. 크롬 공룡게임 만들기 1편 (자바스크립트로 2d 게임 개발하려면) - YouTube 강의에서 기본적인 코드와 설명을 해주고 있으므로 개발준비는 위를 참고하면 좋을 것 같다. 👇 youtube 강의에서 제공하는 내용 1) 네모 그리기 2) 애니메이션 만들기 - x좌표 이동 - 장애물 이동 구현(장애물 여러개 ..
