Unerwarteter Token-Fehler mit einfacher PaperScript-Animation

Ich habe versucht, eine einfache Zwei-Ball-Simulation mit PaperScript in einer HTML-Datei zu erstellen. Die beiden Bälle animieren und springen wie erwartet im Browserfenster herum. Aber, als ich versuchte, die if-Anweisung einzufügen: if ((xPos2-xPos1) ** 2+ (yPos2-yPos1) ** 2) ** 0,5 < = 100) im unten gezeigten Code verschwindet die Animation und stattdessen ein Der Fehler "unerwarteter Token" wird in der Chrome-Konsole angezeigt. Ich versuche, ein sehr einfaches Kollisionsereignis in den Code einzufügen, aber es kommt nicht weiter. Irgendwelche Ideen, was das Problem sein könnte?Unerwarteter Token-Fehler mit einfacher PaperScript-Animation

<!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>

Vielen Dank im Voraus für jede Hilfe. Andrew

Quelle

2017-03-25 Andrew Scott

Der Potenzierungsoperator ** hat keine große Unterstützung in den heutigen populären Browsern.

sollten Sie Math.pow(x, n) anstelle von 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>

Quelle

2017-03-25 02:25:52 gyre

Unerwarteter Token-Fehler mit einfacher PaperScript-Animation

Antwort

Verwandte Themen