2016-11-25 12 views
0

私はJavaScriptにはとても新しく、小さなプロジェクト(例えばPatatap)を書こうとしています。Paper.js onKeyDownメソッド

アニメーションにはPaper.jsを、イベントリスナーにはonKeyUp methodを使用しています。ボタンを押すと画像が表示されます。このコードは正常に動作しますが、この方法の仕組みが分かりません私は何をしていますか?私はその機能を再び定義していますか?中括弧の中で私は何を定義していますか? 関数onKeyUpを(イベント){その機能を..defining ?? ..}

(I "はonFrame()" メソッドで有する同じ問題)。

//importing paper.js and howler.js 
 
//CREATING AN OBJECT OF LETTERS 
 
var keyData={ 
 
    q: { 
 
    sound: new Howl({ 
 
     src: ['sounds/bubbles.mp3'] 
 
     }), 
 
    color: '#1abc9c' 
 
    }, 
 
    w: { 
 
    sound: new Howl({ 
 
     src: ['sounds/clay.mp3'] 
 
    }), 
 
    color: '#2ecc71' 
 
    } //OTHER LETTERS HERE.. 
 
}; 
 

 
//CREATING CIRCLES ON THE SCREEN 
 
    var circles=[]; 
 
    function onKeyUp(event) { 
 
    if (keyData[event.key]){ 
 
     var maxPoint = new Point(view.size.width,view.size.height); 
 
     var randomPoint = Point.random(); 
 
     var point = randomPoint * maxPoint; 
 
     newCircle = new Path.Circle(point, 100); 
 
     newCircle.fillColor=keyData[event.key].color; 
 
     circles.push(newCircle); 
 
     keyData[event.key]['sound'].play() \t \t \t 
 
    } 
 
    }; 
 

 
//MAKE CIRCLES DISAPPEAR 
 
function onFrame(event) { 
 
    for(var i=0; i< circles.length;i++){ 
 
    \t circles[i].fillColor.hue += 1; 
 
\t circles[i].scale(0.99); 
 
\t if(circles[i].area < 1){ 
 
\t circles[i].remove(); 
 
\t circles.splice(i, 1); 
 
\t console.log(circles); 
 
\t } 
 
    } 
 
};
強いテキスト

は、あなたの答えのためにあなたにAdamWをありがとうございます。

私が抱えている問題は、上記の行についてです。それは私が

// ON PAPER.JS 
 
function onKeyUp(event){ 
 
    //do stuff.. 
 
}; 
 

 
// ON MY PROJECT 
 
function onKeyUp(event){ 
 
    //do other different stuff.. 
 
};

をやっているように、それはだ、私にとっては意味がありません。しかし、私は唯一の「クリア」onKeyUpを()メソッドはPaper.jsに書かれたとを優先させて頂きます。この方法で私の新しい関数onKeyUp()は単なる多態性です。 なぜ、私はそれをやりますか? onFrame()メソッドも同じです。

答えて

0

私がPaper.jsに慣れていないと、あなたが求めている説明がわかりません。

一般的に機能の本体は、条件がkeyDataがその名前のプロパティを持っているかどうかを確認するためにeventパラメータをチェックからkeyプロパティを取得条件

if (keyData[event.key]) { 
    // do stuff 
} 

に包まれています。あなたのコードを見ると、これは 'q'または 'w'の重要な値になるようです。そのプロパティが見つかった場合、 'do stuff'セクションを実行します。それ以外の場合はスキップします。それは「やるもの」セクション

  1. のように私には見えます

    は円

  2. の中心のためのポイントを選択
  3. がいっぱいに100代の半径とその時点で円を作成しますcircle with a color
  4. 円を 'circle'という既存の配列に追加します。
  5. 'keyData'から項目を選択し、 'sound'プロパティを取得し、 'play'メソッドを呼び出します。 'サウンド'プロパティは 'ハウル'オブジェクトであり、ハウルは演奏方法を持っていると仮定します。

要するに、色付きのディスクとノイズが発生します。

関連する問題