앵그리버드 만들기 ¶

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>
<!-- input your tags! -->
<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>

데블스캠프2012/셋째날/앵그리버드만들기 (rev. 1.1)

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

앵그리버드 만들기 ¶