首页 > web前端 > js教程 > 正文

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

php中世界最好的语言
发布: 2018-06-15 15:17:53
原创
1893 人浏览过

这次给大家带来如何在项目中使用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);  
 } 
}
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

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

preload()函数与图片上传使用

以上是如何在项目中使用p5.js键盘交互的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板