Chrome開發人員工具中的Paper.js代碼看起來有所不同

Question

這是一個游戲代碼，其中一個圓圈在頁面上跳躍，您需要在一定時間內單擊它（ 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都在這里進行了某種編譯？

Answer 1

這是因為您使用的是paperscript，而不是JavaScript。 當您將代碼聲明為paperscript時，paperjs會對您的代碼進行預處理，而Chrome顯示的內容就是該預處理的結果。 如果您考慮一下，這是有道理的-Chrome需要向您展示正在執行的內容才能有效進行調試。 它無法知道不同類型的腳本預處理可能進行的所有轉換。

這是的，我一直在JavaScript模式下，即使1）經營者不工作，功能已被使用，以及2）使用paperjs的原因之一Path.Circle必須被稱為paper.Path.Circle （所有類似其他紙張對象和變量）。

在某些情況下，使用paperscript可能會導致異常行為。 例如，如果在代碼中使用view.onFrame = function() {...} ，但同時聲明function onFrame() {...}則將調用view函數，直到代碼完成並返回對象{onFrame: onFrame} 。 那時，onFrame函數將替換view處理程序。

我尚未對此進行測試，但這是將您的代碼快速轉換為本機JavaScript的過程。 主要區別在於1）我顯式地調用paper.setup以及2）所有對紙張項目的引用都以paper為前綴paper. 。 我還使用view.on處理程序進行幀處理，盡管還有其他方法可以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';