Paper.js onKeyDown方法

Question

我是javascript的新手，我正在尝试编写像Patatap这样的小项目。

我正在使用Paper.js进行动画制作，使用onKeyUp method进行事件监听，以便在按下按钮时显示图像。这段代码工作正常，但我不明白这种方法是如何工作的，我在幕后做什么？我是否再次定义该功能？我在括号里面定义了什么？ function onKeyUp（event）{..定义那个函数?? ..}

（与“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);
	}
   }
 };

strong text

谢谢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'的关键值。如果它找到该属性它会执行'do stuff'部分，否则它会跳过它。

它看起来像'做东西'部分

1. 选择一个圆心的点
2. 在该点创建一个半径为100的东西
3. 用颜色填充圆圈
4. 将圆圈添加到名为“圆圈”的现有数组中
5. 从'keyData'中选择一个条目，获取其'sound'属性并调用它的'play'方法。 'sound'属性是一个'嚎叫'对象，我假设嚎叫有一个游戏方法。

简而言之，它会产生彩色磁盘和噪音。