javascript game (1)

2017-04-17

game, html5, js

잡담

javascript와 친해지기 위해 뭐가 좋을까 고민을 하다가

예전에 codeschool.com에서 웹으로 만든 게임을 본 것 같은 기억이 있어서

한번 따라해볼까… 하고 들어가봤는데 못찾았다 ㅋㅋ

그래서 Google에서 검색해보니 MDN(Mozilla Developer Network)에서 벽돌 깨기 튜토리얼을 찾았다.

순서는 다음과 같다. (링크는 원문을, 옆에 해쉬 태크는 본 블로그로!)

데모를 보자. [여기] 를 클릭하면 데모를 확인할 수 있다.

그럼 따라해보자!

first

캔버스 생성과 그리기!

먼저, html 파일을 만든다. 여기서 중요한건, canvas 태그를 만들고, 그 안에서 벽돌을 부시고 지지고 할꺼다.

그럼 만들어보자.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
	// JavaScript 코드가 여기에 들어갈 것입니다.
</script>

</body>
</html>

html은 간단하니 따로 설명은 생략하겠다.

javascript에서 canvas 엘리먼트의 아이디를 가져와서 지지고 볶고 해야한다. 이번 튜토리얼은 pure javascript 이므로 오직 javascript 문법만을 통해 구현을 할 것이다.

아래 코드는 canvas 엘리먼트를 가져오고, 그 canvas를 2d로 설정 후, 사각형을 그리는 예제이다.

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();

위 코드를 보면, ctx.beginPath()는 그리기를 시작한다고 알려주는 메소드이며, ctx.closePath()는 그리기가 끝났다고 알리는 메소드이다. 즉, 그리고 지지고 볶는 로직은 두 메소드 안에 작성하면 된다.

여기에서는 ctx.rect() 메소드를 통해 사각형을 그리는데 x 좌표의 시작 위치가 20px, y 좌표의 시작 위치가 40px이며, width와 height를 모두 50으로 정 사각형을 그리는 것이다.

ctx.fillStyle을 통해 색상을 지정할 수 있으며, FF0000는 빨강을 의미한다. 그리고 ctx.fill()을 수행하면 ctx.fillStyle에서 지정된 색상으로 채워진다. ~~신기하지? 난 그랬는데~~

다음은 ~~동그라미~~ 원을 그리는 예제이다.

ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI*2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();

여기서 사각형 부분과 다른 점은 ctx.arc() 메소드와 ctx.fillStyle의 값이 문자열로 되어 있다는 점이다.

ctx.arc()의 첫 번째 파라미터는 원 중심의 x좌표를 가리키며 여기에서는 240px이다. 그럼 다음은 바로 느낌이 오지 않는가? y좌표이며 260px을 나타낸다. 그 다음은?? 길이가 20px인 반지름을 나타낸다. 그럼 그 다음은??? 원의 시작과 끝의 각도를 각각 나타내며 라디안 값으로 나타낸다. 마지막 파라미터는 옵션이며, 그리는 방향을 나타내는데 false는 시계 방향을, true는 반시계 방향을 나타낸다. ~~복잡하네~~

ctx.fillStyle은 맨 처음처럼 16진수도 되고, 색상 키워드도 되고, rgba() 함수도 된다고 한다.

그리고 마지막! 원의 외곽선에 색상을 부여해보자.

ctx.beginPath();
ctx.rect(160, 10, 100, 40);
ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
ctx.stroke();
ctx.closePath();

rgba() 함수의 파라미터는 각각 red, green, blue, alpha 값을 나타내는데, 여기서는 불투명한 파란색을 나타내는 것이다.

그럼 나머지는 다음 시간에…

_이 포스트는 MDN 2D Breakout game 의 튜토리얼을 참고한 내용 입니다._

Dev Huna

JavaScriptGame

javascript game (1)

잡담

first