首先请不要对我的英语太过批评.我不是母语人士.我希望我能解释自己从未如此!此外,我读到我应该表明我已经做了一些努力来自己解决给定的问题.为了表明我的帖子变得相对较长.
我是新的(三周)到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" /> …