JS - 볼을 비스듬히 밀어 넣으십시오.

마우스를 사용하여 각도로 볼을 밀기를 원합니다. JS - 볼을 비스듬히 밀어 넣으십시오.

지금까지 내가 가지고,이 작업을 수행하려면

계산 된 마우스 움직임의 각도
계산 원본과 새로운 볼

의 위치하지만이 충돌 할 때 볼이 움직이지 공. 그것은 뒤 흔드는 것 같습니다.

내 콜백에서 애니메이션으로 인한 것 같습니다. 하지만 계산 후 newX와 newY를 전달하기 위해 애니메이션을 실행해야합니다.

때로는 이상한 각도에서 벗어납니다.

나는 newX, newY를 설정할 때 위치가 정해지기보다는 새로운 위치에 추가되기 때문에 이것이 생각됩니다.
또는 내 각도가 원 주위를 따라 가지 않는다는 것을 알았습니다 (즉, 오른쪽 위 사분면으로 이동하면 0 - 90의 각도 범위가 부여됨, 오른쪽 아래로 이동하면 0 - 90의 범위가 여전히 제공됨). 그러나 270 - 360의 범위를 제공해야 함). 이 문제를 해결하는 방법을 모릅니다.

마지막으로 각도가 NaN 인 경우가 있습니다. 왜 숫자가 아닌지 잘 모르겠 음

의견이 있으십니까?

뿐인 : http://jsfiddle.net/edH59/

enter image description here

코드 :

 //Get angle of mouse movement 
     function getAngle (x1, y1, x2, y2) { 
      var dY = Math.abs(y2-y1); //opposite 
      var dX = Math.abs(x2-x1); //adjacent 
      var dist = Math.sqrt((dY*dY)+(dX*dX)); //hypotenuse 
      var sin = dY/dist; //opposite over hypotenuse 
      var radians = Math.asin(sin); 
      var degrees = radians*(180/Math.PI); //convert from radians to degrees 
      angle = degrees; 
      return degrees; //return angle in degrees 
     } 

      $("canvas").mousemove(function(e) {     
       getDirection(e); 
       if (!set) { 
        x1 = e.pageX, 
        y1 = e.pageY, 
        set = true; 
       } 

       clearTimeout(thread); 
       thread = setTimeout(callback.bind(this, e), 100); 
      }); 

      $(".anotherBox").mouseenter(function(e) { 
       pos = $(this).position(); 
       box2X = pos.left; 
       box2Y = pos.top; 
        if(animate) { 
      $(this).animate({ 
       top : newY+"px", 
       left: newX+"px", 
      }, "slow"); 
        } 
       animate = false;               
      }); 
     } 


     function calcNewLoc (x, y, xDist, yDist) { 
      newX = x + (xDist * Math.cos(angle)); 
      newY = y + (yDist * Math.sin(angle));    
     } 


     function callback(e) { 
      x2 = e.pageX; 
      y2 = e.pageY; 
      t2 = new Date().getTime(); 

      var xDist = x2 - x1, 
       yDist = y2 - y1, 
       time = t2 - t1; 

      //to calc angle... need to get starting position and ending position 
      $(".angle").html(getAngle(x1, y1, x2, y2)); 

      calcNewLoc(x1, y1, xDist, yDist); 

     animate = true; //only allow animation of ball once new locations are calculated  

      log("mouse has stopped"); 
      set = false; 
     }

출처

2014-04-10 Growler

먼저 단순화 : 계산 '라디안 = ATAN2 (Y2-Y1, X2- 같은 각도

var mouseAngle = Math.atan2(my-lastmy, mx-lastmx);

현재 결과를 살펴 수 있습니다 x1);과 전에 모든 것을 제거하십시오. 'calcNewLoc'도 의심스러워 보입니다. 삼각 함수가 없어야합니다. 코드를 재정렬하고 주석을 달아서 빨간색 원의 위치 이동으로 이어지는 실제 계산이 어디에서 일어나고 표시된 문자열에 대한 값이 계산되는 곳을 볼 수 있습니까? 몇 가지 마우스 이벤트가 함께 실행되어 카운터 직관적 인 행동을 유도 할 수 있습니까? – LutzL

minibox/mouseenter/animate의 코드에서 어떤 효과가 기대됩니까? – LutzL

이 : http://jsfiddle.net/gamealchemist/z3U8g/2/ 귀하의 기대에 가깝습니까? – GameAlchemist

하면 마우스의 이전 위치를 저장하고 현재 각도를 고려해야합니다, 각도를 가지고 마지막 측정 값과 현재 사이의 각도. 결과를 매끄럽게하기 위해 평균을 계산할 수 있습니다. 내 데모에서는 방향 벡터가 충분히 길면 현재 방향이 빨간색으로 그려집니다.

각도 계산은 고전적인 atan2로 수행됩니다. http://jsfiddle.net/gamealchemist/z3U8g/4/embedded/result/

코드가 여기에 있습니다 : : http://jsfiddle.net/gamealchemist/z3U8g/4/

출처

2014-04-10 19:57:33 GameAlchemist

JS - 볼을 비스듬히 밀어 넣으십시오.

답변

관련 문제