p5.js入门教程之键盘交互
更新时间：2018年03月19日 08:39:37 作者：西河某人
这篇文章主要介绍了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);
}
}
查看效果：http://alpha.editor.p5js.org/full/rkZ2TVFLW
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
文本框获得焦点的时在文本框的下方显示一个浮动层，点击文本框隐藏浮动层，下面为大家介绍下鼠标点击时文本框与隐藏层处理问题，感兴趣的朋友可以参考下2013-08-08
这篇文章主要介绍了微信小程序调用摄像头隐藏式拍照功能，本文给大家带来了解决方法、官网代码和小编写的比较完整代码,需要的朋友可以参考下2018-08-08
地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气,这篇文章主要给大家介绍了关于echarts地图区域显示不同颜色的相关资料,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Js中使用正则表达式验证输入是否有特殊字符的简单代码，并通过一小段代码给大家介绍了js正则表达式验证同一字符串不同,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了webpack打包js的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
这篇文章主要介绍了JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了微信小程序scroll-view的滚动条设置实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章介绍了js控制表单奇偶行样式的简单方法，有需呀偶的朋友可以参考一下2013-07-07
这篇文章主要介绍了微信小程序实现购物车代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了JS获得选取checkbox整行数据的方法,涉及使用js对DOM节点的操作技巧,非常具有实用价值,需要的朋友可以参考下2015-01-01
最新评论