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);
	}
   }
 };

强文

感谢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是否具有该名称的属性。看看你的代码，这似乎是＆＃39; q＆＃39;的关键价值。或者＆＃39; w＆＃39;。如果它发现了它所做的财产那就做了什么呢？否则它会跳过它。

在我看来，他们喜欢这样做的事情。节

选择圆心的点
在该点创建一个半径为100的东西
用颜色填充圆圈
将圆圈添加到名为＆＃39;圆圈＆＃39;
从＆＃39; keyData＆＃39;中选择一个条目，得到它的声音＆＃39;财产并称之为“玩耍”。方法。声音＆＃39;财产是一个＆＃39;哈尔＆＃39;对象和我假设嚎叫有一种游戏方法。

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

Paper.js onKeyDown方法

1 个答案: