-
크롬 공룡게임Youtube/개발자, 코딩 2023. 7. 29. 22:57
<앱 만들기 도전>
문득 앱이 만들고 싶어져서 찾아봤다. (앱에 대해 아무것도 모르지만 아무렴 어떤가!)
무작정 앱 만드는 법을 검색했다. 유튜브에는 좋은 영상들이 많았다.
앱을 만들기 위해서는 여러가지 방법이 있다. (다음은 조코딩님 유튜브 영상에서 참조한 스크린샷이다.)
출처: 유튜브 조코딩 JoCoding님 조코딩님의 영상에서는 미리 만든 웹이 있고, 이를 앱을 통해 띄우는 웹뷰앱 방식을 소개했다. 웹개발 종합반 강의를 통해 만들어본 웹페이지는 있었지만, 다른 것을 시도해보고 싶어서 이 방법은 보류했다.
<만만해보이는 것부터 도전하기>
그렇게 다른 레퍼런스를 찾아보던 중 눈에 띄는 것이 있었는데...
바로 크롬 공룡게임이었다.
인터넷이 연결되지 않은 상태에서 크롬에 접속하면 나오는 게임인데, 링크를 통해 접속할 수도 있다.
공룡은 앞으로 계속 달리고, 다가오는 장애물(선인장)들을 점프로 피해서 점수를 올리는 게임이다.
아마 누구나 한 번씩은 접해봤으리라 생각한다.
영상을 보고 거의 따라만 했다. 자바스크립트 문법을 아직 배우지 않았지만, 함수정의나, 반복문, if문은 쉽게 이해할 수 있었다. 이해한 것과 영상을 복습하면서 내용을 정리했다.
<html파일 생성>
공룡게임을 만드는 과정은 다음과 같다.
우선 index.html 파일을 만들고, html:5를 통해 뼈대를 제작한다. 이후 body 태그 안에 canvas 태그와 script 태그를 넣어주고, script 태그 안에 작성하지 않고 main.js 파일을 생성하여 이곳에 코딩한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id="canvas"></canvas> <script src="main.js"></script> </body> </html>
<js파일>
1. 사각형을 그릴 수 있다.
canvas 태그 활용한다.
캐릭터의 정보를 입력하고, draw() 함수를 정의하여 화면에 그린다.
캐릭터와 장애물 모두 사각형으로 구현할 수 있다.
2. 코드를 1초에 60번 실행하면 애니메이션을 만들 수 있다.(이때 60번이라는 숫자는 본인 모니터의 FPS에 따라 바뀔 수 있다.)
게임을 만들 때 시간은 프레임 단위로 생각해야 한다.
웹브라우저 기본 기능 requestAnimationFame() 을 사용해준다.이 기능 안에 입력되는 코드들은 1프레임마다 실행된다.
장애물이 200프레임마다 생성되도록한다.
프레임이 짧을 수록 장애물이 자주 나오니 난이도를 조절할 수 있다.생성된 장애물이 왼쪽으로 이동하도록 x좌표를 감소시킨다.
생성된 장애물은 캐릭터가 통과한 후에 쓰임을 다하니 특정 좌표를 지나면 자동으로 사라질 수 있도록 한다.
3. 점프 기능 구현캐릭터(공룡)의 y좌표를 줄이면 점프한다.
'점프중' 스위치를 만들어서, 스페이스바를 누를 때 실행되도록 한다.
점프중 스위치가 true 가 되면 캐릭터가 위로 이동하는데,계속해서 올라가면 안되니 최대값을 설정한다.
4. 충돌 감지 구현장애물 x 좌표에서 공룡 x 좌표를 뺀 값이 0미만 이면, 옆 변끼리 만난 것이다. 이 때, 공룡 x 좌표는 왼쪽끝에서 시작하므로, 충돌 감지 식은 다음과 같다.
장애물.x - (공룡.x + 공룡.너비) y좌표도 동일하다. x축과 y축의 차이가 모두 0 미만 일때 충돌로 인식한다.
충돌을 감지하면 애니메이션이 멈추도록 한다.(멈춘 화면 그대로 정지)5. 캐릭터와 장애물에 이미지 파일 넣기
이미지를 넣을 변수를 선언, png파일을 참조한다.
draw() 함수에 ctx.drawImag()를 넣어서 참조하는 그림파일을 그려줄 수 있도록 한다.
dino.png
cactus.png구글링에서 찾을 수도 있겠지만, 그림판 도형으로 간단하게 그려보았다.
6. 실행해보기
배경도 없고, 애니메이션도 없고, 장애물 속도도 똑같고, 심지어 점프 속도도 마음에 들지 않는다.
아직까지는 많은 부분에서 부족하다.
<보완 사항>
이 정도로 게임이 완성되는 것은 아니다.
점프도 중복으로 할 수 있고, 스코어 판도 없고, 공룡이 달리는 모션도 없다.
장애물이 나오는 갯수도 속도도 쭉 동일하다.
아직 게임이라고 할 수 있는 완성도는 아닌 것이다.
<후기>
아주 간단한 게임이지만 따라 만드는 과정을 통해
어떤 식으로 사고해야하는지 조금이나마 이해할 수 있었다.
'이렇게 간단한 것도 혼자 못한다니' 라는 생각보다는
따라하는 과정 그 자체를 즐기고자 한다.
즐기다보면 실력은 자연스레 향상되어 있을 것이다.
물론 필요한 공부는 스스로 보충해주어야 한다.
이번의 경우 자바스크립트 기본 문법 공부는 꼭 필요하다는 것을 느꼈다.
본문은 끝이고, 코드가 길어 제일 아래 쪽에 첨부한다.
<main.js 파일 코드>
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth - 100; canvas.height = window.innerHeight - 100; var dino = { x : 10, y : 200, width : 50, height : 50, draw(){ ctx.fillStyle = 'green'; ctx.fillRect(this.x, this.y, this.width, this.height); ctx.drawImage(img2, this.x, this.y) } } // 캐릭터를 만들기 전에, object의 자료로 정리한다. var img1 = new Image(); img1.src = 'cactus.png'; var img2 = new Image(); img2.src = 'dino.png'; class Cactus { constructor(){ this.x = 500; this.y = 200; this.width = 50; this.height = 50; } draw(){ ctx.fillStyle = 'red'; // ctx.fillRect(this.x, this.y, this.width, this.height); ctx.drawImage(img1, this.x, this.y) } } var timer = 0; var cactus여러개 = []; var 점프timer = 0; var animation; function 프레임마다실행할거(){ animation = requestAnimationFrame(프레임마다실행할거) timer++; ctx.clearRect(0,0, canvas.width, canvas.height); if (timer % 200 === 0) { var cactus = new Cactus(); cactus여러개.push(cactus); } cactus여러개.forEach((a, i, o)=>{ if(a.x < 0){ o.splice(i, 1) } a.x--; 충돌하냐(dino, a); a.draw(); }) if(점프중 == true){ dino.y--; 점프timer++; } if(점프중 == false){ if (dino.y < 200){ dino.y++; } } if (점프timer > 100){ 점프중 = false; 점프timer = 0 } dino.draw() } // 1초에 60번(모니터 FPS만큼) 안에 있는 코드가 실행된다. 프레임마다실행할거(); //충돌확인 function 충돌하냐(dino, cactus){ var x축차이 = cactus.x - (dino.x + dino.width); var y축차이 = cactus.y - (dino.y + dino.height); if(x축차이 < 0 && y축차이 < 0){ ctx.clearRect(0,0, canvas.width, canvas.height); cancelAnimationFrame(animation) } } var 점프중 = false; document.addEventListener('keydown', function(e){ if (e.code === 'Space'){ 점프중 = true; } }) //보완요소: 다중 점프 금지, 스코어, 공룡이 달리는: 스프라이트 이미지(달리는 프레임마다 이미지를 바꿈), 배경, 장애물이 나오는 속도 조절 등...