데블스캠프2012/셋째날/앵그리버드만들기 - Revision history

imported>qa22ahj at 05:51, 29 June 2012

2012-06-29T05:51:59Z

← Older revision		Revision as of 05:51, 29 June 2012
Line 1:		Line 1:
	= 앵그리버드 만들기 =		= 앵그리버드 만들기 =
			[[File:bird.png]]
	* HTML5 canvas를 이용해 앵그리버드를 만들어봅시다.		* HTML5 canvas를 이용해 앵그리버드를 만들어봅시다.
	* [http://clug.kr/~jereneal20/devils.php 링크]		* [http://clug.kr/~jereneal20/devils.php 링크]

imported>qa22ahj at 18:36, 28 June 2012

2012-06-28T18:36:25Z

@@ Line 64: / Line 64: @@
   &lt;/html&gt;
 ----
 [[데블스캠프2012]]

imported>jereneal20 at 13:31, 27 June 2012

2012-06-27T13:31:53Z

← Older revision		Revision as of 13:31, 27 June 2012
Line 1:		Line 1:
	= 앵그리버드 만들기 =		= 앵그리버드 만들기 =
	* HTML5 canvas를 이용해 앵그리버드를 만들어봅시다.		* HTML5 canvas를 이용해 앵그리버드를 만들어봅시다.
			* [http://clug.kr/~jereneal20/devils.php 링크]
	<!DOCTYPE HTML>		<!DOCTYPE HTML>
	<html>		<html>

imported>jereneal20 at 13:27, 27 June 2012

2012-06-27T13:27:09Z

← Older revision		Revision as of 13:27, 27 June 2012
Line 62:		Line 62:
	</body>		</body>
	</html>		</html>
			----
			[[데블스캠프2012]]

imported>jereneal20 at 13:26, 27 June 2012

2012-06-27T13:26:41Z

New page

= 앵그리버드 만들기 =
* HTML5 canvas를 이용해 앵그리버드를 만들어봅시다.
<!DOCTYPE HTML>
<html>
<head>
<title>devils Bird</title>
<script>
//input your javascript code!
//tags do not work;
</script>
</head>
<body>

<h1>Devils World!</h1>

<canvas id="devilsBird" width="600" height="400" style="background:#acbefb">
</canvas>
<script>
var a = {x: 0, y: 2};
var v = {x: 20, y: -30};
var bird = {x: 20, y: 300};
var ima = new Image();
ima.src = "image.png";
var t = 0;
function Loop()
{
clearCanvas();
drawBird();
move(1);
t++;
if(t > 40)
{
clearInterval(intervalId);
}
}
function clearCanvas()
{
context.clearRect(0, 0, 600, 400);
}
function drawBird()
{
context.drawImage(ima,bird.x,bird.y,50,50);
//context.fillRect(bird.x, bird.y, 50, 50);
}
function move(t)
{
v.x += a.x * t;
v.y += a.y * t;

bird.x += v.x * t;
bird.y += v.y * t;
}

var devilsBird = document.getElementById("devilsBird");
var context = devilsBird.getContext("2d");

var x = 0;
var intervalId = setInterval(Loop, 30);

</script>
</body>
</html>