这篇文章主要介绍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);
}
}
以上是“p5.js如何实现键盘交互”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。