Billiard Collision example 01

HTML5/Billiard Collision 01

Billiard Collision example 01

Soul-Learner 2012. 4. 17. 10:31

당구공이 충돌할 때의 충돌처리 예

테스트 환경: HTML5, Canvas, Javascript, Google Chrome(Web Browser)

아래의 충돌처리 예는 2개의 공 사이에서 일어난 충돌을 한 쪽 공에만 적용하기 때문에 발생하는 문제점을 보이고자 한 것이다.

처음 충돌할 때는 충돌처리가 잘 된 것으로 생각되지만 몇번을 더 충돌할 경우에는 충돌에 적절하게 반응하지 않는 것을 확인할 수 있다. 이 문제를 해결한 예는 다른 페이지에서 참조할 수 있다

<!DOCTYPE html>

<html>

<head>

<title>일방적인 충돌처리로 인한 프로그램의 오작동 예</title>

#MyCanvas { border: 1px dotted black; }

</style>

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>

HTML5의 Canvas를 지원하지 않는 브라우저를 사용하고 있습니다

</canvas>

</body>

</html>