來自純javascript的Paper.js

我想用paper.js做一個遊戲，但有些東西不能正常工作，所以我簡化了一些東西，而且不再工作。來自純javascript的Paper.js

我試圖用paper.js製作已經制作好的命名空間paperscript，但它太難調試，所以我試圖使用javascript directly。

即使使用超級簡單的代碼在瀏覽器周圍移動球，它也不起作用。

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Bouncing ball</title> 
    <link rel="stylesheet" href="../css/style.css"> 
    <script type="text/javascript" src="../../lib/paper.js"></script> 
    <script type="text/javascript"> 
     var ball; 

     function game(_view) { 
      console.log("game!"); 
      ball = new Ball(); 
      this.view = _view; 
      console.log(ball); 
     } 

     paper.install(window); 
     window.onload = function() { 
      var canvas = document.getElementById('canvas'); 
      paper.setup(canvas); 
      view.onFrame = onFrame; 
      game(view); 
     } 

     var Ball = Base.extend({ 
      initialize: function() { 
       this.position = new Point(100, 100); 
       this.velocity = new Point(3, 0); 

       this.path = new Path.Circle(location, 25); 
       this.path.strokeColor = 'black'; 
       this.path.fillColor = 'black'; 
      }, 

      iterate: function() { 
       this.position += this.velocity; 
       this.path.position = this.position; 

       return this; 
      } 
     }); 

     function onFrame(event) { 
      ball.iterate(); 
      //console.log(ball); 
     }; 

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

我保持上收到此錯誤：

Uncaught TypeError: Cannot call method 'iterate' of undefined

來源

2013-02-19 nkint

當指定onFrame處理器，setter函數setOnFrame被調用，它立即調用幀處理程序。由於此時ball未初始化，因此函數調用失敗。

setOnFrame: function(onFrame) { 
    this._onFrame = onFrame; 
    if (!onFrame) { 
     delete this._onFrameCallback; 
     return; 
    } 
    var that = this, 
     requested = false, 
     before, 
     time = 0, 
     count = 0; 
    this._onFrameCallback = function(param, dontRequest) { 
     requested = false; 
     if (!that._onFrame) 
      return; 
     paper = that._scope; 
     requested = true; 
     if (!dontRequest) { 
      DomEvent.requestAnimationFrame(that._onFrameCallback, 
        that._canvas); 
     } 
     var now = Date.now()/1000, 
      delta = before ? now - before : 0; 
     that._onFrame(Base.merge({ 
      delta: delta, 
      time: time += delta, 
      count: count++ 
     })); 
     before = now; 
     that.draw(true); 
    }; 
    if (!requested) 
     this._onFrameCallback(); //here your onFrame function is called 
},

如果你看看this jsFiddle，並確保你在你的開發工具集break on exceptions，你可以看到堆棧。然後，解決方案將在分配處理程序之前初始化ball。

來源

2013-02-19 22:58:10 Dennis

???是的，球是球的一個實例..變量球（小寫）是腳本的第一行.. – nkint 2013-02-19 23:09:56

更新了一點點調查。 – Dennis 2013-02-19 23:39:46

好吧。感謝您審查答案。現在我不明白的是：如果我評論'ball.iterate（）;'但是取消註釋'console.log（ball）;'在你的jfiddle中（和我在本地的chrome中的例子相同） '__proto__'裏面有'iterate'作爲函數。爲什麼？爲什麼它沒有正確調用？ – nkint 2013-02-20 00:22:13

只有一個可能的原因，當調用onFrame時，ball尚未定義。在創建ball後指定onFrame，或在onFrame內查看ball。

來源

2013-02-19 23:02:20 entonio

我已經創建了一個圖書館folio.js來照顧這一切。它也處理動畫。這裏是你使用folio.js的例子。

<!doctype html> 
<!--[if lt IE 7]>   <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>    <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--><html class="no-js"> <!--<![endif]--> 
    <head> 
     <!-- META --> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <meta name="description" content=""> 



     <title>Ball</title> 



     <script type="text/javascript" src="paper-core.js"></script> 
     <script type="text/javascript" src="paper.folio.js"></script> 
     <script type="text/javascript"> 
      // ------------------------------------------------------------------------ 
      // Properties 
      // ------------------------------------------------------------------------ 
      // the core folio namespace 
      var f = folio; 

      // define ball variable 
      var ball; 



      // ------------------------------------------------------------------------ 
      // Setup 
      // ------------------------------------------------------------------------ 
      function Setup() { 
       ball = new Ball(); 
      }; 




      // ------------------------------------------------------------------------ 
      // Update 
      // ------------------------------------------------------------------------ 
      /* 
      * Update() is called every frame 
      */ 
      function Update(event) { 
       ball.iterate(); 
      }; 



      // ------------------------------------------------------------------------ 
      // Draw 
      // ------------------------------------------------------------------------ 
      function Draw() { 
      }; 



      // ------------------------------------------------------------------------ 
      // Classes 
      // ------------------------------------------------------------------------ 
      var Ball = Base.extend({ 
       initialize: function() { 
        this.position = new Point(100, 100); 
        this.velocity = new Point(3, 0); 

        this.path = new Path.Circle(this.position, 25); 
        this.path.strokeColor = 'black'; 
        this.path.fillColor = 'black'; 
       }, 

       iterate: function() { 
        this.path.position.x += this.velocity.x; 
        this.path.position.y += this.velocity.y; 
        return this; 
       } 
      }); 

     </script> 



     <meta http-equiv="x-dns-prefetch-control" content="off"/> 
    </head> 
    <body> 


     <canvas resize="true" id="canvas"></canvas> 


    </body> 
</html>

來源

2013-12-03 09:29:09 frederickk

來自純javascript的Paper.js

回答

相關問題