재미로 게임 한 번 만들어 보고 싶어서 유튜브 뒤적거리다가 흥미로운 강의를 발견했다.
https://www.youtube.com/watch?v=qkTtmgCjHhM&t=97s
나는 데브시스터즈의 쿠키런:오븐브레이크의 찐팬인데 언젠가 짭키런을 만들어서 배포해보고 싶다는 목표가 있다. 수익 창출을 한다는건 아니고 오직 팬심만으로 하는거다. 사랑해요 데브시스터즈..
아무튼 그래서 쿠키런보다는 단순하지만 같은 러닝게임인 크롬 공룡 게임을 한 번 만들어보려고 한다. JS는 꽤 써봤지만 게임 개발은 어떤 식으로 하는 건지 감이 잘 안왔는데, 영상에서 굉장히 쉽고 재미있게 설명해 주셔서 잽싸게 따라해 봤다.
BoB 활동을 하면서는 JS를 이틀 공부하고 실전에 투입됐기 때문에 기본적인 개념이 부족한 감이 있는데, 이 영상을 잘게 쪼개서 단계별로 개념들을 복습하며 게임을 만들어 보려고 한다. 진행은 느려도 단순히 따라 치는 것 보다는 의미있을 것이다.
게임을 만들려면 다음 세 가지를 할 수 있어야 한다.
1) 화면에 네모, 원을 그릴 수 있어야 함
css 이용 or canvas 태그 이용, 게임에 사용되는 unit 생성을 위해
2) 프레임마다 코드 실행을 할 수 있어야 함
애니메이션을 위해
3) collision check를 할 수 있어야 함
장애물 충돌, 이벤트 발생 등을 위해
이 내용들은 다음 글부터 순서대로 작성할 예정이다.
본격적인 개발에 앞서 간단하게 환경 구축부터 해놨다. index.html과 main.js 파일을 만들고 둘을 연결했다.
html로 작성된 웹 브라우저는 한 번 출력되면 자기 자신을 바꿀 수 없다. 하지만 JS를 이용하면 JS 코드에 따라서 웹 페이지 디자인이 바뀐다. 즉 JS는 html을 제어하는 언어로, 웹 페이지를 동적으로 다이나믹하게 만들어 준다. 기본적으로 JS는 html 위에서 동작하는 언어기 때문에 script 태그를 이용해 "지금부터 JS 코드가 시작된다"고 표시를 해줘야 한다. 다음은 index.html이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="main.js"></script>
</body>
</html>여기서는 script 태그 안에 인라인으로 JS 코드를 작성하는 대신 .js 파일을 만들어 연결했다.
canvas 태그는 뭘까?
canvas는 HTML 요소 중 하나로, 스크립트(보통은 자바스크립트)를 사용하여 그림을 그리는 데에 사용된다. 예를 들어 그래프를 그리거나 사진을 합성하거나 애니메이션을 만드는 데에 사용될 수 있다.
canvas에는 다음과 같이 id, width, height 속성이 있다. width 및 height 속성을 지정하지 않으면 처음 너비는 300 픽셀이고 높이는 150 픽셀이라고 한다.
<canvas id="example" width="150" height="150"></canvas>
canvas 엘리먼트는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 렌더링 컨텍스트(rendering contexts)를 노출하여 출력할 컨텐츠를 생성하고 다루게 된다.
캔버스는 처음에 비어있으므로 무언가를 표시하기 위해서는 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 해야 한다. 이 때 getContext() 메서드를 이용해서 랜더링 컨텍스트와 렌더링 컨텍스트의 그리기 함수들을 사용할 수 있다. getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 매개변수를 가지며, 우선은 2D 그래픽을 적용해 보겠다.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth - 100;
canvas.height = window.innerHeight - 100;첫 번째 줄은 document.getElementById() 메서드를 호출하여 <canvas> 요소를 표시할 DOM을 검색한다. 요소가 있으면 getContext() 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있다.
이렇게 화면에 그림을 그리기 위한 최소한의 코드를 작성해 봤다. 다음에는 게임에 사용되는 유닛을 그려 볼 것이다.
'JS & CSS & HTML' 카테고리의 다른 글
| CSS 기본 문법 / 단위 / position / animation (2) | 2022.03.03 |
|---|---|
| JS Object (0) | 2022.02.25 |
| 크롬 공룡 게임 만들기(4/4): 장애물 충돌 체크 (0) | 2022.01.23 |
| 크롬 공룡 게임 만들기(3/4): 장애물 관리 및 점프 구현 (0) | 2022.01.23 |
| 크롬 공룡 게임 만들기(2/4): 공룡과 장애물 만들기 (0) | 2022.01.21 |