Tho*_*ert 8 javascript html5 drag-and-drop canvas collision
首先请不要对我的英语太过批评.我不是母语人士.我希望我能解释自己从未如此!此外,我读到我应该表明我已经做了一些努力来自己解决给定的问题.为了表明我的帖子变得相对较长.
我是新的(三周)到javascript,我尝试通过html5 canvas和javascript构建一个池台球桌.最后,用户应该能够通过拖动十六个球来在虚拟池桌面上呈现某种游戏情况.我在stackoverflow上发现了很多关于路径和拖放的提示.
一会儿,圆圈几乎看起来像池球,我可以用鼠标移动它们.到现在为止还挺好.
当然,池球在现实中碰撞并且不重叠.关于碰撞检测,我发现了一个有用的帖子,告诉我使用Pythagorean therm a*a + b*b = c*c来做这件事.我理解这个概念.我绝对不明白的是我必须在我的代码中实现检测.在我的脚本中有一个函数(moveBall00(e)),如果球被拖动(dragok = true),它会计算新的x和y坐标.但是,如何在同时计算拖动球的新坐标的同时计算球之间的距离？这可能很容易成为新手问题!
我试过这个:
新变量"x"
var x = true;
用于检测球之间距离的新功能
function collision(){if((Math.pow(bp [1] [0] - bp [1] [1],2))+(Math.pow(bp [2] [0] - bp [2] [ 1],2))<= 576){x = false; }}
每10毫米调用"碰撞()"
(function isIntersecting(){return setInterval(collision,10);})();
如果"x = true",则仅拖动球
function moveBall00(e){if(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>
您面临的问题与底层渲染技术完全无关.这只是一个数学问题.
您基本上想要为您的情况做的是计算您拖动的球与桌子上的任何球之间的距离.如果距离太短,则发生碰撞.
对于两个对象,这很简单,您需要三个值:球的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;
}
在最后一个片段中,我假设您的球对象存储在球阵列中.我希望这有帮助.
| 归档时间： |
|
| 查看次数： |
1493 次 |
| 最近记录： |