2017-03-14 3 views
0

Behebung vieler Probleme mit Paper.js. Das Colt Steele Web Developer Bootcamp auf Udemy. Ich bin auf Abschnitt 19. Derzeit versuche ich, einen Patatap-Klon zu erstellen. Hier ist, wenn ich bin stecken:Paper.js nicht abgefangener Syntaxfehler

http://codepen.io/SlouchingToast/pen/LWLXYZ

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Circles</title> 
    <link rel="stylesheet" type="text/css" href="circles.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-full.min.js"></script> 

    <script type="text/paperscript" canvas="myCanvas"> 

    function onKeyDown(event) { 
     var maxPoint = new Point(view.size.width, view.size.height); 
     var randomPoint = Point.random(); 
     var point = maxPoint * randomPoint; 
     new Path.Circle(point, 10).fillColor = "olive"; 
    } 

    var animatedCircle = new Path.Circle(new Point(300,300), 100); 
    animatedCircle.fillColor = "red"; 

    } 

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

</body> 
</html>  

CSS

canvas { 
    width: 100%; 
    height: 100%; 
    background: black; 
} 

body, html { 
height: 100%; 
margin: 0; 
} 

Chrome Console Fehler

Uncaught ReferenceError: animatedCircle is not defined 
    at at.paper._execute (<anonymous>:11:2) 
    at u (paper-full.min.js:38) 
    at HTMLCollection.l (paper-full.min.js:38) 
    at HTMLCollection.l (paper-full.min.js:32) 
    at Function.f [as each] (paper-full.min.js:32) 
    at f (paper-full.min.js:38) 
paper._execute @ VM519:11 
u @ paper-full.min.js:38 
l @ paper-full.min.js:38 
l @ paper-full.min.js:32 
f @ paper-full.min.js:32 
f @ paper-full.min.js:38 

Was angenommen hat, passiert, zeigt nur einen Kreis. Das ist es.

+0

Es gibt eine zusätzliche schließende Klammer direkt vor dem schließenden Skript-Tag. Das ist ein Fehler. – Brian

Antwort

1

Durch das Ersetzen von PaperScript unten funktioniert es. Entfernen Sie zuerst das unnötige End-Tag }. Zweitens, fix animateCircle zu animatedCircle.

<script type="text/paperscript" canvas="myCanvas"> 
    function onKeyDown(event) { 
     var maxPoint = new Point(view.size.width, view.size.height); 
     var randomPoint = Point.random(); 
     var point = maxPoint * randomPoint; 
     new Path.Circle(point, 10).fillColor = "olive"; 
    } 

    var animatedCircle = new Path.Circle(new Point(300,300), 100); 
    animatedCircle.fillColor = "red"; 
    </script> 
Verwandte Themen