1
私は参照のためのcodepenをセットアップしました。問題は、矢印と石が衝突したときに交差点を見つける必要があることです（すべてがSVGです）。両方とも、Trebuchetの回転子をクリックすると石が動き、ページが読み込まれた後に矢印が開始されます。SVG/GSAPゲームの交差点
矢印はライトブルーの色のパスに従う必要があり、石はグレーの細いラインのパスに従います。私は狂ったように私の頭を壊しましたが、どんな提案も大きな助けになるでしょう。 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);
}
これを数学的に行うのは簡単な作業ではありません。ベジェ曲線のGoogleの交差点。しかし、ベジェ曲線を直線セグメントに分割し、それらの線セグメントのどれが互いに交差するかを決定する非常に簡単な作業を行うことによって、（ゲームのための）十分な近似を得ることができます。 –
私はこのスケッチ全体をスケッチで作ってHTMLに組み込んだので、支配者を使って一連の座標を取得していましたが、衝突を検出することができず、正確にどこが間違っているのか分かりません。 –