벽돌게임 만들기(1) -캔버스 Setting-
자바스크립트 내공을 높이는 방법은 여러가지가 있다. 그 중에서 가장 확실한 방법은 게임제작이다. 특히, 고전게임들을 자바스크립트로 하나씩 만들어가다보면 재미와 실력을 동시에 쌓을 수 있다. 이번 포스팅부터 패턴을 사용하지 않은 절차지향식의 자바스크립트로 '벽돌깨기 게임'을 제작해보자.
Node.JS + Express프레임웍으로 로컬서버를 오픈하자.
1 『 껍데기 파일 만들기 』
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="./stylesheet/style.css"/>
</head>
<body>
<h1>Brick Game Start</h1>
<canvas id="gameCanvas" width="800" height="600">
</canvas>
<script src="./javascripts/brick.js"></script>
</body>
</html>
Canvas 태그를 생성하고, id값으로 'gameCanvas'를 사용한다.
2 『 css 설정 』
* {
padding:0;
margin:0;
}
#gameCanvas {
background:#eee; // 배경색
margin:0 auto; // 중간 정렬
display:block // 줄 지어 정렬가능
}
3 『brick.js설정 』
brick.js파일에서 Canvas를 설정한다.
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
4 『draw함수 구현 』
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
setInterval( draw, 10);
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
function draw( ){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.arc(x,y,25,0,Math.PI*2);
ctx.fillStyle ='tomato';
ctx.fill();
ctx.closePath();
x += dx;
y += dy;
}
-> setInterval함수는 캔버스 내의 움직이는 오브젝트가 있을 때 사용하는 내장함수다.
-> setInterval함수의 첫번째 인자로써 draw( )함수를 설정한다.
-> ctx.arc => 원을 그린다.
-> x,y,dx,dy를 draw함수 밖에서 설정해주고, 해당값을 더하도록 만든후 ctx.clearRect()로 초당 10번씩 캔버스를 다시 그려준다.
-> 참고로 캔버스는 아래사진처럼 좌측 상단좌표가 0,0이다.
5 『 drawBall()함수 구현 』
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
//setInterval구현
setInterval( draw , 10 )
var x = canvas.width;
var y = canvas.height;
var dx = 2;
var dy = -2;
function drawBall( ){
ctx.beginPath( );
ctx.arc( x , y , 20, 0, Math.PI * 2 );
ctx.fillStyle = 'tomato';
ctx.fill( );
ctx.closePath( );
}
function draw( ) {
ctx.clearRect( 0 , 0 , canvas.width , canvas.height );
drawBall( );
x += dx;
y += dy;
}
-> draw함수에는 다른 오브젝트를 넣어서 사용할 수 있게끔, drawBall ( )함수로 공 함수를 따로 만든다.
-> x,y값은 다른 오브젝트 움직임도 동일하게 적용가능하기 때문에 그대로 draw함수에 넣어준다. 위의 코드를 실행하면 아래처럼 원이 움직인다.
'웹개발 자료실 > 웹게임제작 Code' 카테고리의 다른 글
| 자바스크립트 내공기르기(6) - 벽돌충돌 - (2) | 2019.04.12 |
|---|---|
| 자바스크립트 내공기르기(5) - 벽돌 쌓기 - (0) | 2017.08.01 |
| 자바스크립트 내공 기르기(4) -Game Over 설계- (0) | 2017.07.31 |
| 자바스크립트 내공 기르기 (3) -벽돌 움직이기- (0) | 2017.07.28 |
| 자바스크립트 내공기르기 (2) - 공 충돌 만들기 - (0) | 2017.07.27 |
댓글