我正在寻找最快最轻的方法来在JS Canvas上拖放形状和精灵以进行游戏开发.
我开始使用当前鼠标位置和圆圈的起点进行距离检查.它可以工作,但是当它们重叠时我们会遇到问题,而且我不知道在每个'框架'上测试多个精灵和其他形状时它的效果如何.
任何评论或指向更好的方法表示赞赏!
我宁愿不使用类似jQuery的库,因为我要求纯粹的速度和轻松,当然要学习实际的方法!这是我在的地方:
//add the canvas listeners and functions
canvas.addEventListener("mousemove",mousemove);
canvas.addEventListener("mousedown",mousedown);
canvas.addEventListener("mouseup",mouseup);
function mousemove(e){
mouseX = e.layerX - canvas.offsetLeft;
mouseY = e.layerY - canvas.offsetTop;
//for each circle stored in my array of Circle objects, is my mouse within its'
//bounds? If so, set the circles' (X,Y) to my mouse's (X,Y)
for(i=0;i<circArray.length;i++){
dx = mouseX - circArray[i].x;
dy = mouseY - circArray[i].y;
dist = Math.sqrt((dx*dx) + (dy*dy));
if(draggable && dist < circArray[i].r){
circArray[i].x = mouseX;
circArray[i].y = mouseY;
} …Run Code Online (Sandbox Code Playgroud)