당구공이 충돌할 때의 충돌처리 예
테스트 환경: HTML5, Canvas, Javascript, Google Chrome(Web Browser)
아래의 충돌처리 예는 2개의 공 사이에서 일어난 충돌을 한 쪽 공에만 적용하기 때문에 발생하는 문제점을 보이고자 한 것이다.
처음 충돌할 때는 충돌처리가 잘 된 것으로 생각되지만 몇번을 더 충돌할 경우에는 충돌에 적절하게 반응하지 않는 것을 확인할 수 있다. 이 문제를 해결한 예는 다른 페이지에서 참조할 수 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>일방적인 충돌처리로 인한 프로그램의 오작동 예</title>
<style type="text/css">
#MyCanvas { border: 1px dotted black; }
</style>
<script type="text/javascript" src="Vector2D.js"></script>
<script type="text/javascript" src="Ball.js"></script>
<script type="text/javascript">
var canvas = null;
var context = null;
var x = 0;
var y = 0;
var timer = 0;
var greenBall = null;
var redBall = null;
window.onload = function(){
canvas = document.getElementById("MyCanvas");
context = canvas.getContext("2d");
x = canvas.width / 2;
y = canvas.height / 2;
// Ball(ctx, color, pos, r, speed)
greenBall = new Ball(context, "rgba(0,255,0,0.5)", new Vector2D(x-55,canvas.height-35), 35, new Vector2D(0,-1));
redBall = new Ball(context, "rgba(255,0,0,0.5)", new Vector2D(x,y),35, new Vector2D(0,0));
timer = setInterval("move()",10);
};
function move() {
clear();
greenBall.update();
greenBall.draw();
redBall.update();
redBall.draw();
checkCollision();
}
function clear() {
context.fillStyle = "white";
context.fillRect(0,0,canvas.width, canvas.height);
context.fill();
}
function checkCollision() {
var tmpVec = redBall.pos.sub(greenBall.pos);
if(tmpVec.length()<=70) {
tmpVec.normalize();
var greenSpeedLen = greenBall.speed.length();
var cosVal = greenBall.speed.dot(tmpVec)/greenSpeedLen;
//console.log("cosVal="+cosVal);
tmpVec.mul(cosVal*greenSpeedLen);
redBall.speed = tmpVec;
greenBall.speed = greenBall.speed.sub(tmpVec);
}
}
</script>
</head>
<body>
<canvas id="MyCanvas" width="400" height="300">
HTML5의 Canvas를 지원하지 않는 브라우저를 사용하고 있습니다
</canvas>
</body>
</html>