데블스캠프2012/셋째날/앵그리버드만들기 (rev. 1.2)
앵그리버드 만들기 ¶
- 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>
