如何在项目中使用p5.js键盘交互

这次给大家带来如何在项目中使用p5.js键盘交互，在项目中使用p5.js键盘交互的注意事项有哪些，下面就是实战案例，一起来看一下。

一、键盘交互相关关键词与函数

keyIsPressed: 关键词，按下按键时为true，反之为false

keyCode: 关键词，用于判断按下哪个按键

keyPressed():函数，按键按下时触发一次

keyReleased():函数，按键松开时触发一次

keyIsDown():函数，按下指定按键时返回true，反之为false

以下是一个较综合的案例，用wsad与zxcv控制小球移动：

var x=200; var y=200; var speed=2;  function setup() {   createCanvas(400, 400); }   function draw() {   background(220);  ellipse(x,y,20,20);  if(keyIsPressed){   //持续触发   //字母用小写   if(key=='a'){    x-=speed;   }   if(key=='d'){    x+=speed;   }  }  if(keyIsDown(87)){   //持续触发     //使用keyCode   //87即w   y-=speed;  }  if(keyIsDown(83)){   //持续触发   //使用keyCode   //83即s   y+=speed;  } }  function keyPressed(){  //按键按下时触发一次  //字母用大写   if(key=='Z'){   x-=20;  }  if(key=='X'){   x+=20;  } }  function keyReleased(){  //按键松开时触发一次  //字母用大写   if(key=='C'){   y-=20;  }  if(key=='V'){   y+=20;  } }

登录后复制

查看效果：http://alpha.editor.p5js.org/full/S1YQvEFIZ

二、key与keyCode

下面这个案例将在画面上输出你按下的按键的key与keyCode，在写程序时可以用这个办法快速查找keyCode：

function setup() {   createCanvas(400, 400); }   function draw() {   background(220);  textAlign(CENTER);  textSize(30);  if(keyIsPressed){   text(key,200,180);    text(keyCode,200,220);   } }

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

jquery+fullpage添加界面内的头部与版权

jquery+fullpage添加界面内的头部与版权

以上就是如何在项目中使用p5.js键盘交互的详细内容，更多请关注【创想鸟】其它相关文章！