Точка пересечения в SVG/GSAP Game

Я установил код для справки, проблема в том, что мне нужно найти точку пересечения, когда стрела и камень сталкиваются (все есть SVG), и после столкновения нужно спрятаться оба они, камень перемещается, когда мы нажимаем ротатор Trebuchet, и стрелка должна начинаться сама по себе после загрузки страницы.Точка пересечения в SVG/GSAP Game

Стрелка должна следовать по пути светло-голубого цвета, а камень следует за серой тонкой дорожкой. Я сломал себе голову, как сумасшедшее, любое предложение будет очень полезно. Звено codepen является: - Click Here to view Codepen

$("#wheel-moving").click(function() { 

     $('#rope').css('display','none'); 
     TweenMax.to(".rotateFireButton", .85, {x:25, y:140, rotation:180, transformOrigin:"50% 50%", ease: Power1.easeIn}) 

     TweenMax.fromTo(".throwMachineLow", .2 , {x:2 , y:79.1 }, {x:2, y:79.1, delay:.3, rotation:57, transformOrigin:"84% 0%", ease: Power1.easeIn}) 
     TweenMax.fromTo("#heavy-block", .2 , {x:182.7 , y:71.5 }, {x:160, y:100, delay:.3, transformOrigin:"84% 0%", ease: Power1.easeIn}) 
     TweenMax.to(".throwMachineLow", .5 , {x:2, y:79.1, delay:.95, rotation:0, transformOrigin:"84% 0%", ease: Power1.easeIn}) 
     TweenMax.to("#heavy-block", .5 , {x:182.7 , y:71.5, delay:.95, transformOrigin:"84% 0%", ease: Power1.easeIn}) 
     TweenMax.to(".rotateFireButton", .85, {x:25, y:140, delay:.95, rotation:-180, transformOrigin:"50% 50%", ease: Power1.easeIn}) 
     setTimeout(function(){ 
      $('#rope').css('display','initial'); 

     } , 1500); 
     var stonePath = MorphSVGPlugin.pathDataToBezier("#stoneRunner",{align:"#stone",offsetX:-310,offsetY:-240}); 

     TweenMax.to(
      $("#stone"), 3, 
      { 
       delay:.27, 
       autoAlpha: 1, 
       visibility:'visible', 
       bezier: {values:stonePath, type:"cubic"}, 
       transformOrigin:"100% 100%" 
      }); 
     fire(); 
    }); 

function fire(){ 
     $('#wheel-moving').css('pointer-events','none');  
     setTimeout(function() { 
      $('#wheel-moving').css('pointer-events','auto'); 
     }, 2000); 
    }

источник

2016-07-27 Abhilash Bhargava

Это не простая задача сделать это математически. Google пересечение кривых Безье. Но вы можете получить достаточно хорошее приближение (для игры), разбив кривые Безье на прямые сегменты и сделав гораздо более простую задачу определить, какой из этих сегментов линии пересекается друг с другом. –

Я сделал весь этот svg в эскизе, а затем включил его в HTML, поэтому я получал ряд координат с помощью линейки, но он просто не смог обнаружить столкновение, поэтому не смог определить, где именно я ошибаюсь , –

Я получил решение, это легко сделать, как стрела, и камень, чтобы следовать по пути с помощью GSAP, после того, чтобы найти точку пересечения, сначала найти длину пути можно получить в нижней части этой ссылки https://css-tricks.com/svg-line-animation-works/, а затем использовать это значение в инсульт-dashoffset и с помощью hit-n-trial вы можете найти значения, по которым они пересекаются, просто изменяя значения от 0 до pathLength, вы получите идею , это действительно сложно, но это стоило времени! Я также обновлю код.

источник

2016-07-29 08:43:10

Точка пересечения в SVG/GSAP Game

ответ

Смежные вопросы