可绘制圆之间的javascript碰撞检测
[英]javascript collision detection between drawable circles
问题描述
首先，请不要对我的英语太苛刻。 我不是母语人士。 希望我能少解释自己！ 此外，我读到我应该表明自己为解决给定的问题做出了一些努力。 为了说明这一点，我的帖子变得相对冗长。
我想做的事：
我是JavaScript的新手（三周），我尝试通过html5 canvas和javascript构建台球桌。 最后，用户应该能够通过拖动十六个球来在虚拟撞球台上呈现一定的比赛情况。 我在这里发现了许多关于路径和拖放的关于堆栈溢出的提示。
已经工作的内容：
到那时，圆圈几乎看起来像台球，我可以用鼠标将它们移动。 到目前为止，一切都很好。
问题是什么：
当然，撞球在现实中会碰撞并且不会重叠。 关于碰撞检测，我找到了一个有用的帖子，告诉我使用毕达哥拉斯测温a * a + b * b = c * c来执行此操作。 我理解这个概念。 我绝对不理解的是我必须在代码中实现检测的地方。 在我的脚本中，有一个函数（moveBall00（e）），如果将球拖动到周围，则该函数将计算新的x和y坐标（dragok = true）。 但是，如何在同时计算被拖动球的新坐标的同时计算球之间的距离呢？ 这很容易是新手问题！
我尝试了这个：
新变量“ x”
var x = true;
检测球之间距离的新功能
函数冲突（）{if（（Math.pow（bp [1] [0]-bp [1] [1]，2））+（Math.pow（bp [2] [0]-bp [2] [ 1]，2））<= 576）{x =否； }}
每10毫秒调用“ collision（）”
（function isIntersecting（）{return setInterval（collision，10）;}）（）;
仅在“ x = true”时拖动球
函数moveBall00（e）{如果（dragok && x）{bp [1] [0] = e.pageX-canvas.offsetLeft; bp [2] [0] = e.pageY-canvas.offsetTop; }}
结果是圆圈（球）重叠直到它们停下来。 他们重叠得越快，我拖球的速度就越快。 这是第一个后继问题吗？
对于经验丰富的开发人员，可以肯定的是漫步公园，但对我而言却不是。
我是坚持型，将学习用javascript做这些事情，但目前我不知道如何解决上述问题。
我将不胜感激，将在这里发布将来的结果！
这是我到目前为止所做的：
（为简化起见，只能绘制白球。）
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Collision detection</title>
</head>
<body>
<canvas id="pooltable" width="1200" height="660">This text is displayed if your browser does not support HTML5 Canvas</canvas>
<script>
var canvas;
var ctx;
var width = 1200;
var height = 660;
var dragok = false;
var bp = new Array();
// color of balls "ballColor"
bp[0] = new Array("rgba(255,255,255,1)","rgba(231,214,8,1)");
// x-position of balls "xBallPosition"
bp[1] = new Array(20,50);
// y-position of balls "yBallPosition"
bp[2] = new Array(50,50);
// color of stripes "stripe"
bp[3] = new Array("rgba(255,255,255,0)","rgba(231,214,8,1)");
// color of stripe strokes "stripeStroke"
bp[4] = new Array("rgba(255,255,255,0)","rgba(231,214,8,1)");
// ball numbers "ballNumber"
bp[5] = new Array(" ","1");
// position of ball numbers "positionBallNumber"
bp[6] = new Array();
function init() {
canvas = document.getElementById("pooltable");
ctx = canvas.getContext("2d");
return setInterval(draw, 1);
}
function clear() {
ctx.clearRect(0, 0, width, height);
}
function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}
function ball(ballColor, xBallPosition, yBallPosition, ballRadius, angle, stripe, stripeStroke, circleRadius, ballNumber, positionBallNumber) {
ctx.fillStyle = ballColor;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,1)";
ctx.beginPath();
ctx.arc(xBallPosition, yBallPosition, ballRadius, angle, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.fillStyle = stripe;
ctx.strokeStyle = stripeStroke;
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.beginPath();
ctx.moveTo(xBallPosition - 7, yBallPosition - 8);
ctx.bezierCurveTo(xBallPosition - 8, yBallPosition - 13, xBallPosition + 8, yBallPosition - 13, xBallPosition + 7, yBallPosition - 8);
ctx.lineTo(xBallPosition + 7, yBallPosition + 8);
ctx.bezierCurveTo(xBallPosition + 8, yBallPosition + 13, xBallPosition - 8, yBallPosition + 13, xBallPosition - 7, yBallPosition + 8);
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.beginPath();
ctx.arc(xBallPosition, yBallPosition, circleRadius, angle, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.font = "normal normal lighter 7px Helvetica";
ctx.textBaseline = "middle";
ctx.fillText(ballNumber, xBallPosition - positionBallNumber, yBallPosition + 1);
var gradient = ctx.createRadialGradient(xBallPosition, yBallPosition, 1, xBallPosition + 3, yBallPosition + 3, 12);
gradient.addColorStop(0, "rgba(255,255,255,0.6)");
gradient.addColorStop(1, "rgba(0,0,0,0.2)");
ctx.fillStyle = gradient;
ctx.strokeStyle = "rgba(0,0,0,0.4)";
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.beginPath();
ctx.arc(xBallPosition, yBallPosition, ballRadius, angle, Math.PI * 2, true);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
function draw() {
clear();
table = new rect(0,0,width,height);
ball00 = new ball(bp[0][0], bp[1][0], bp[2][0], 12, 0, bp[3][0], bp[4][0], 6, bp[5][0], 0);
ball01 = new ball(bp[0][1], bp[1][1], bp[2][1], 12, 0, bp[3][0], bp[4][1], 6, bp[5][1], 2);
}
function myDown(e) {
if (e.pageX < bp[1][0] + 6 + canvas.offsetLeft && e.pageX > bp[1][0] - 6 + canvas.offsetLeft && e.pageY < bp[2][0] + 6 + canvas.offsetTop && e.pageY > bp[2][0] - 6 + canvas.offsetTop) {
bp[1][0] = e.pageX - canvas.offsetLeft;
bp[2][0] = e.pageY - canvas.offsetTop;
dragok = true;
canvas.onmousemove = moveBall00;
}
else {
dragok = false;
}
}
function myUp() {
dragok = false;
canvas.onmousemove = null;
}
function moveBall00(e) {
if (dragok) {
bp[1][0] = e.pageX - canvas.offsetLeft;
bp[2][0] = e.pageY - canvas.offsetTop;
}
}
init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
</script>
</body>
</html>
1 个解决方案
解决方案1
5 2012-10-18 11:01:00
您面临的问题与底层渲染技术完全无关。 这只是一个数学问题。
您基本上要针对自己的情况做的是计算您拖动的球与桌子上任何球之间的距离。 如果距离太短，则会发生碰撞。
对于两个对象，这很简单，您需要三个值：球的x和y坐标及其半径。
var ball = {
x: 100,
y: 100
r: 10
};
要计算距离，请执行以下操作：
var squareX = Math.pow(Math.abs(ballA.x - ballB.x), 2);
var squareY = Math.pow(Math.abs(ballA.y - ballB.y), 2);
var hypothenuse = Math.sqrt(squareX + squareY);
var distance = hypothenuse - ballA.r - ballB.r;
if (distance >= 0) {
// new position is valid
}
由于台球桌上有许多球，因此需要为未被移动的球桌上的每个球调用一次此代码以比较所有球。
function canMove(ballA, ballB) {
var squareX = Math.pow(Math.abs(ballA.x - ballB.x), 2);
var squareY = Math.pow(Math.abs(ballA.y - ballB.y), 2);
var hypothenuse = Math.sqrt(squareX + squareY);
var distance = hypothenuse - ballA.r - ballB.r;
if (distance >= 0) {
return true;
}
return false;
}
function canDrag(ball, balls) {
var isMovable = true;
for (var i = balls.length-1; i >= 0; i--) {
isMovable = canMove(ball, balls[i]);
if (!isMovable) {
return false;
}
}
return true;
}
在最后一个片段中，我假设您的球对象存储在balls数组中。 我希望这有帮助。
您将如何仅使用 vanilla JavaScript 和 HTML canvas 来实现圆的碰撞检测？
[英]How would you implement collision detection of circles using only vanilla JavaScript and HTML canvas?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.