Paper.js onKeyDown方法

Question

我对javascript非常陌生，我正在尝试编写一个类似于巴塔普的小项目。

我使用Paper.js作为动画，onKeyUp法用于事件侦听器，在我按下按钮时使图像出现。这段代码工作正常，但我不明白这个方法是如何工作的，，我在幕后做什么？我又在定义那个函数了吗？我在大括号内定义了什么？函数onKeyUp(事件){ ..defining函数？}

(与"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()			
    }
  };

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

强文本

​

谢谢AdamW的回答。

我遇到的问题是上面的那条线。这对我来说毫无意义，就像我在做

​

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

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

​

但是这样，我只会“清除”写在Paper.js上的onKeyUp()方法，并优先处理名为onKeyUp()的新函数，这仅仅是多态。那我为什么要这么做？onFrame()方法也是如此。

Answer 1

不知道你想要什么样的解释，我也不熟悉Paper.js。

一般来说，函数的主体被包装在一个条件中。

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

条件从key参数中获取event属性，并检查keyData是否具有该名称的属性。从您的代码来看，这似乎是'q‘或'w’的一个关键值。如果它找到了该属性，它就会执行“做事情”部分，否则它会跳过它。

在我看来就像“做事”那部分

1. 为圆心选择一个点
2. 在这一点上创建一个半径为100左右的圆
3. 用颜色填充圆圈
4. 将圆圈添加到现有的称为“圆形”的数组中。
5. 从“keyData”中选择一个条目，获取它的“声音”属性，并调用它的“play”方法。“声音”属性是一个“嚎叫”对象，我认为嚎叫有一种播放方法。

简而言之，它制造一个彩色磁盘和一个噪音。