p5.js入门教程之键盘交互
一、键盘交互相关关键词与函数
keyIsPressed:关键词,按下按键时为true,反之为false
keyCode:关键词,用于判断按下哪个按键
keyPressed():函数,按键按下时触发一次
keyReleased():函数,按键松开时触发一次
keyIsDown():函数,按下指定按键时返回true,反之为false
以下是一个较综合的案例,用wsad与zxcv控制小球移动:
varx=200;
vary=200;
varspeed=2;
functionsetup(){
createCanvas(400,400);
}
functiondraw(){
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;
}
}
functionkeyPressed(){
//按键按下时触发一次
//字母用大写
if(key=='Z'){
x-=20;
}
if(key=='X'){
x+=20;
}
}
functionkeyReleased(){
//按键松开时触发一次
//字母用大写
if(key=='C'){
y-=20;
}
if(key=='V'){
y+=20;
}
}
查看效果:http://alpha.editor.p5js.org/full/S1YQvEFIZ
二、key与keyCode
下面这个案例将在画面上输出你按下的按键的key与keyCode,在写程序时可以用这个办法快速查找keyCode:
functionsetup(){
createCanvas(400,400);
}
functiondraw(){
background(220);
textAlign(CENTER);
textSize(30);
if(keyIsPressed){
text(key,200,180);
text(keyCode,200,220);
}
}
查看效果:http://alpha.editor.p5js.org/full/rkZ2TVFLW
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
热门推荐
6 保研的祝福语简短
10 年轻20岁祝福语简短
11 朋友结婚祝福语信息简短
12 女孩婚礼贺卡祝福语简短
13 30段点歌简短祝福语
14 虎年春节祝福语图文简短
15 写给后妈祝福语大全简短
16 简短回复生日祝福语
17 校长送毕业祝福语简短
18 毕业立体贺卡祝福语简短