데블스캠프2012/셋째날/앵그리버드만들기 (rev. 1.4)
앵그리버드 만들기 ¶
- 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>
의존성과 전역변수를 줄인 버전 ¶
<!DOCTYPE HTML>
<html>
<head>
<script>
var start = {x : 100, y : 300};
function Bird()
{
this.x = start.x;
this.y = start.y;
this.vx = 0;
this.vy = 0;
this.img = new Image();
this.img.src = "bird.png";
this.isShoot = false;
}
Bird.prototype.shoot = function(dx, dy)
{
this.vx = dx / 100;
this.vy = dy / 100;
this.isShoot = true;
}
Bird.prototype.move = function(deltaTime)
{
this.x += this.vx * deltaTime;
this.y += this.vy * deltaTime;
if(this.isShoot)
this.vy += deltaTime/1000;
}
Bird.prototype.cheekStop = function()
{
if(this.y > 400)
return true;
}
function Game()
{
var elem = document.getElementById("devilsBird");
this.context = elem.getContext("2d");
this.currentBird = new Bird();
var that = this;
var onDrag = false;
elem.addEventListener("mousedown", function(e){
var pos = getXY(e);
if(pos.x > start.x - 13 && pos.x < start.x + 13 && pos.y > start.y - 13 && pos.y < start.y + 13)
{
onDrag = true;
}
});
elem.addEventListener("mouseup", function(e){
if(onDrag)
{
that.onMouseUp(e);
onDrag = false;
}
});
}
Game.prototype.onMouseUp = function(e)
{
var pos = getXY(e);
var dx = start.x - pos.x;
var dy = start.y - pos.y;
this.currentBird.shoot(dx, dy);
}
Game.prototype.run = function()
{
var currentTime = new Date();
var context = this.context;
setTimeoutOnContext(this, function(){
var oldTime = currentTime;
currentTime = new Date();
var deltaTime = currentTime - oldTime;
this.drawScreen();
this.move(deltaTime);
this.chk();
setTimeoutOnContext(this, arguments.callee,0);
}, 0);
}
Game.prototype.drawScreen = function()
{
this.context.clearRect(0,0,600,400);
this.context.drawImage(this.currentBird.img, this.currentBird.x-13, this.currentBird.y-13, 25, 25);
}
Game.prototype.move = function(deltaTime)
{
this.currentBird.move(deltaTime);
}
Game.prototype.chk = function()
{
if(this.currentBird.cheekStop())
this.currentBird = new Bird();
}
function setTimeoutOnContext(context, func, time)
{
setTimeout(function(){
func.apply(context);
}, time);
}
function getXY(e)
{
return {x:e.clientX + pageXOffset - e.target.offsetLeft, y:e.clientY + pageYOffset - e.target.offsetTop};
}
</script>
</head>
<body>
<h1>Devils World!</h1>
<canvas id="devilsBird" width="600" height="400" style="background:#acbefb"></canvas>
</body>
<script>
new Game().run();
</script>
</html>
