2017-03-25 6 views
0

私は、htmlファイルにpaperscriptで単純な2つのボールシミュレーションを作成しようとしていました。 2つのボールは、期待どおりブラウザーウィンドウ内をアニメーション化して跳ね返ります。しかし、if文を挿入しようとすると、以下のコードでif(((xPos2-xPos1)** 2+(yPos2-yPos1)** 2)** 0.5 < = 100)アニメーションが消え、代わりにクロムコンソールに「予期しないトークン」エラーが表示されます。非常に基本的な衝突イベントをコードに挿入しようとしていますが、どこにも行きません。どのような問題が起こる可能性がありますか?シンプルなpaperscriptアニメーションで予期しないトークンエラー

<!DOCTYPE html> 
<html> 
<head> 
    <title>Ball Animation</title> 
    <link rel="stylesheet" type="text/css" href="ballAnimation.css"> 
    <!-- Load the Paper.js library --> 
    <script type="text/javascript" src="paper-full.js"></script> 
    <!-- Define inlined PaperScript associate it with myCanvas --> 
    <script type="text/paperscript" canvas="myCanvas"> 



     // } 

     var xPos1 = 100; 
     var yPos1 = 100; 
     var xPos2 = 100; 
     var yPos2 = 100; 
     var xInc1 = 10; 
     var yInc1 = 12; 
     var xInc2 = -10; 
     var yInc2 = 20; 
     var circle2 = new Path.Circle(new Point(100, 70), 50); 
     circle2.fillColor = 'purple'; 
     var circle3 = new Path.Circle(new Point(250, 120), 50); 
     circle3.fillColor = 'yellow'; 
     function onFrame(){ 
      if(xPos1>=1000 || xPos1 <= 0){ 
       xInc1 = (-1)*xInc1; 
      } 
      if(yPos1>=680 || yPos1<=0){ 
       yInc1 = (-1)*yInc1; 
      } 
      xPos1 += xInc1; 
      yPos1 += yInc1; 
      if(xPos2>=1000 || xPos2 <= 0){ 
       xInc2 = (-1)*xInc2; 
      } 
      if(yPos2>=680 || yPos2<=0){ 
       yInc2 = (-1)*yInc2; 
      } 

      if(((xPos2-xPos1)**2+(yPos2-yPos1)**2)**0.5<=100) { 
       xInc1 = (-1)*xInc1; 
       yInc1 = (-1)*yInc1; 
       xInc2 = (-1)*xInc2; 
       yInc2 = (-1)*yInc2; 
      } 

      xPos2 += xInc2; 
      yPos2 += yInc2; 
      circle2.position += [xInc1,yInc1]; 
      circle3.position += [xInc2,yInc2]; 
     } 



    </script> 
</head> 
<body> 
    <canvas id="myCanvas" resize="true"></canvas> 
</body> 
</html> 

ご協力いただきありがとうございます。 アンドリュー

答えて

0

累乗演算子**は、今日の普及しているブラウザでは大きなサポートを持っていません。

あなたはMath.pow(x, n)の代わりx**n使用する必要があります。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Ball Animation</title> 
 
    <link rel="stylesheet" type="text/css" href="ballAnimation.css"> 
 
    <!-- Load the Paper.js library --> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-full.min.js"></script> 
 
    <!-- Define inlined PaperScript associate it with myCanvas --> 
 
    <script type="text/paperscript" canvas="myCanvas"> 
 

 

 
     var xPos1 = 100; 
 
     var yPos1 = 100; 
 
     var xPos2 = 100; 
 
     var yPos2 = 100; 
 
     var xInc1 = 10; 
 
     var yInc1 = 12; 
 
     var xInc2 = -10; 
 
     var yInc2 = 20; 
 
     var circle2 = new Path.Circle(new Point(100, 70), 50); 
 
     circle2.fillColor = 'purple'; 
 
     var circle3 = new Path.Circle(new Point(250, 120), 50); 
 
     circle3.fillColor = 'yellow'; 
 
     function onFrame(){ 
 
      if(xPos1>=1000 || xPos1 <= 0){ 
 
       xInc1 = (-1)*xInc1; 
 
      } 
 
      if(yPos1>=680 || yPos1<=0){ 
 
       yInc1 = (-1)*yInc1; 
 
      } 
 
      xPos1 += xInc1; 
 
      yPos1 += yInc1; 
 
      if(xPos2>=1000 || xPos2 <= 0){ 
 
       xInc2 = (-1)*xInc2; 
 
      } 
 
      if(yPos2>=680 || yPos2<=0){ 
 
       yInc2 = (-1)*yInc2; 
 
      } 
 

 
      if(Math.pow(Math.pow(xPos2-xPos1,2)+Math.pow(yPos2-yPos1,2),0.5)<=100) { 
 
       xInc1 = (-1)*xInc1; 
 
       yInc1 = (-1)*yInc1; 
 
       xInc2 = (-1)*xInc2; 
 
       yInc2 = (-1)*yInc2; 
 
      } 
 

 
      xPos2 += xInc2; 
 
      yPos2 += yInc2; 
 
      circle2.position += [xInc1,yInc1]; 
 
      circle3.position += [xInc2,yInc2]; 
 
     } 
 

 

 

 
    </script> 
 
</head> 
 
<body> 
 
    <canvas id="myCanvas" resize="true"></canvas> 
 
</body> 
 
</html>

関連する問題