볼 애니메이션(Ball Animation)에서 공끼리 충돌 검사(Collision Test) 구현 예
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5 원 그리기</title>
<style type="text/css">
canvas { border:5px solid black;}
</style>
<script type="text/javascript">
var x = 30;
var y = 30;
var r = 20;
var xspeed = 3.0;
var yspeed = 3.0;
//var prevTime = 0;
var redX = 0;
var redY = 0;
function drawArc() {
var c = document.getElementById("canvas1");
if(!c.getContext) {
alert('Canvas그리기를 지원하는 웹브라우저가 아닙니다');
return;
}
var ctx = c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height);
x += xspeed;
y += yspeed;
//정지된 공
ctx.beginPath();
redX = c.width/2;
redY = c.height/2-10;
ctx.arc(redX,redY,r, 0, (Math.PI/180)*360);
ctx.fillStyle='rgb(200,0,0)';
ctx.fill();
ctx.beginPath();
ctx.arc(x,y,r, 0, (Math.PI/180)*360);
ctx.strokeStyle='rgb(0,0,0)';
ctx.stroke();
if((x-r)<=0) {//왼쪽끝
x=r;
xspeed *= -1
}else if((y-r)<=0) {//상단
y=r;
yspeed *= -1
}else if((x+r)>=c.width) {
x = c.width-r;
xspeed *= -1
}else if((y+r)>=c.height) {
y = c.height-r;
yspeed *= -1
}
//이동하는 공의 속도 자연감소
xspeed *= 0.992;
yspeed *= 0.992;
//console.log("xspeed:"+xspeed+", yspeed:"+yspeed);
//속도는 무한히 작아지는데, 적당한 양에 도달하면 애니메이션을 종료한다
if(Math.abs(xspeed)<0.03 && Math.abs(yspeed)<0.03) stopBall();
//공끼리 충돌검사(피타고라스 정리 응용, a^2 + b^2 = c^2)
var dx = Math.abs(redX-x);
var dy = Math.abs(redY-y);
if((dx*dx + dy*dy) <= (2*r)*(2*r)) {
//console.log("공끼리 충돌");
stopBall();
}
/*
var now = Date.now();
console.log(now-prevTime);
prevTime = now;
*/
}
var intval;
function moveBall() {
intval = setInterval(function(){drawArc();}, 30);
}
function stopBall() {
clearInterval(intval);
alert("Ball Stopped!");
}
</script>
</head>
<body>
<canvas id="canvas1" width="300" height="200"></canvas>
<p>
<input type="button" value="START" onclick="moveBall();">
<input type="button" value="STOP" onclick="stopBall();">
</body>
</html>