这是一个游戏的代码,其中一个圆圈在页面上跳跃,您需要在一定的时间内单击它(naomikudren.com/Catch)。
var circleSize = 60;
var circle = new Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;
function onFrame(event) {
counter2++
if (counter2 % speed === 0) {
var newPoint = Point.random() * view.size;
circle.position = new Point(newPoint, newPoint);
}
console.log(counter2)
}
circle.onClick = function(event) {
var newPoint = Point.random() * view.size;
circle.position = new Point(newPoint, newPoint);
this.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1,
};
counter2 = 0;
counter++;
circle.scale(0.99);
text.content = 'Score ' + counter;
}
var text = new PointText(new Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';
这一切都很好,但是当我在 Chrome 开发者工具中查看 Paperscript 文件作为源时,它显示如下:
paper._execute = function(__$__,view,Point,Path,PointText,onFrame) {var circleSize = 60;
var circle = new Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;
function onFrame(event) {
counter2 = __$__(counter2, "+", 1)
if (__$__(counter2, "%" , speed) === 0) {
var newPoint = __$__(Point.random(), "*" , view.size);
circle.position = new Point(newPoint, newPoint);
}
console.log(counter2)
}
circle.onClick = function(event) {
var newPoint = __$__(Point.random(), "*" , view.size);
circle.position = new Point(newPoint, newPoint);
this.fillColor = {
hue: __$__(Math.random(), "*" , 360),
saturation: 1,
brightness: 1,
};
counter2 = 0;
counter = __$__(counter, "+", 1);
circle.scale(0.99);
text.content = 'Score ' + counter;
}
var text = new PointText(new Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHR0cDovL25hb21pa3VkcmVuLmNvbS9DYXRjaC9jYXRjaC5qcyIsIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiaHR0cDovL25hb21pa3VkcmVuLmNvbS9DYXRjaC9jYXRjaC5qcyJdfQ==
return { onFrame: onFrame };
}
我不明白这里发生了什么。 Chrome 不应该按原样显示源文件吗?为什么它与源文件不同,这是否意味着这里发生了某种从 Paperscript 到纯 JavaScript 的编译?
最佳答案
这是因为您使用的是 paperscript,而不是 JavaScript。当您的代码声明为 paperscript 时,paperjs 会对其进行预处理,Chrome 向您显示的就是该预处理的结果。如果你仔细想想,这是有道理的——Chrome 需要向你展示正在执行的内容,以便有效地进行调试。它无法知道不同类型的脚本预处理可能进行的所有转换。
这是我总是在 JavaScript 模式下使用 paperjs 的原因之一,尽管 1) 运算符不起作用,必须使用函数,2) 必须引用 Path.Circle
作为 paper.Path.Circle
(与所有其他纸张对象和变量类似)。
在某些情况下,使用 paperscript 可能会导致奇怪的行为。例如,如果您在代码中使用 view.onFrame = function() {...}
但也声明 function onFrame() {...}
则 View 函数将被调用,直到代码完成并在最后返回对象 {onFrame: onFrame}
。此时 onFrame 函数将取代 view
处理程序。
我还没有对此进行测试,但这里可以将您的代码快速转换为 native JavaScript。主要区别是 1) 我显式调用 paper.setup
以及 2) 所有对纸质项目的引用都以 paper.
为前缀。我还使用 view.on
处理程序进行帧处理,尽管还有其他方法可以使其发挥作用。
paper.setup("myCanvas");
var circleSize = 60;
var circle = new paper.Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;
paper.view.on('frame', function(event) {
counter2++
if (counter2 % speed === 0) {
var newPoint = paper.Point.random().multiply(paper.view.size);
circle.position = new paper.Point(newPoint, newPoint);
}
console.log(counter2)
});
circle.onClick = function(event) {
var newPoint = paper.Point.random().multiply(paper.view.size);
circle.position = new paper.Point(newPoint, newPoint);
this.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1,
};
counter2 = 0;
counter++;
circle.scale(0.99);
text.content = 'Score ' + counter;
}
var text = new paper.PointText(new paper.Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';
关于javascript - Paper.js 代码在 Chrome 开发者工具中看起来有所不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34538181/