CHAPTER 11. 자바스크립트와 캔버스로 게임만들기
캔버스 캔버스는 <canvas> 요소로 생성 캔버스는 HTML 페이지 상에서 사각형태의 영역 실제 그림은 자바스크립트를 통하여 코드로 그려야 한다.
컨텍스트 객체 컨텍스트(context) 객체 : 자바스크립트에서 물감과 붓의 역할을 한다. var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
예제 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border: 1px dotted red"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "#00FF00"; context.fillRect(0, 0, 100, 50); </script> </body> </html>
직선 그리기 예제 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="300" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(0, 0); context.lineTo(100, 100); context.lineTo(150, 50); context.lineTo(200, 100); context.stroke(); </script> </body> </html>
사각형 예제 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="300" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.rect(10, 10, 100, 100); context.fillStyle = "yellow"; context.fill(); </script> </body> </html>
원 예제 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head>
원 예제 <body> <canvas id="myCanvas" width="300" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.arc(100, 100, 80, 0, 2.0 * Math.PI, false); context.strokeStyle = "red"; context.stroke(); context.arc(100, 100, 60, 0, 1.5 * Math.PI, false); context.closePath(); context.strokeStyle = "blue"; context.arc(100, 100, 40, 0, 1.5 * Math.PI, false); context.strokeStyle = "green"; </script> </body> </html>
커브 예제 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="300" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(90, 130); context.bezierCurveTo(140, 10, 288, 10, 288, 130); context.lineWidth = 10; context.strokeStyle = 'black'; context.stroke(); </script> </body> </html>
도형 예제 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="300" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(50, 100); context.lineTo(75, 50); context.lineTo(100, 100); context.closePath(); context.fillStyle = "green"; context.fill(); </script> </body> </html>
텍스트 예제 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="300" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.font = 'italic 38pt Arial' context.fillText('Hello World!', 20, 100); </script> </body> </html>
그라디언트 createLinearGradient(x, y, x1, y1) - 선형 그라디언트를 생성한다. createRadialGradient(x, y, r, x1, y1, r1) - 원형 그라디언트를 생성한다.
선형 그라디언트 예제 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="300" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var gradient = context.createLinearGradient(0, 0, 200, 0); gradient.addColorStop(0, "white"); gradient.addColorStop(1, "red"); context.fillStyle = gradient; context.fillRect(10, 10, 180, 90); </script> </body> </html>
패턴 채우기 <!DOCTYPE HTML> <html> <head> .. <body> <canvas id="myCanvas" width="300" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var image = new Image(); image.src = "pattern.png"; image.onload = function () { var pattern = context.createPattern(image, "repeat"); context.rect(0, 0, canvas.width, canvas.height); context.fillStyle = pattern; context.fill(); }; </script> </body> </html>
이미지 그리기 <body> <canvas id="myCanvas" width="600" height="400"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var image = new Image(); image.src = "html5_logo.png"; image.onload = function () { context.drawImage(image, 0, 0); }; </script> </body>
도형 변환 평행이동(translation) 신축(scaling) 회전(rotation) 밀림(shear) 반사(mirror) 행렬을 이용한 일반적인 변환
평행이동 <body> <canvas id="myCanvas" width="600" height="400"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.fillStyle = "blue"; context.fillRect(0, 0, 100, 100); context.translate(50, 50); context.fillStyle = "red"; </script> </body>
애니메이션 Bouncing Ball 예제
Bouncing Ball 예제 <!DOCTYPE html> <html> <head> <title>Bouncing Ball Example</title> <style> canvas { background: yellow; border: 1px dotted black; } </style>
Bouncing Ball 예제 <script> var context; var dx = 5; var dy = 5; var y = 100; var x = 100; function draw() { var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.clearRect(0, 0, 300, 200); context.beginPath(); context.fillStyle = "red"; context.arc(x, y, 20, 0, Math.PI * 2, true); context.closePath(); context.fill(); if (x < (0 + 20) || x > (300 - 20)) dx = -dx; if (y < (0 + 20) || y > (200 - 20)) dy = -dy; x += dx; y += dy; } setInterval(draw, 10); </script> </head>
Bouncing Ball 예제 <body> <canvas id="myCanvas" width="300" height="200"></canvas> </body> </html> 웹브라우저로 보기
간단한 게임 제작 앵그리 버드와 유사한 다음과 같은 게임을 제작
간단한 게임 만들기 <html> <head> <title>Javascript Game</title> <style> canvas { border: 1px dotted red; /* 캔버스에 경계선을 그려준다. */ background-color: #fcff00; /* 캔버스의 배경색을 지정한다. */ } </style> <script> var context; /* 컨텍스트 객체*/ var velocity; /* 사용자가 입력한 공의 초기속도 */ var angle; /* 사용자가 입력한 공의 초기각도 */ var ballV; /* 공의 현재 속도 */ var ballVx; /* 공의 현재 x방향 속도 */ var ballVy; /* 공의 현재 y방향 속도 */ var ballX = 10; /* 공의 현재 x방향 위치 */ var ballY = 250; /* 공의 현재 y방향 위치 */ var ballRadius = 10; /* 공의 반지름 */ var score = 0; /* 점수 */
간단한 게임 만들기 var image = new Image(); /* 이미지 객체 생성 */ image.src = "lawn.png"; /* 이미지 파일 이름 설정 */ var backimage = new Image(); backimage.src = "net.png"; var timer; /* 타이머 객체 변수 */ /* 공을 화면에 그린다. */ function drawBall() { context.beginPath(); context.arc(ballX, ballY, ballRadius, 0, 2.0 * Math.PI, true); context.fillStyle = "red"; context.fill(); } /* 배경을 화면에 그린다. */ function drawBackground() { context.drawImage(image, 0, 270); context.drawImage(backimage, 450, 60); /* 전체 화면을 그리는 함수 */ function draw() { context.clearRect(0, 0, 500, 300); /* 화면을 지운다. */ drawBall(); drawBackground();
간단한 게임 만들기 /* 초기화를 담당하는 함수 */ function init() { ballX = 10; ballY = 250; ballRadius = 10; context = document.getElementById('canvas').getContext('2d'); draw(); } /* 사용자가 발사 버튼을 누르면 호출된다. */ function start() { init(); velocity = Number(document.getElementById("velocity").value); angle = Number(document.getElementById("angle").value); var angleR = angle * Math.PI / 180; ballVx = velocity * Math.cos(angleR); ballVy = -velocity * Math.sin(angleR); timer = setInterval(calculate, 100); return false;
간단한 게임 만들기 /* 공의 현재 속도와 위치를 업데이트한다. */ function calculate() { ballVy = ballVy + 1.98; ballX = ballX + ballVx; ballY = ballY + ballVy; /* 공이 목표물에 맞았으면 */ if ((ballX >= 450) && (ballX <= 480) && (ballY >= 60) && (ballY <= 210)) { score++; document.getElementById("score").innerHTML = "점수=" + score; clearInterval(timer); } /* 공이 경계를 벗어났으면 */ if (ballY >= 300 || ballY < 0) { draw(); </script> </head>
간단한 게임 만들기 <body onload="init();"> <canvas id="canvas" width="500" height="300"></canvas> <div id="control"> 속도<input id="velocity" value="30" type="number" min="0" max="100" step="1" /> 각도<input id="angle" value="45" type="number" min="0" max="90" step="1" /> <div id="score">점수 = 0</div> <button onclick="start()">발사</button> </div> </body> </html> 웹브라우저로 보기
Q & A