Schnittpunkt in SVG/GSAP Spiel

Ich habe einen Codepen als Referenz eingerichtet, das Problem ist, dass ich den Schnittpunkt finden muss, wenn der Pfeil und der Stein kollidieren (alles ist SVG), und nach der Kollision müssen sich verstecken Bei beiden bewegt sich der Stein, wenn wir auf den Rotator des Trebuchets klicken, und der Pfeil sollte nach dem Laden der Seite von selbst beginnen.Schnittpunkt in SVG/GSAP Spiel

Der Pfeil sollte dem hellblauen Farbpfad folgen und der Stein folgt dem grauen Pfad. Ich habe meinen Kopf wie verrückt gebrochen, jeder Vorschlag wird eine große Hilfe sein. Die Verbindung von codepen ist: - 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); 
    }

Quelle

2016-07-27 Abhilash Bhargava

Es ist keine einfache Aufgabe, dies mathematisch zu tun. Google Schnittpunkt von Bezier-Kurven. Aber Sie können eine gute Näherung (für ein Spiel) erhalten, indem Sie Ihre Bezierkurven in gerade Liniensegmente zerlegen und die viel einfachere Aufgabe ausführen, zu bestimmen, welche dieser Liniensegmente sich miteinander schneiden. –

Ich habe diese ganze Svg in Skizze gemacht und dann in HTML integriert, also bekam ich eine Reihe von Koordinaten mit dem Lineal, aber es ist einfach nicht in der Lage, die Kollision zu erkennen, also nicht in der Lage herauszufinden, wo genau ich falsch liege . –

Ich habe die Lösung, ist es einfach sowohl der Pfeil und der Stein machen dem Weg GSAP zu folgen mit, danach den Schnittpunkt zu finden, zuerst die Länge finden der Pfad kann es in der Unterseite dieser Verbindung https://css-tricks.com/svg-line-animation-works/ dann verwenden Sie diesen Wert in stroke-dashoffset und mit hit-n-Trial können Sie die Werte finden, bei denen sie sich schneiden nur die Werte von 0 bis pathLength ändern Sie werden die Idee bekommen Es ist wirklich schwierig, aber es war die Zeit wert! Ich werde auch den Codepen aktualisieren.

Quelle

2016-07-29 08:43:10

Antwort

Verwandte Themen